mouses sound

src/modules/cv.html

@@ -441,7 +441,19 @@
     </ul>
   </div>
 
-  <div class="mouse"><div class="frames mouse_3 pre"></div></div>
+  <div class="mouse_container">
+    <div class="mouse">
+      <div class="frames mouse_3 pre"></div>
+    </div>
+    <div class="skouik">
+      <button class="button button1"></button>
+      <span class="sound sound_2 sound_left">SKOUIK!</span>
+
+      <button class="button button2"></button>
+      <span class="sound sound_2 sound_right">SKOUIK!</span>
+    </div>
+  </div>
+
   <div
     class="banner banner_size_2 banner_reverse banner_speed_40 grid_full_width"
     aria-label="banner delimitation in ASCII art"

src/modules/hero.html

@@ -128,7 +128,19 @@
     </p>
   </header>
 
-  <div class="mouse"><div class="frames mouse_1 pre"></div></div>
+  <div class="mouse_container">
+    <div class="mouse">
+      <div class="frames mouse_1 pre"></div>
+    </div>
+    <div class="skouik">
+      <button class="button button1"></button>
+      <span class="sound sound_1 sound_left">SKOUIK!</span>
+
+      <button class="button button2"></button>
+      <span class="sound sound_1 sound_right">SKOUIK!</span>
+    </div>
+  </div>
+
   <div
     class="banner banner_size_3 banner_speed_30 grid_full_width"
     aria-label="banner delimitation in ASCII art"

src/modules/infos.html

@@ -53,18 +53,29 @@
       >hugogogo@protonmail.com</a
     >
     <a
-      href="https://hugulumu.fr"
+      href="https://hugulumu.fr/"
       target="_blank"
       rel="noopener noreferrer"
       class="site"
     ></a>
     <a
-      href="gitea.hugulumu.com"
+      href="https://gitea.hugulumu.com/"
       target="_blank"
       rel="noopener noreferrer"
       class="git"
     ></a>
   </article>
 
-  <div class="mouse"><div class="frames mouse_4 pre"></div></div>
+  <div class="mouse_container">
+    <div class="mouse">
+      <div class="frames mouse_4 pre"></div>
+    </div>
+    <div class="skouik">
+      <button class="button button1">button1</button>
+      <span class="sound sound_4 sound_left">SKOUIK!</span>
+
+      <button class="button button2">button2</button>
+      <span class="sound sound_4 sound_right">SKOUIK!</span>
+    </div>
+  </div>
 </section>

src/modules/projects.html

@@ -81,7 +81,7 @@
   <div class="projects_grid">
     <figure class="project">
       <a
-        href="https://gitea.hugulumu.com/42/42_INT_04_fdf"
+        href="https://gitea.hugulumu.com/42/42_INT_04_fdf/"
         target="_blank"
         rel="noopener noreferrer"
         title="link to the source code"
@@ -102,7 +102,7 @@
           </span>
         </p>
         <a
-          href="https://gitea.hugulumu.com/42/42_INT_04_fdf"
+          href="https://gitea.hugulumu.com/42/42_INT_04_fdf/"
           target="_blank"
           rel="noopener noreferrer"
           title="link to the source code"
@@ -112,7 +112,7 @@
 
     <figure class="project">
       <a
-        href="https://gitea.hugulumu.com/42/42_INT_10_cube3d"
+        href="https://gitea.hugulumu.com/42/42_INT_10_cube3d/"
         target="_blank"
         rel="noopener noreferrer"
         title="link to the source code"
@@ -131,7 +131,7 @@
           </span>
         </p>
         <a
-          href="https://gitea.hugulumu.com/42/42_INT_10_cube3d"
+          href="https://gitea.hugulumu.com/42/42_INT_10_cube3d/"
           target="_blank"
           rel="noopener noreferrer"
           title="link to the source code"
@@ -141,7 +141,7 @@
 
     <figure class="project">
       <a
