✨ Dynamic URL and little refactoring

index.html

@@ -28,7 +28,7 @@
 
         </header>
 
-        <div class="main-title">
+        <div id="landing" class="main-title">
             <h1>
                 <a href="#about">
                     Florian Sylvain
@@ -55,7 +55,7 @@
                     <h3>Gustave Eiffel University</h3>
                     <p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
                     <p>
-                        « Fundamental courses, to acquire knowledge, basic concepts and working methods; applied courses, to facilitate the learning of these concepts and to deploy professional know-how; evolutionary courses, to integrate technological progress and the requirements of the professional world; open courses, to develop the communication skills essential to computer scientists in the exercise of their profession. »
+                        Fundamental courses, to acquire knowledge, basic concepts and working methods; applied courses, to facilitate the learning of these concepts and to deploy professional know-how; evolutionary courses, to integrate technological progress and the requirements of the professional world; open courses, to develop the communication skills essential to computer scientists in the exercise of their profession.
                     </p>
                 </div>
 
@@ -75,7 +75,7 @@
                 <div class="to-slide">
                     <h3>WATT Earth</h3>
                     <p><span class="degree">R&D Developer Apprentice</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
-                    <p>« Contribute to the design and development of innovative features at the heart of WATT Earth products. »</p>
+                    <p>Contribute to the design and development of innovative features at the heart of WATT Earth products.</p>
                 </div>
 
                 <div class="to-slide">

script.js

@@ -3,6 +3,7 @@
 
 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) {
     "use strict";
@@ -16,20 +17,17 @@ function toMove(toClass, inClass) {
             ) - window.innerHeight;
             if (distInView < 0) {
                 elem.classList.add(inClass);
-            } else {
-                elem.classList.remove(inClass);
             }
+            // else {
+            //     elem.classList.remove(inClass);
+            // }
         });
     }
 }
 
-function scrollHandler() {
+function updateTitle() {
     "use strict";
 
-    toMove('.to-fade', 'fade-in');
-    toMove('.to-grow', 'grow-in');
-    toMove('.to-slide', 'slide-in');
-
     const y = window.scrollY;
     const titlePos = mainTitle.getBoundingClientRect();
 
@@ -48,6 +46,43 @@ function scrollHandler() {
     }
 }
 
+function updateUrl() {
+    "use strict";
+
+    const elements = [];
+    let max = null;
+    let index = null;
+
+    contentElems.forEach(function (elem) {
+        const pos = elem.getBoundingClientRect().top;
+        if (pos <= 0) {
+            if (max === null || pos > max) {
+                max = pos;
+                index = Array.from(contentElems).indexOf(elem);
+            }
+            elements.push(elem);
+        }
+    });
+
+    if (elements[index] && !window.location.href.includes(elements[index].id)) {
+        const hash = 'index.html#' + elements[index].id;
+        console.log("pouet");
+        window.history.pushState(null, null, hash);
+    }
+}
+
+function scrollHandler() {
+    "use strict";
+
+    toMove('.to-fade', 'fade-in');
+    toMove('.to-grow', 'grow-in');
+    toMove('.to-slide', 'slide-in');
+
+    updateTitle();
+
+    updateUrl();
+}
+
 scrollHandler();
 
 window.addEventListener('scroll', scrollHandler);

stylesheet.css

@@ -77,7 +77,6 @@ h2 {
     letter-spacing: 2px;
     padding-bottom: 10px;
     border-bottom: 2px solid #101010;
-    transition: transform 200ms, text-shadow 200ms;
 }
 
 h2:first-letter {
@@ -186,11 +185,6 @@ a {
     text-shadow: #253622 10px 10px 10px;
 }
 
-h2:hover {
-    transform: translateX(-2px) translateY(-2px);
-    text-shadow: #253622 3px 3px 5px;
-}
-
 .to-fade {
     opacity: 0;
     transition: opacity 1000ms;
@@ -201,7 +195,7 @@ h2:hover {
 }
 
 #content > div {
-    padding: 55px 10% 55px 10%;
+    padding: 55px 10%;
 }
 
 #content > div:nth-child(2n-1) {
@@ -243,11 +237,29 @@ h2:hover {
 #education > div, #experience > div  {
     transform: translateX(-150%);
     transition: transform 200ms;
-    margin-bottom: 30px;
+    margin-bottom: 50px;
 }
 
 #education h3, #experience h3 {
     font-variation-settings: 'wght' 600;
+    margin-bottom: 5px;
+}
+
+#education p, #experience p {
+    position: relative;
+    margin-top: 0;
+}
+
+#education p + p::before, #experience p + p::before {
+    content: "\201C";
+
+    position: absolute;
+    top: 25px;
+    left: -35px;
+
+    font-family: Overpass;
+    font-size: 52px;
+    line-height: 0;
 }
 
 #education > div:last-child, #experience > div:last-child {
@@ -259,7 +271,7 @@ h2:hover {
 }
 
 .degree {
-    font-variation-settings: 'wght' 500;
+    font-variation-settings: 'wght' 400;
 }
 
 .time-range {