Wiggly logo in hero

packages/website/src/lib/Hero.svelte

@@ -1,17 +1,44 @@
 <script lang="ts">
     import url from "./logo.svg?url";
     import { SITE_URL } from "$lib/metadata";
+    let logo: HTMLDivElement;
+    let wiggleCount = 0;
+    function wiggle() {
+        wiggleCount++;
+        logo.style.animationPlayState = "running";
+    }
+    function wiggleIteration() {
+        wiggleCount--;
+        if (wiggleCount === 0) {
+            logo.style.animationPlayState = "paused";
+        }
+    }
 </script>
 
 <div class="hero card edge h-card">
-    <div class="logo">
+    <div
-        <a href={SITE_URL} class="u-url u-uid" rel="me"><img class="u-photo" src={url} alt="Logo" /></a>
+        class="logo"
+        on:click={wiggle}
+        on:animationiteration={wiggleIteration}
+        bind:this={logo}
+    >
+        <a href={SITE_URL} class="u-url u-uid" rel="me"
+            ><img class="u-photo" src={url} alt="Logo" /></a
+        >
     </div>
     <div class="content">
         <div>
-        <h1 class="title p-name"><span class="p-given-name">Jade</span> <span class="p-family-name">Ellis</span></h1>
+            <h1 class="title p-name">
-        <div role="doc-subtitle"><span class="p-nickname">JadedBlueEyes</span></div></div>
+                <span class="p-given-name">Jade</span>
-        <div class="description p-note">Student, Computer Scientist and Creative</div>
+                <span class="p-family-name">Ellis</span>
+            </h1>
+            <div role="doc-subtitle">
+                <span class="p-nickname">JadedBlueEyes</span>
+            </div>
+        </div>
+        <div class="description p-note">
+            Student, Computer Scientist and Creative
+        </div>
     </div>
 </div>
 
@@ -24,7 +51,7 @@
         gap: var(--spacing);
         margin: 48px auto;
         max-width: 320px;
-        padding: 3rem .5rem;
+        padding: 3rem 0.5rem;
     }
 
     .logo {
@@ -67,4 +94,28 @@
             text-align: left;
         }
     }
+
+    @keyframes wiggle {
+        0% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(5deg);
+        }
+        75% {
+            transform: rotate(-5deg);
+        }
+        100% {
+            transform: rotate(0deg);
+        }
+    }
+
+    .logo {
+        animation-name: wiggle;
+        animation-duration: 0.2s;
+        /* animation-iteration-count: 1; */
+
+        animation-iteration-count: infinite;
+        animation-play-state: paused;
+    }
 </style>