-        href="https://gitea.hugulumu.com/pro/2023_WEBSITE_jipf"
+        href="https://gitea.hugulumu.com/pro/2023_WEBSITE_jipf/"
         target="_blank"
         rel="noopener noreferrer"
         title="link to the source code"
@@ -162,7 +162,7 @@
           </span>
         </p>
         <a
-          href="https://gitea.hugulumu.com/pro/2023_WEBSITE_jipf"
+          href="https://gitea.hugulumu.com/pro/2023_WEBSITE_jipf/"
           target="_blank"
           rel="noopener noreferrer"
           title="link to the source code"
@@ -172,7 +172,7 @@
 
     <figure class="project">
       <a
-        href="https://gitea.hugulumu.com/pro/2022_WEBSITE_kosmopolit"
+        href="https://gitea.hugulumu.com/pro/2022_WEBSITE_kosmopolit/"
         target="_blank"
         rel="noopener noreferrer"
         title="link to the source code"
@@ -191,7 +191,7 @@
           </span>
         </p>
         <a
-          href="https://gitea.hugulumu.com/pro/2022_WEBSITE_kosmopolit"
+          href="https://gitea.hugulumu.com/pro/2022_WEBSITE_kosmopolit/"
           target="_blank"
           rel="noopener noreferrer"
           title="link to the source code"
@@ -200,7 +200,19 @@
     </figure>
   </div>
 
-  <div class="mouse"><div class="frames mouse_2 pre"></div></div>
+  <div class="mouse_container">
+    <div class="mouse">
+      <div class="frames mouse_2 pre"></div>
+    </div>
+    <div class="skouik">
+      <button class="button button1"></button>
+      <span class="sound sound_3 sound_left">SKOUIK!</span>
+
+      <button class="button button2"></button>
+      <span class="sound sound_3 sound_right">SKOUIK!</span>
+    </div>
+  </div>
+
   <div
     class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width"
     aria-label="banner delimitation in ASCII art"

src/styles/mouses.css

@@ -1,26 +1,111 @@
-.mouse {
+.mouse_container {
   margin: auto;
   width: fit-content;
-  overflow: hidden;
+  position: relative;
 
-  .frames {
+  .mouse {
+    margin: auto;
+    width: fit-content;
+    overflow: hidden;
     position: relative;
-    animation: mouse_move infinite 2s normal steps(4);
 
-    &::before {
+    .frames {
       position: relative;
-      top: 0px;
+      animation: mouse_move infinite 2s normal steps(4);
-      left: 0px;
+
+      &::before {
+        position: relative;
+        top: 0px;
+        left: 0px;
+      }
+
+      &::after {
+        position: absolute;
+        top: 100%;
+        left: 0px;
+      }
+    }
+  }
+
+  .skouik {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    /* Style the word to be hidden by default */
+    .sound {
+      position: absolute;
+      top: -30px;
+      opacity: 0;
+
+      &.sound_1 {
+        left: 170px;
+      }
+      &.sound_2 {
+        left: 80px;
+      }
+      &.sound_3 {
+        top: 30px;
+        left: 20px;
+      }
+      &.sound_4 {
+        top: -40px;
+        left: 80px;
+      }
     }
 
-    &::after {
+    .button {
       position: absolute;
-      top: 100%;
+      top: 1px;
-      left: 0px;
+      left: 1px;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+
+      &:focus {
+        z-index: -1;
+      }
+
+      /* Show the word when the button is focused */
+      &.button:focus + .sound {
+        animation-duration: 3s;
+        animation-timing-function: forwards;
+      }
+      &:focus + .sound_left {
+        animation-name: sound_animation_left;
+      }
+      &:focus + .sound_right {
+        animation-name: sound_animation_right;
+      }
     }
   }
 }
 
+@keyframes sound_animation_left {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    top: -300px;
+    left: 0px;
+    transform: rotate(-120deg);
+    opacity: 0;
+  }
+}
+@keyframes sound_animation_right {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    top: -400px;
+    left: 250px;
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
 /*
 * using 'transform' instead of 'top', because 'top' needs
 * the parent to have an explicit height