Design language

src/routes/+layout.svelte

@@ -10,6 +10,12 @@
   import '@fontsource/readex-pro/latin-500.css';
   import '@fontsource/readex-pro/latin-600.css';
   import '@fontsource/readex-pro/latin-700.css';
+  import '@fontsource/roboto/latin-400.css';
+  import '@fontsource/roboto/latin-500.css';
+  import '@fontsource/roboto/latin-700.css';
+  import '@fontsource/noto-sans/latin-400.css';
+  import '@fontsource/noto-sans/latin-500.css';
+  import '@fontsource/noto-sans/latin-700.css';
   import '@fontsource/unbounded/latin-400.css';
   import '@fontsource/unbounded/latin-600.css';
   import '@fontsource/unbounded/latin-700.css';
@@ -57,9 +63,30 @@
     targets.forEach(el => revealObserver!.observe(el));
   }
 
+  function bounceSection(hash: string) {
+    const id = hash.startsWith('#') ? hash.slice(1) : hash;
+    if (!id) return;
+    // Wait for smooth scroll to finish before playing the bounce
+    setTimeout(() => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      el.classList.remove('anchor-bounce');
+      void el.offsetWidth; // force reflow so re-adding the class re-triggers
+      el.classList.add('anchor-bounce');
+      el.addEventListener('animationend', () => el.classList.remove('anchor-bounce'), { once: true });
+    }, 520);
+  }
+
   onMount(() => {
     initClickTracking();
     requestAnimationFrame(initReveal);
+
+    // Same-page hash clicks aren't caught by afterNavigate
+    function onHashChange() {
+      bounceSection(window.location.hash);
+    }
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
   });
 
   function shouldShowSkeleton() {
@@ -83,7 +110,14 @@
   $: showRouteSkeleton = shouldShowSkeleton();
 
   afterNavigate(({ from, to }) => {
-    if (!from || !to || to.url.hash) {
+    if (!from || !to) return;
+
+    if (to.url.hash && from.url.pathname !== to.url.pathname) {
+      bounceSection(to.url.hash);
+      return;
+    }
+
+    if (to.url.hash) {
       return;
     }