✨ Added main sections, visual improvements

index.html

@@ -29,25 +29,63 @@
         </header>
 
         <div class="main-title">
-            <h1><a href="#about">Florian Sylvain</a></h1>
+            <h1>
+                <a href="#about">
+                    Florian Sylvain
+                </a>
+            </h1>
         </div>
 
         <div id="content">
 
             <div class="to-fade" id="about">
                 <h2>About</h2>
-                <p>Bonsoir à tous</p>
-                <img src="assets/test.jpg">
+                <div class="block">
+                    <img class="to-grow" src="assets/FlorianSylvain.jpg">
+                    <p>
+                        Étudiant en DUT Informatique à l'Université Gustave Eiffel et apprenti développeur R&D chez WATT Earth, je me passionne pour l'informatique depuis toujours. Le web design, les jeux vidéo, l'algorithmie forment à eux trois mon fer de lance en informatique.
+                    </p>
+                </div>
             </div>
 
             <div class="to-fade" id="education">
                 <h2>Education</h2>
-                <p>Bonsoir à tous</p>
+
+                <div class="to-slide">
+                    <h3>Université Gustave Eiffel</h3>
+                    <p><span class="degree">DUT Informatique</span><br><span class="time-range">Sept. 2020 - Sept. 2022</span></p>
+                    <p>
+                        « Enseignements fondamentaux, pour acquérir des connaissances, des concepts de base et des méthodes de travail ; appliqués, pour faciliter l'apprentissage de ces concepts et déployer des savoir-faire professionnels ; évolutifs, pour intégrer les progrès technologiques et les exigences du monde professionnel ; ouverts, pour développer les facultés de communication indispensables aux informaticiens dans l'exercice de leur métier. »
+                    </p>
+                </div>
+
+                <div class="to-slide">
+                    <h3>Lycée Polyvalent René Cassin</h3>
+                    <p><span class="degree">Baccalauréat STI2D</span><br><span class="time-range">Sept. 2017 - Juil. 2020</span></p>
+                    <p>
+                        Formation à l'industrie et à l'innovation technologique dans le respect de la préservation de l’environnement.
+                    </p>
+                </div>
+
             </div>
 
             <div class="to-fade" id="experience">
                 <h2>Experience</h2>
-                <p>Bonsoir à tous</p>
+
+                <div class="to-slide">
+                    <h3>WATT Earth</h3>
+                    <p><span class="degree">Apprenti développeur R&D</span><br><span class="time-range">Oct. 2021 - Sept. 2022</span></p>
+                    <p>« Contribuer à la conception et au développement de fonctionnalités innovantes au cœur des produits de WATT Earth. »</p>
+                </div>
+
+                <div class="to-slide">
+                    <h3>UGAP</h3>
+                    <p><span class="degree">Support technique et informatique</span><br><span class="time-range">2016, une semaine</span></p>
+                    <p>
+                        Mes objectifs étaient de déterminer les solutions et préconisations techniques et les communiquer aux clients, analyser des problèmes techniques, informer les clients des problèmes techniques relevés et des modifications et réparations à apporter, former des utilisateurs à un produit ou un équipement et effectuer le suivi technique des produits et de leur évolution auprès des clients.
+                    </p>
+                </div>
+
             </div>
 
             <div class="to-fade" id="projects">

script.js

@@ -1,57 +1,73 @@
-const mainTitle = document.querySelector('.main-title')
-const navBarElems = document.querySelector('body > header > nav')
+/*jslint browser maxlen:80 */
+/*global window */
 
-const mainContent = document.querySelectorAll('#content')
+const mainTitle = document.querySelector('.main-title');
+const navBarElems = document.querySelector('body > header > nav');
 
