🚧 Added projects

index.html

@@ -90,9 +90,9 @@
 
             <div class="to-fade" id="projects">
                 <h2>Projects</h2>
-
+                <div class="projects-list">
                     <div>
-                    <article id="pong2D">
+                        <article id="pong2D" class="to-slide">
                             <div class="plus-button">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
                             </div>
@@ -105,7 +105,7 @@
                     </div>
 
                     <div>
-                    <article id="pong3D">
+                        <article id="pong3D" class="to-slide">
                             <div class="plus-button">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
                             </div>
@@ -118,7 +118,7 @@
                     </article>
 
                     <div>
-                    <article id="risitasBot">
+                        <article id="risitasBot" class="to-slide">
                             <div class="plus-button">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
                             </div>
@@ -131,7 +131,7 @@
                     </div>
 
                     <div>
-                    <article id="riverwood">
+                        <article id="riverwood" class="to-slide">
                             <div class="plus-button">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
                             </div>
@@ -143,6 +143,20 @@
                         </article>
                     </div>
 
+                    <div>
+                        <article id="thesesFr" class="to-slide">
+                            <div class="plus-button">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
+                            </div>
+                            <div class="article-content">
+                                <p>
+                                    The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).
+                                </p>
+                            </div>
+                        </article>
+                    </div>
+
+                </div>
             </div>
 
             <div class="to-fade" id="contact">

script.js

@@ -5,16 +5,15 @@ const mainTitle = document.querySelector('.main-title');
 const navBarElems = document.querySelector('body > header > nav');
 const contentElems = document.querySelectorAll('#content > div, .main-title');
 
-function toMove(toClass, inClass) {
+function toAddClass(toClass, inClass) {
     "use strict";
 
-    const elementsToMove = document.querySelectorAll(toClass);
+    const elementsToAddClass = document.querySelectorAll(toClass);
 
-    if (elementsToMove !== null) {
-        elementsToMove.forEach(function (elem) {
-            const distInView = (
-                elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2
-            ) - window.innerHeight;
+    if (elementsToAddClass !== null) {
+        elementsToAddClass.forEach(function (elem) {
+            const distInView = elem.getBoundingClientRect().top
+                    - window.innerHeight + 100;
             if (distInView < 0) {
                 elem.classList.add(inClass);
             }
@@ -73,9 +72,9 @@ function updateUrl() {
 function scrollHandler() {
     "use strict";
 
-    toMove('.to-fade', 'fade-in');
-    toMove('.to-grow', 'grow-in');
-    toMove('.to-slide', 'slide-in');
+    toAddClass('.to-fade', 'fade-in');
+    toAddClass('.to-grow', 'grow-in');
+    toAddClass('.to-slide', 'slide-in');
 
     updateTitle();
 

stylesheet.css

@@ -36,9 +36,11 @@ header {
 }
 
 nav {
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: 10px;
+
     font-size: 1.6em;
     letter-spacing: 4px;
 }
@@ -49,15 +51,33 @@ nav a:first-letter {
 }
 
 nav a {
+    position: relative;
+
     font-family: Manrope;
 
-    transform: translateX(-100%);
     opacity: 0;
+
+    transform: translateX(-100%);
     transition: transform 600ms, opacity 600ms, letter-spacing 200ms;
 }
 
-nav a:hover {
-    letter-spacing: 6px;
+nav a::after {
+    content: '';
+
+    position: absolute;
+    left: 0;
+    bottom: -3px;
+
+    background: #3AC414;
+
+    width: 0;
+    height: 3px;
+
+    transition: width 200ms ease-in-out;
+}
+
+nav a:hover::after {
+    width: 100%;
 }
 
 nav a:nth-child(0n+2) {
@@ -274,18 +294,22 @@ header:hover {
     font-size: smaller;
 }
 
-#projects {
-    display: grid;
-    gap: 30px;
+.projects-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
-#projects > div {
+.projects-list > div {
     position: relative;
 
     display: flex;
     justify-content: center;
     align-items: center;
 
+    width: 300px;
     height: 250px;
 
     border-radius: 0.5em;
@@ -293,7 +317,7 @@ header:hover {
     overflow: hidden;
 }
 
-#projects > div::before, #projects > div::after {
+.projects-list > div::before, .projects-list > div::after {
     content: '';
     position: absolute;
     top: 0;
@@ -302,26 +326,26 @@ header:hover {
     width: 100%;
     height: 100%;
 
-    background-color: #D6FFC9;
+    background-color: #fff;
 
     border-radius: inherit;
     transition: transform 500ms;
 }
 
-#projects > div::before {
+.projects-list > div::before {
     transform: translate(-100%, -100%);
 }
 
-#projects > div::after {
+.projects-list > div::after {
     z-index: -1;
     transform: translate(100%, 100%);
 }
 
-#projects > div:hover::before {
+.projects-list > div:hover::before {
     transform: translate(-0.5em, -0.5em);
 }
 
-#projects > div:hover::after {
+.projects-list > div:hover::after {
     transform: translate(0, 0);
 }
 
@@ -333,10 +357,14 @@ header:hover {
     border-radius: inherit;
 
     cursor: pointer;
+
+    transform: translateX(-150%);
+    transition: transform 200ms;
 }
 
 #projects article:hover .plus-button {
     backdrop-filter: blur(2px);
+    background-color: #0005;
     box-shadow: inset #121212 0 0 100px;
 }
 
@@ -360,7 +388,8 @@ header:hover {
 
 .plus-button svg {
     opacity: 0;
-    fill: #CAEBC0;
+    fill: #fff;
+    filter: drop-shadow(0 0 10px #0003);
     width: 20%;
     height: 20%;
     transition: opacity 200ms;
@@ -402,6 +431,14 @@ header:hover {
     background: center / cover no-repeat url('assets/imgs/Riverwood.gif');
 }
 
+#thesesFr {
+    background: center / contain no-repeat url('assets/imgs/ThesesFr.png'), center / cover url('assets/imgs/ThesesFr_blur.png');
+}
+
+#thesesFr:hover {
+    background: center / cover no-repeat url('assets/imgs/ThesesFr.gif');
+}
+
 .degree {
     font-variation-settings: 'wght' 400;
 }