First Part

css/animations.css

@@ -0,0 +1,15 @@
+/* Hover animation */
+
+@keyframes hover {
+  /* At 0% percent of the naimation we are at 0 */
+  0% {
+    transform: translateY(0);
+  }
+  /* At 50% we are 5 px down */
+  50% {
+    transform: translateY(-5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

css/color-mode.css

@@ -0,0 +1,105 @@
+/* Light mode */
+:root {
+  /* Colors */
+  --bg: #fff;
+  --bg-alt: #333;
+  --bg-alt-2: #f0f0f0;
+  --bg-transparent: #ffffffe8;
+  --border: 0.01rem solid #333;
+  --text: #333;
+  --text-alt: #fff;
+
+  /* Face animation */
+  --tl-1: url("../assets/face-animation-light/tl-1.png");
+  --tl-2: url("../assets/face-animation-light/tl-2.png");
+  --tl-3: url("../assets/face-animation-light/tl-3.png");
+  --tl-4: url("../assets/face-animation-light/tl-4.png");
+  --tl-5: url("../assets/face-animation-light/tl-5.png");
+
+  --tr-1: url("../assets/face-animation-light/tr-1.png");
+  --tr-2: url("../assets/face-animation-light/tr-2.png");
+  --tr-3: url("../assets/face-animation-light/tr-3.png");
+  --tr-4: url("../assets/face-animation-light/tr-4.png");
+  --tr-5: url("../assets/face-animation-light/tr-5.png");
+
+  --bl-1: url("../assets/face-animation-light/bl-1.png");
+  --bl-2: url("../assets/face-animation-light/bl-2.png");
+  --bl-3: url("../assets/face-animation-light/bl-3.png");
+  --bl-4: url("../assets/face-animation-light/bl-4.png");
+  --bl-5: url("../assets/face-animation-light/bl-5.png");
+
+  --br-1: url("../assets/face-animation-light/br-1.png");
+  --br-2: url("../assets/face-animation-light/br-2.png");
+  --br-3: url("../assets/face-animation-light/br-3.png");
+  --br-4: url("../assets/face-animation-light/br-4.png");
+  --br-5: url("../assets/face-animation-light/br-5.png");
+
+  --sun: url("../assets/icons/sun.png");
+}
+/* Dqrk mode */
+:root.dark-mode {
+  /* Colors */
+  --bg: #202124;
+  --bg-alt: #3c3d40;
+  --bg-alt-2: #333;
+  --bg-transparent: #333333f5;
+  --border: 0.01rem solid #5a5a5a;
+  --text: #fff;
+
+  /* Face animation */
+  --tl-1: url("../assets/face-animation-dark/tlw-1.png");
+  --tl-2: url("../assets/face-animation-dark/tlw-2.png");
+  --tl-3: url("../assets/face-animation-dark/tlw-3.png");
+  --tl-4: url("../assets/face-animation-dark/tlw-4.png");
+  --tl-5: url("../assets/face-animation-dark/tlw-5.png");
+
+  --tr-1: url("../assets/face-animation-dark/trw-1.png");
+  --tr-2: url("../assets/face-animation-dark/trw-2.png");
+  --tr-3: url("../assets/face-animation-dark/trw-3.png");
+  --tr-4: url("../assets/face-animation-dark/trw-4.png");
+  --tr-5: url("../assets/face-animation-dark/trw-5.png");
+
+  --bl-1: url("../assets/face-animation-dark/blw-1.png");
+  --bl-2: url("../assets/face-animation-dark/blw-2.png");
+  --bl-3: url("../assets/face-animation-dark/blw-3.png");
+  --bl-4: url("../assets/face-animation-dark/blw-4.png");
+  --bl-5: url("../assets/face-animation-dark/blw-5.png");
+
+  --br-1: url("../assets/face-animation-dark/brw-1.png");
+  --br-2: url("../assets/face-animation-dark/brw-2.png");
+  --br-3: url("../assets/face-animation-dark/brw-3.png");
+  --br-4: url("../assets/face-animation-dark/brw-4.png");
+  --br-5: url("../assets/face-animation-dark/brw-5.png");
+
+  --moon: url("../assets/icons/moon.png");
+}
+
+/* Color mode toggle button */
+#color-mode {
+  background: var(--bg-alt-2);
+  height: 2.75rem;
+  width: 4rem;
+  border-radius: 3rem;
+  display: flex;
+  align-items: center;
+  /* position of the sun icon */
+  justify-content: flex-start;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#toggle-button {
+  background-image: var(--sun);
+  background-size: cover;
+  cursor: pointer;
+}
+
+.dark-mode #toggle-button {
+  background-image: var(--moon);
+}
+
+.dark-mode #color-mode {
+  justify-content: flex-end;
+}

css/style.css

