From cb31ea3aafff6bb31d055596d02c5bc70ef39b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Niyikiza?=
 <cedric.niyikiza@student.uclouvain.be>
Date: Fri, 6 Dec 2024 13:36:41 +0000
Subject: [PATCH] =?UTF-8?q?add=20-=20report=20C=C3=A9dric=20Niyikiza=20(20?=
 =?UTF-8?q?24-25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Report_Cedric-Niyikiza_64492300.md        | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 projects/projects_2024-25/Report_Cedric-Niyikiza_64492300.md

diff --git a/projects/projects_2024-25/Report_Cedric-Niyikiza_64492300.md b/projects/projects_2024-25/Report_Cedric-Niyikiza_64492300.md
new file mode 100644
index 0000000..def3c89
--- /dev/null
+++ b/projects/projects_2024-25/Report_Cedric-Niyikiza_64492300.md
@@ -0,0 +1,45 @@
+
+# **LINFO2401 Project Report - Contributing to an Open Source project**
+| **Author:**               | _Cédric Niyikiza_                                     |
+| ------------------------  | ----------------------------------------------------- |
+| **NOMA:**                 | 64492300                                              |
+| **Academic Year:**        | 2024-2025                                             |                 
+| **Open Source Project:**  | [**e-vinci -** _js2_](https://github.com/e-vinci/js2) |
+| **Pull request:**         | [#14](https://github.com/e-vinci/js2/pull/14)         |
+
+
+## Project Selection
+
+To briefly explain how the project selection process went, it was pretty simple. I already knew that I wanted to work on a web project and implement a feature within the project I was going to select. In addition, I wanted this feature to make sense and to respond to a problem.
+
+I looked around the repositories of people I knew. And then the idea came to me to contribute to the site/syllabus of a teacher at [*my old school*](https://www.vinci.be/fr/formations/informatique-developpement-applications).
+
+So I selected a repository from among those initiated by a former Web / JS / React teacher, Raphael Baroni ([Linkedin](https://www.linkedin.com/in/raphael-baroni-0177ab41/) / [Personal Github](https://github.com/e-baron) / [Organization Github](https://github.com/e-vinci/)).
+
+I had very strong memories of my hours spent on the site of the JavaScript course ... And there was a big problem in my eyes... (My eyes were getting tired...)
+ 
+## Project Description
+
+So my project was to implement the ability to switch between a dark mode and a light mode. This was for the [Javascript course website](https://e-vinci.github.io/js2/) ([*BAC 2 at the Haute Ecole de Léonard de Vinci*](https://progcours.vinci.be/cocoon/cours/BINV2150-2.html)). 
+
+## Journey Trough The Project
+So the first thing I did was clone the project (obvious).
+
+- Attempt to launch the project following the `README.md` provided.
+    - Right from the start I had minor problems with the version of Node.JS used to compile the project. (Issue resolved thanks to [this solution](https://stackoverflow.com/a/77737680)).
+
+- Since I wasn't familiar with [Gatsby](https://www.gatsbyjs.com/), I went straight to the web to find out how to simply implement what I wanted. I saw that there was a way out with additional packages, but this strategy wasn't the right one because I didn't even understand how the project was subdivided.
+
+- So I took the time to look through the project's code and came across the `/scss` folder, which contained the files used to style the site's pages. I'd never used this variant of CSS before, so I was a bit scared at first. Looking in more detail at the files in this folder, I found the file containing the basic colors for the site. So all I had to do was add my color variables for my dark mode. But that wasn't all, I had to manage the style switch within the front-end.
+
+- To manage the switch, I had to add a button and add a scss file that would override the style of the whole site if the ‘Dark Mode’ button was clicked.
+    - For the button: Addition of a button in the navbar (management of the dark/light mode state)
+    - For the style : 
+        - Addition of the `_darkmode.scss` file. Override style so that it makes sense and looks good.
+        - Import added to `main.scss`, so that the project recognizes these style rules.
+
+After all these steps, the feature was perfectly functional! 😁
+
+## Conclusion
+
+To conclude, I'd say that I'm very satisfied with my contribution. It's allowed me to challenge myself with technologies I didn't know (Gatsby [Framework] and SCSS) and not give up in the face of difficulty. What's more, I'm pleased to have been able to contribute to a project initiated by someone who taught me Javascript and the basics of web development.
\ No newline at end of file
-- 
GitLab