home: add Writing section; fix scroll-progress snap + nav underline reverse

- Scroll-progress bar: drive scaleX from scroll progress via callback form;
  the animation form snapped the bar to 0 at the bottom (progress=1 boundary)
- Nav active-underline: recompute active section from scroll position each
  frame so it tracks upward scroll too (inView-enter died on the way back up)
- Add a Writing section to the homepage with recent posts + a blog CTA

src/pages/index.astro

@@ -5,13 +5,16 @@ import Section from "../components/Section.astro";
 import About from "../components/About.astro";
 import SkillGroup from "../components/SkillGroup.astro";
 import ProjectCard from "../components/ProjectCard.astro";
+import PostList from "../components/PostList.astro";
 import Contact from "../components/Contact.astro";
 import { skills } from "../data/skills";
+import { getPosts } from "../lib/blog";
 import { getCollection } from "astro:content";
 
 const featuredProjects = (await getCollection("projects", (p) => p.data.featured)).sort(
   (a, b) => a.data.order - b.data.order,
 );
+const recentPosts = (await getPosts()).slice(0, 3);
 ---
 
 <Layout path="/">
@@ -36,7 +39,18 @@ const featuredProjects = (await getCollection("projects", (p) => p.data.featured
     </p>
   </Section>
 
-  <Section id="contact" eyebrow="Get in touch" index="04" title="Let's talk infrastructure.">
+  <Section id="writing" eyebrow="Writing" index="04" title="Notes from the build.">
+    <p class="writing__intro" data-reveal>
+      Lessons from edge Kubernetes, GPUs, and running infrastructure like it matters —
+      written up as I go.
+    </p>
+    <PostList posts={recentPosts} />
+    <p class="projects__more" data-reveal>
+      <a class="btn" href="/blog/">Read the blog →</a>
+    </p>
+  </Section>
+
+  <Section id="contact" eyebrow="Get in touch" index="05" title="Let's talk infrastructure.">
     <Contact />
   </Section>
 </Layout>
@@ -56,4 +70,9 @@ const featuredProjects = (await getCollection("projects", (p) => p.data.featured
     margin-top: var(--space-6);
     text-align: center;
   }
+  .writing__intro {
+    max-width: 52ch;
+    margin-bottom: var(--space-5);
+    color: var(--text-dim);
+  }
 </style>