diff --git a/index.html b/index.html index b75b46d..6dcb3e7 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ -
+

Florian Sylvain @@ -55,7 +55,7 @@

Gustave Eiffel University

DUT Informatique
Sept. 2020 - Sept. 2022

- « 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.

@@ -75,7 +75,7 @@

WATT Earth

R&D Developer Apprentice
Oct. 2021 - Sept. 2022

-

« Contribute to the design and development of innovative features at the heart of WATT Earth products. »

+

Contribute to the design and development of innovative features at the heart of WATT Earth products.

diff --git a/script.js b/script.js index bb4b516..dab7178 100644 --- a/script.js +++ b/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); diff --git a/stylesheet.css b/stylesheet.css index 04ad820..dbb70c2 100644 --- a/stylesheet.css +++ b/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 {