fix: clean page transitions and navigation a11y

components/blog/TableOfContents.tsx

@@ -58,7 +58,7 @@ export function TableOfContents() {
   if (headings.length === 0) return null;
 
   return (
-    <nav className="lg:sticky lg:top-[var(--header-height)]">
+    <nav aria-label="Table of contents" className="lg:sticky lg:top-[var(--header-height)]">
       <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
         On this page
       </h4>

components/layout/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { m } from "motion/react";
 import { ThemeToggle } from "@/components/ui/ThemeToggle";
 
@@ -10,8 +11,11 @@ const navLinks = [
 ];
 
 export function Header() {
+  const pathname = usePathname();
+
   return (
     <m.nav
+      aria-label="Primary navigation"
       initial={{ opacity: 0, y: -12 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.4, ease: "easeOut" }}
@@ -22,15 +26,25 @@ export function Header() {
           blog
         </Link>
         <div className="flex items-center gap-8">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className="font-medium text-sm text-ink-soft hover:text-ink transition-colors"
-            >
-              {link.label}
-            </Link>
-          ))}
+          {navLinks.map((link) => {
+            const isActive =
+              link.href === "/"
+                ? pathname === "/"
+                : pathname === link.href.slice(0, -1) || pathname.startsWith(link.href);
+
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                aria-current={isActive ? "page" : undefined}
+                className={`font-medium text-sm transition-colors ${
+                  isActive ? "text-ink" : "text-ink-soft hover:text-ink"
+                }`}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
           <ThemeToggle />
         </div>
       </div>