Build portfolio site with Next.js, Tailwind CSS, and dark mode

- Add CLAUDE.md with project conventions and architecture notes
- Create Navbar (sticky, backdrop blur, mobile menu) and Footer
- Build homepage sections: Hero, FeaturedProjects, Skills, CurrentWork, CallToAction
- Add /projects, /about, and /contact pages
- Create reusable ProjectCard and Badge components
- Centralise project data in content/projects.json with featured flag
- Add class-based dark mode toggle (default dark, persisted to localStorage)
- Refactor globals.css: remove conflicting prefers-color-scheme media query
- Fix two-instance ThemeToggle sync bug in Navbar
- Fix key={index} anti-pattern in timeline, stale closure in setOpen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/Hero.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+
+export default function Hero() {
+  return (
+    <section className="mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+
+      {/* Eyebrow label */}
+      <div className="mb-10 flex items-center gap-4">
+        <span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
+        <span className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">
+          Software Engineer
+        </span>
+        <span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
+      </div>
+
+      {/* Name */}
+      <h1 className="text-7xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-8xl">
+        Jonathan
+      </h1>
+
+      {/* Tagline */}
+      <p className="mt-6 max-w-md text-base leading-7 text-zinc-600 dark:text-zinc-400">
+        I build clean, fast web applications — focused on great user
+        experiences and solid engineering.
+      </p>
+
+      {/* Actions */}
+      <div className="mt-12 flex flex-wrap items-center justify-center gap-4">
+        <Link
+          href="/projects"
+          className="rounded-sm bg-zinc-900 px-8 py-3 text-sm font-semibold text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
+        >
+          View Projects
+        </Link>
+        <Link
+          href="/contact"
+          className="rounded-sm border border-zinc-300 px-8 py-3 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-900 dark:hover:text-white"
+        >
+          Contact Me
+        </Link>
+      </div>
+
+    </section>
+  )
+}