diff --git a/index.html b/index.html
index b75b46d..6dcb3e7 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
-
+
@@ -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 {