perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mouses sound

Browse Source
This commit is contained in:
Hugo LAMY
2026-03-18 17:14:50 +01:00
parent 24681e0ba1
commit 9450895df5
5 changed files with 156 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/modules/cv.html
View File

@@ -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"

14
src/modules/hero.html
View File

@@ -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"

17
src/modules/infos.html
View File

@@ -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>

30
src/modules/projects.html
View File

@@ -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"

85
src/styles/mouses.css
View File

@@ -1,7 +1,13 @@
.mouse_container {
margin: auto;
width: fit-content;
position: relative;
.mouse {
margin: auto;
width: fit-content;
overflow: hidden;
position: relative;
.frames {
position: relative;
@@ -21,6 +27,85 @@
}
}
.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;
}
}
.button {
position: absolute;
top: 1px;
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