🥚 Updating small easteregg

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>

src/pages/index.astro

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