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/FeaturedProjects.tsx

@@ -0,0 +1,19 @@
+import ProjectCard from '@/components/ProjectCard'
+import projects from '@/content/projects.json'
+
+const featured = projects.filter((p) => p.featured)
+
+export default function FeaturedProjects() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 py-16">
+      <h2 className="mb-8 text-2xl font-semibold text-zinc-900 dark:text-white">Featured Projects</h2>
+      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {featured.map((project) => (
+          <li key={project.title}>
+            <ProjectCard {...project} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}