nav: animate Projects/Blog underlines + coherent directional slide

- Projects/Blog had no data-nav-id so the scroll-spy skipped them entirely;
  point them at the homepage #projects/#writing sections so all five animate
- Drive the underline declaratively (re-assert all on each change) so none can
  be left stranded mid-spring
- Slide follows scroll direction: activating underline grows from its trailing
  edge while the rest collapse toward the leading edge (down→right, up→left)

src/components/Nav.astro

@@ -2,11 +2,15 @@
 import ThemeToggle from "./ThemeToggle.astro";
 import { site } from "../data/site";
 
+// `id` ties a nav link to a homepage section so the Motion layer animates its
+// underline as that section scrolls through (scroll-spy). Projects/Blog navigate
+// to their own pages on click, but on the homepage they track the #projects and
+// #writing sections so every nav item gets the underline — in both directions.
 const links = [
   { label: "About", href: "/#about", id: "about" },
   { label: "Skills", href: "/#skills", id: "skills" },
-  { label: "Projects", href: "/projects/", id: null },
-  { label: "Blog", href: "/blog/", id: null },
+  { label: "Projects", href: "/projects/", id: "projects" },
+  { label: "Blog", href: "/blog/", id: "writing" },
   { label: "Contact", href: "/#contact", id: "contact" },
 ];
 ---