🥚 Updating small easteregg

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2024-10-18 22:28:45 +02:00
parent bd509dab8b
commit 41e6548813
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 24 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/rickroll.mp3 Normal file

Binary file not shown.

View file

@ -4,7 +4,11 @@ import HeaderLink from '../components/HeaderLink.astro';
---
<SectionContainer>
<main class="flex flex-col flex-1 md:flex-row gap-6 md:mt-4">
<div class="profile md:order-last"></div>
<div class="profile md:order-last">
<audio id="rickroll" preload="auto">
<source src="/rickroll.mp3">
</audio>
</div>
<div class="flex flex-col text-left gap-4 w-full md:w-2/3">
<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
@ -28,6 +32,24 @@ import HeaderLink from '../components/HeaderLink.astro';
</main>
</SectionContainer>
<script>
document.addEventListener("DOMContentLoaded", function() {
const rickroll = document.getElementById("rickroll");
const profile = document.querySelector(".profile");
// Play audio when mouse enters
profile.addEventListener("mouseenter", function() {
rickroll.play();
});
// Pause and reset audio when mouse leaves
profile.addEventListener("mouseleave", function() {
rickroll.pause();
rickroll.currentTime = 0;
});
});
</script>
<style>
.profile {
width: 14rem;
@ -40,6 +62,6 @@ import HeaderLink from '../components/HeaderLink.astro';
}
.profile:hover {
background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
background-image: url("/rick-roll-rick-ashley.gif");
}
</style>