-function fadeIn() {
-    const elementsToFade = document.querySelectorAll(".to-fade")
-    if (elementsToFade !== null) {
-        elementsToFade.forEach(elem => {
-            const distInView = (elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2) - window.innerHeight
+function toMove(toClass, inClass) {
+    "use strict";
+
+    const elementsToMove = document.querySelectorAll(toClass);
+
+    if (elementsToMove !== null) {
+        elementsToMove.forEach(function (elem) {
+            const distInView = (
+                elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2
+            ) - window.innerHeight;
             if (distInView < 0) {
-                elem.classList.add("fade-in")
+                elem.classList.add(inClass);
             } else {
-                elem.classList.remove("fade-in")
+                elem.classList.remove(inClass);
             }
-        })
+        });
     }
 }
 
 function scrollHandler() {
-    fadeIn()
-    const y = window.scrollY
-    const titlePos = mainTitle.getBoundingClientRect()
+    "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();
 
     if (titlePos.bottom > 0) {
-        const distanceToTop = window.pageYOffset + titlePos.top
-        const elementHeight = mainTitle.offsetHeight
-        const opacity = 1 - ((y - distanceToTop) / elementHeight) * 2
+        const distanceToTop = window.pageYOffset + titlePos.top;
+        const elementHeight = mainTitle.offsetHeight;
+        const opacity = 1 - ((y - distanceToTop) / elementHeight) * 2;
 
         if (opacity > 0) {
-            mainTitle.style.letterSpacing = (y * 0.005 <= 0.1 ? 0.1 : y * 0.005) * 2 + 'em'
-            mainTitle.style.opacity = opacity
+            const pixelsSpacing = (y * 0.005 <= 0.1
+                ? 0.1
+                : y * 0.005);
+            mainTitle.style.letterSpacing = (pixelsSpacing * 2) + 'em';
+            mainTitle.style.opacity = opacity;
         }
     }
 }
 
-scrollHandler()
+scrollHandler();
 
-window.addEventListener('scroll', scrollHandler)
+window.addEventListener('scroll', scrollHandler);
 
 function switchNavBar() {
-    const header = document.querySelector('.hamburger').parentNode.classList
+    "use strict";
+    const header = document.querySelector('.hamburger').parentNode.classList;
 
     if (header.contains('slide-in') || header.contains('to-cross')) {
-        header.remove('slide-in')
-        header.remove('to-cross')
-        navBarElems.classList.remove('slide-elements')
+        header.remove('slide-in');
+        header.remove('to-cross');
+        navBarElems.classList.remove('slide-elements');
     } else {
-        header.add('slide-in')
-        header.add('to-cross')
-        navBarElems.classList.add('slide-elements')
+        header.add('slide-in');
+        header.add('to-cross');
+        navBarElems.classList.add('slide-elements');
     }
 }
 
-document.querySelectorAll('nav a').forEach(a => {
-    a.onclick = switchNavBar
-})
+document.querySelectorAll('nav a').forEach(function (a) {
+    "use strict";
+    a.onclick = switchNavBar;
+});

stylesheet.css

@@ -10,18 +10,18 @@
 
 * {
     box-sizing: border-box;
-
     scroll-behavior: smooth;
-
-    color: #fff;
-    font-family: Manrope;
-    font-variation-settings: "wght" 600;
 }
 
 body {
     width: 100%;
     height: 2000px;
     margin: 0;
+
+    color: #fff;
+    font-family: Manrope;
+    font-variation-settings: 'wght' 500;
+
     background-color: #101010;
 }
 
@@ -73,13 +73,26 @@ nav a:nth-child(0n+5) {
     transition: transform 200ms, opacity 200ms, letter-spacing 200ms;
 }
 
-.slide-elements a {
-    opacity: 100%;
-    transform: translateX(0);
+h2 {
+    letter-spacing: 2px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #101010;
+    transition: transform 200ms, text-shadow 200ms;
+}
+
+h2:first-letter {
+    color: #3AC414;
+    font-variation-settings: 'wght' 600;
 }
 
 a {
     text-decoration: none;
+    color: #fff;
+}
+
+.slide-elements a {
+    opacity: 100%;
+    transform: translateX(0);
 }
 
 .hamburger {
@@ -138,7 +151,7 @@ a {
 }
 
 .slide-in {
-    transform: translateY(0);
+    transform: translateY(0) translateX(0) !important;
 }
 
 .main-title {
@@ -157,11 +170,10 @@ a {
     text-align: center;
 
     font-family: Manrope;
-    font-variation-settings: "wght" 600;
+    font-variation-settings: 'wght' 500;
     font-size: 2em;
     letter-spacing: 0.1em;
     color: #fff;
-    text-shadow: #ffff 0 0 0;
 }
 
 .main-title h1 {
@@ -174,22 +186,9 @@ a {
     text-shadow: #253622 10px 10px 10px;
 }
 
-#content {
-    width: 80%;
-    margin: auto;
-}
-
-#content img {
-    width: 100%;
-    border-radius: 0.5em;
-}
-
-#content > div {
-    padding-top: 55px;
-}
-
-#content > div:last-child {
-    margin-bottom: 100vh;
+h2:hover {
+    transform: translateX(-2px) translateY(-2px);
+    text-shadow: #253622 3px 3px 5px;
 }
 
 .to-fade {
@@ -199,4 +198,71 @@ a {
 
 .fade-in {
     opacity: 100%;
-}
+}
+
+#content > div {
+    padding: 55px 10% 55px 10%;
+}
+
+#content > div:nth-child(2n-1) {
+    color: #101010;
+    background-color: #fff;
+}
+
+#content > div:nth-child(2n) > h2 {
+    border-bottom: 2px solid #fff;
+}
+
+#content img {
+    width: 300px;
+    height: 300px;
+
+    margin: 5px 0 5px 0;
+
+    box-shadow: #0002 0 0 25px;
+
+    transform: scale(0.95) rotate(0);
+    transition: transform 1s, box-shadow 200ms;
+}
+
+.grow-in {
+    transform: scale(1) rotate(2deg) !important;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.block > p {
+    margin: 0;
+    padding: 25px 3px 0 3px;
+}
+
+#education > div, #experience > div  {
+    transform: translateX(-150%);
+    transition: transform 200ms;
+    margin-bottom: 30px;
+}
+
+#education h3, #experience h3 {
+    font-variation-settings: 'wght' 600;
+}
+
+#education > div:last-child, #experience > div:last-child {
+    margin-bottom: 0;
+}
+
+#education p + p {
+    font-size: smaller;
+}
+
+.degree {
+    font-variation-settings: 'wght' 500;
+}
+
+.time-range {
+    font-size: smaller;
+    font-variation-settings: 'wght' 300;
+}