squuuuuiiiish (and another fufnny thing)

src/pages/about.astro

@@ -12,7 +12,7 @@ import fursonaImage from "../images/fursona.png";
     <Card title="about me">
         <aside class="fursona">
             <figure>
-                <Image src={fursonaImage} alt="my fursona, Riko, a deer-dog hybrid. she has light orange fur with white speckles and accents throughout. a deeper orange color is used on the dog ears and ends of the limbs, and he has small horns. she wears a purple-blue scarf containing a moon symbol, and similarly styled arm/leg warmers on the right arm and left leg one (featuring stars) respectively." loading="eager"/>
+                <Image id="fursona" src={fursonaImage} alt="my fursona, Riko, a deer-dog hybrid. she has light orange fur with white speckles and accents throughout. a deeper orange color is used on the dog ears and ends of the limbs, and he has small horns. she wears a purple-blue scarf containing a moon symbol, and similarly styled arm/leg warmers on the right arm and left leg one (featuring stars) respectively." loading="eager" />
                 <figcaption><p>my fursona, drawn by <a href="https://www.tumblr.com/karticatyt" target="_blank">KarticatYT</a></p></figcaption>
             </figure>
         </aside>
@@ -26,10 +26,18 @@ import fursonaImage from "../images/fursona.png";
         max-width: 30%;
     }
     .fursona img {
+        scale: 1;
+        transition: scale 0.05s ease-in-out;
         animation:
             popin 2s cubic-bezier(0.22, 1, 0.33, 1),
             sway 2s ease-in-out infinite alternate 2s;
     }
+    .fursona img:hover {
+        cursor: pointer;
+    }
+    .fursona img:active {
+        scale: 0.9;
+    }
 
     @keyframes popin {
         from {
@@ -55,3 +63,13 @@ import fursonaImage from "../images/fursona.png";
         }
     }
 </style>
+<script>
+    document.querySelectorAll("#fursona").forEach((v) => {
+        v.addEventListener("click", () => {
+            const audio = new Audio("/sounds/squeak.mp3");
+
+            audio.volume = 0.5;
+            audio.play();
+        });
+    });
+</script>

src/pages/index.astro

@@ -7,7 +7,7 @@ import Badges from "../components/Badges.astro";
 
 <Layout title="landing">
     <Card title="hello">
-        <p>hi! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p>
+        <p>hi! i'm <strong>reid</strong> <i>(any pronouns <small>(<a href="https://regex101.com/r/Kpyej0/1" target="_blank">regex</a>)</small>)</i>, welcome to my site</p>
         <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress</p>
         <p>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p>
     </Card>