🥚 Updating small easteregg
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
parent
bd509dab8b
commit
41e6548813
3 changed files with 24 additions and 2 deletions
BIN
public/rick-roll-rick-ashley.gif
Normal file
BIN
public/rick-roll-rick-ashley.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 MiB |
BIN
public/rickroll.mp3
Normal file
BIN
public/rickroll.mp3
Normal file
Binary file not shown.
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue