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

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+
+type ProjectCardProps = {
+  title: string
+  description: string
+  stack: string[]
+  href?: string
+}
+
+export default function ProjectCard({ title, description, stack, href }: ProjectCardProps) {
+  return (
+    <div className="group flex h-full flex-col rounded-lg border border-zinc-200 bg-zinc-50 p-6 shadow-sm shadow-black/5 transition-all hover:border-zinc-300 hover:shadow-md hover:shadow-black/10 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-black/40 dark:hover:border-zinc-600 dark:hover:shadow-black/50">
+      <h3 className="font-medium text-zinc-900 dark:text-white">{title}</h3>
+      <p className="mt-2 flex-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{description}</p>
+
+      <ul className="mt-5 flex flex-wrap gap-2">
+        {stack.map((tech) => (
+          <li
+            key={tech}
+            className="rounded-sm bg-zinc-200 px-2.5 py-1 font-mono text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
+          >
+            {tech}
+          </li>
+        ))}
+      </ul>
+
+      {href && (
+        <Link
+          href={href}
+          className="mt-6 inline-flex items-center gap-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:hover:text-white"
+        >
+          View project
+          <span className="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+        </Link>
+      )}
+    </div>
+  )
+}