@@ -1,3 +1,176 @@
+/*Custom Font*/
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
+
+/* General */
 body {
-  background: red;
+  font-family: "Poppins", sans-serif;
+  /* we create variable for light and dark mode */
+  background: var(--bg);
+  color: var(--text);
+  height: 100%;
+  width: 100%;
+  /*removing margin */
+  margin: 0;
+  /*clicking elements like button will give transparetn style */
+  -webkit-tap-highlight-color: transparent;
+}
+/* Removing margin of the text */
+h1,
+h2,
+h5,
+p {
+  margin: 0;
+}
+
+.icon {
+  /* 1rem = 16px */
+  height: 2rem;
+  width: 2rem;
+  margin: 0 0.5rem;
+}
+
+/* Hero */
+#hero {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  /* Center the text perfectly and responsive */
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+#hero__animation {
+  animation-name: hover;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  /* start slow, speed up and slow again */
+  animation-timing-function: ease-in-out;
+  height: 25rem;
+  width: 25rem;
+  /* Removing scrollbar and unwanted function with that, so each time we will be at max of screen size */
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+#hero__animation__img {
+  /* We use a variable for image because we change the image depending on the place we click */
+  background-image: var(--tl-1);
+  height: 100%;
+  background-position: center;
+  background-size: cover;
+}
+
+/* Grid common attributes/style*/
+#grid {
+  position: absolute; /*by default start at top left*/
+  display: grid;
+  /* We split in 4 the page */
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  height: 100vh;
+  width: 100vw;
+}
+
+#grid__tl__btn,
+#grid__tr__btn,
+#grid__bl__btn,
+#grid__br__btn {
+  height: 18.75rem;
+  width: 18.75rem;
+  background: var(--bg);
+  color: var(--text);
+  border: var(--border);
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 800;
+  font-size: 1.5rem;
+  z-index: 100;
+  border-radius: 40%;
+  transition: transform 0.2s ease-in-out;
+}
+
+#grid__tl__content,
+#grid__tr__content,
+#grid__bl__content,
+#grid__br__content {
+  position: absolute;
+  text-align: center;
+  transition: transform 0.3s ease-in-out;
+  color: var(--text-alt);
+}
+
+#grid__tl__btn,
+#grid__tr__btn {
+  padding-bottom: 0.5rem;
+  align-items: flex-end;
+}
+
+#grid__bl__btn,
+#grid__br__btn {
+  padding-top: 0.5rem;
+}
+/* We give rotation 2 times for each corner so that they cancel each other, because it rotates if we keep only one parameter */
+#grid__tl__btn:active,
+#grid__br__btn:active {
+  transform: rotate(-45deg) scale(1.05);
+}
+
+#grid__tr__btn:active,
+#grid__bl__btn:active {
+  transform: rotate(45deg) scale(1.05);
+}
+
+/* Top left corner */
+#grid__tl__btn {
+  transform: rotate(-45deg);
+  top: -11.5rem;
+  left: -11.5rem;
+}
+#grid__tl__content {
+  width: 30vw;
+  top: 10vh;
+  left: 0;
+  /* We push content out of the screen */
+  /* transform: translateX(-100vw) translateY(-100vh); */
+}
+
+article {
+  background: rgb(245, 245, 245);
+  font-size: 0.8rem;
+  list-style: none;
+  border: var(--border);
+  border-radius: 2rem;
+  padding: 0.5rem;
+  margin: 1rem;
+  width: 8.75rem;
+  min-width: 8.75rem;
+}
+
+article h2 {
+  font-size: 1rem;
+  padding: 0.3rem;
+}
+
+article p {
+  padding-bottom: 0.3rem;
+}
+article h2,
+article p {
+  color: #333;
+}
+
+.cards {
+  padding: 0;
+}
+.card__content {
+  display: flex;
+  align-items: center;
+}
+.card__content__text {
+  color: var(--text);
+  text-align: left;
+  margin: 0 1rem;
 }

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Martin Gandon Portfolio</title>
+    <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico">
     <!-- defer = load HTML first and then js -->
     <script src="/js/animation.js" defer></script>
     <script src="/js/color-mode.js" defer></script>
@@ -15,6 +16,47 @@
 </head>
 
 <body>
+    <div id="hero">
+        <h5>Hello I'm</h5>
+        <h1>Martin Gandon</h1>
+        <p>Engineering Student at Université de Technologie de Troyes</p>
+        <!-- Block, Element, modifier naming convention, because we are in the div hero -->
+        <div id="hero__animation">
+            <div id="hero__animation__img"></div>
+        </div>
+    </div>
+    <nav id="grid">
+        <div id="grid__tl">
+            <div id="grid__tl__btn">About</div>
+            <div id="grid__tl__content">
+                <div class="cards">
+                    <div class="cards__content">
+                        <article>
+                            <img src="./assets/icons/experience.png" alt="Experience icon" class="icon">
+                            <h2>Experience</h2>
+                            <p>4ème année ISI <br> 2e experience <br> 3e experience </p>
+                        </article>
+                        <p class="cards__content__text">
+                            Lorem ipsum dolor sit amet consectetur.
+                        </p>
+                    </div>
+                    <div class="cards__content">
+                        <article>
+                            <img src="./assets/icons/education.png" alt="Education icon" class="icon">
+                            <h2>Education</h2>
+                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
+                        </article>
+                        <p class="cards__content__text">
+                            Lorem ipsum dolor sit amet consectetur.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <div id="color-mode">
+        <div id="toggle-button" class="icon"></div>
+    </div>
 
 </body>
 

js/animation.js

@@ -0,0 +1,24 @@
+// Define DOM elements
+
+const heroImage = document.querySelector("#hero__animation__img")
+    ;
+const tl = document.querySelector("#grid__tl")
+const tr = document.querySelector("#grid__tr")
+const bl = document.querySelector("#grid__bl")
+const br = document.querySelector("#grid__br")
+
+const tlBtn = document.querySelector("#grid__tl__btn")
+const trBtn = document.querySelector("#grid__tr__btn")
+const blBtn = document.querySelector("#grid__bl__btn")
+const brBtn = document.querySelector("#grid__br__btn")
+
+const tlContent = document.querySelector("#grid__tl__content")
+const trContent = document.querySelector("#grid__tr__content")
+const blContent = document.querySelector("#grid__bl__content")
+const brContent = document.querySelector("#grid__br__content")
+
+const projectOne = document.querySelector(".p-1")
+const projectTwo = document.querySelector(".p-2")
+const projectThree = document.querySelector(".p-3")
+
+// Define colors and positions