About
-Bonsoir à tous
-
+
+ 
+
+ + É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. +
+Education
-Bonsoir à tous
+ + + + +Experience
-Bonsoir à tous
+ + + + +
diff --git a/script.js b/script.js
index 88322c3..bb4b516 100644
--- a/script.js
+++ b/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;
+});
diff --git a/stylesheet.css b/stylesheet.css
index 50ce947..04ad820 100644
--- a/stylesheet.css
+++ b/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%;
-}
\ No newline at end of file
+}
+
+#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;
+}