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>

CLAUDE.md

@@ -1 +1,37 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
 @AGENTS.md
+
+## Commands
+
+```bash
+npm run dev      # Start development server
+npm run build    # Production build
+npm run start    # Start production server
+npm run lint     # Run ESLint
+```
+
+No test runner is configured.
+
+## Stack
+
+- **Next.js 16** with App Router — read `node_modules/next/dist/docs/` before writing any Next.js code; APIs may differ from training data
+- **Tailwind CSS v4** — configured via PostCSS (`postcss.config.mjs`); no `tailwind.config.*` file; theme tokens defined in `app/globals.css` using `@theme inline`
+- **TypeScript** — strict mode, path alias `@/*` maps to project root
+
+## Architecture
+
+This is a portfolio site built with the Next.js App Router. All routes live under `app/`. Global styles and theme variables are in `app/globals.css`. Fonts (Geist Sans/Mono) are loaded in `app/layout.tsx` and injected as CSS variables.
+
+Reusable UI components should go in `components/`. There is no `components/` directory yet — create it when adding the first component.
+
+## Project Rules
+
+- Functional components only — no class components
+- All styling via Tailwind utility classes — no CSS modules or inline styles
+- Dark mode by default; use Tailwind dark-mode utilities and the CSS vars (`--background`, `--foreground`) defined in `globals.css`
+- Keep components small and single-purpose
+- Prefer readability over cleverness
+- Do not add features unless explicitly asked

app/about/page.tsx

@@ -0,0 +1,116 @@
+import Badge from '@/components/Badge'
+
+const skills = [
+  {
+    category: 'Languages',
+    items: ['TypeScript', 'JavaScript', 'Go', 'Python', 'SQL', 'Bash'],
+  },
+  {
+    category: 'Frontend',
+    items: ['React', 'Next.js', 'Tailwind CSS', 'Radix UI', 'Framer Motion'],
+  },
+  {
+    category: 'Backend',
+    items: ['Node.js', 'PostgreSQL', 'Redis', 'REST', 'GraphQL', 'tRPC'],
+  },
+  {
+    category: 'Tooling',
+    items: ['Docker', 'Git', 'GitHub Actions', 'Vercel', 'Linux'],
+  },
+  {
+    category: 'Focus Areas',
+    items: ['Web Performance', 'Developer Experience', 'API Design', 'UI Engineering', 'Accessibility'],
+  },
+]
+
+const timeline = [
+  {
+    year: '2024',
+    title: 'Senior Engineer — Acme Corp',
+    description:
+      'Leading frontend infrastructure and design systems. Building core platform features used by millions of users.',
+  },
+  {
+    year: '2022',
+    title: 'Software Engineer — Startup XYZ',
+    description:
+      'Full-stack product work across a SaaS platform. Owned the billing system, onboarding flow, and internal tooling.',
+  },
+  {
+    year: '2021',
+    title: 'Open Source — Deploy CLI',
+    description:
+      'Built and published an open-source CLI tool in Go for automating local dev environment setup.',
+  },
+  {
+    year: '2020',
+    title: 'Software Engineer — Agency Co.',
+    description:
+      'Client work spanning e-commerce, marketing sites, and web apps. Introduced TypeScript and component-driven development.',
+  },
+  {
+    year: '2019',
+    title: 'BSc Computer Science',
+    description: 'Graduated with a focus on distributed systems and human-computer interaction.',
+  },
+]
+
+export default function AboutPage() {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-16">
+
+      {/* Intro */}
+      <section className="mb-16">
+        <h1 className="mb-6 text-3xl font-semibold text-zinc-900 dark:text-white">About</h1>
+        <p className="text-base leading-7 text-zinc-600 dark:text-zinc-400">
+          I&apos;m a software engineer with a focus on the web — building products
+          that are fast, accessible, and well-crafted. I care about the details:
+          clean APIs, readable code, and interfaces that feel good to use. Outside
+          of work I contribute to open source, write about things I&apos;m learning,
+          and tinker with side projects.
+        </p>
+      </section>
+
+      {/* Skills */}
+      <section className="mb-16">
+        <h2 className="mb-8 text-xl font-semibold text-zinc-900 dark:text-white">Skills</h2>
+        <dl className="flex flex-col gap-6">
+          {skills.map(({ category, items }) => (
+            <div key={category} className="flex flex-col gap-3 sm:flex-row sm:gap-8">
+              <dt className="w-32 shrink-0 pt-0.5 text-sm text-zinc-500">{category}</dt>
+              <dd>
+                <ul className="flex flex-wrap gap-2">
+                  {items.map((item) => (
+                    <li key={item}>
+                      <Badge label={item} />
+                    </li>
+                  ))}
+                </ul>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+
+      {/* Timeline */}
+      <section>
+        <h2 className="mb-8 text-xl font-semibold text-zinc-900 dark:text-white">Timeline</h2>
+        <ol className="flex flex-col">
+          {timeline.map(({ year, title, description }) => (
+            <li key={year} className="flex gap-8 pb-10 last:pb-0">
+              <div className="flex flex-col items-center">
+                <span className="font-mono text-xs text-zinc-500">{year}</span>
+                <div className="mt-2 w-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
+              </div>
+              <div className="pb-2 pt-0.5">
+                <p className="text-sm font-medium text-zinc-900 dark:text-white">{title}</p>
+                <p className="mt-1.5 text-sm leading-6 text-zinc-600 dark:text-zinc-400">{description}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+    </div>
+  )
+}

app/contact/page.tsx

@@ -0,0 +1,37 @@
+const links = [
+  {
+    label: 'Email',
+    value: 'jonathan@example.com',
+    href: 'mailto:jonathan@example.com',
+  },
+  {
+    label: 'GitHub',
+    value: 'github.com/jonathan',
+    href: 'https://github.com/jonathan',
+  },
+]
+
+export default function ContactPage() {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-16">
+      <h1 className="mb-3 text-3xl font-semibold text-zinc-900 dark:text-white">Contact</h1>
+      <p className="mb-12 text-sm text-zinc-600 dark:text-zinc-400">
+        The best way to reach me is by email. I&apos;m also on GitHub.
+      </p>
+      <ul className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
+        {links.map(({ label, value, href }) => (
+          <li key={label} className="flex flex-col gap-1 py-5 sm:flex-row sm:items-center sm:gap-8">
+            <span className="w-24 shrink-0 text-sm text-zinc-500">{label}</span>
+            <a
+              href={href}
+              className="text-sm text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
+              {...(href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
+              {value}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

app/globals.css

@@ -1,26 +1,11 @@
 @import "tailwindcss";
-
+@custom-variant dark (&:is(.dark *));
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
-  background: var(--background);
+  font-family: var(--font-sans);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,10 +15,23 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "jonathan.dev",
-  description: "Generated by create next app",
+  description: "Personal portfolio",
 };
 
+// Runs before first paint — restores saved theme, defaults to dark
+const themeScript = `
+  (function() {
+    try {
+      if (localStorage.getItem('theme') === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    } catch {}
+})();
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -25,9 +40,17 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
+      suppressHydrationWarning
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body className="flex min-h-full flex-col bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
+        <Navbar />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,65 +1,17 @@
-import Image from "next/image";
+import Hero from '@/components/Hero'
+import FeaturedProjects from '@/components/FeaturedProjects'
+import Skills from '@/components/Skills'
+import CurrentWork from '@/components/CurrentWork'
+import CallToAction from '@/components/CallToAction'
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <>
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <Hero />
-        <Image
+      <FeaturedProjects />
-          className="dark:invert"
+      <Skills />
-          src="/next.svg"
+      <CurrentWork />
-          alt="Next.js logo"
+      <CallToAction />
-          width={100}
+    </>
-          height={20}
+  )
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
 }

app/projects/page.tsx

@@ -0,0 +1,20 @@
+import ProjectCard from '@/components/ProjectCard'
+import projects from '@/content/projects.json'
+
+export default function ProjectsPage() {
+  return (
+    <div className="mx-auto max-w-5xl px-6 py-16">
+      <h1 className="mb-2 text-3xl font-semibold text-zinc-900 dark:text-white">Projects</h1>
+      <p className="mb-10 text-sm text-zinc-600 dark:text-zinc-400">
+        A selection of things I&apos;ve built.
+      </p>
+      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {projects.map((project) => (
+          <li key={project.title}>
+            <ProjectCard {...project} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

components/Badge.tsx

@@ -0,0 +1,11 @@
+type BadgeProps = {
+  label: string
+}
+
+export default function Badge({ label }: BadgeProps) {
+  return (
+    <span className="rounded-sm border border-zinc-200 bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/50 dark:text-zinc-300">
+      {label}
+    </span>
+  )
+}

components/CallToAction.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+export default function CallToAction() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 py-24 text-center">
+      <p className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">
+        Get in touch
+      </p>
+      <h2 className="mt-4 text-3xl font-semibold text-zinc-900 dark:text-white">
+        Let&apos;s work together.
+      </h2>
+      <p className="mx-auto mt-4 max-w-sm text-sm leading-6 text-zinc-600 dark:text-zinc-400">
+        Open to freelance projects, full-time roles, and interesting
+        collaborations. I&apos;d love to hear what you&apos;re building.
+      </p>
+      <Link
+        href="/contact"
+        className="mt-8 inline-block 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"
+      >
+        Say Hello
+      </Link>
+    </section>
+  )
+}

components/CurrentWork.tsx

@@ -0,0 +1,34 @@
+const items = [
+  {
+    title: 'Portfolio site',
+    description: 'Designing and building this site with Next.js and Tailwind CSS.',
+  },
+  {
+    title: 'Open-source CLI tool',
+    description: 'A developer utility written in Go for automating local environments.',
+  },
+  {
+    title: 'Design system',
+    description: 'A component library for internal use — exploring composability patterns.',
+  },
+  {
+    title: 'Learning Rust',
+    description: 'Working through systems programming concepts and small weekend projects.',
+  },
+]
+
+export default function CurrentWork() {
+  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">What I&apos;m Working On</h2>
+      <ul className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
+        {items.map(({ title, description }) => (
+          <li key={title} className="flex flex-col gap-1 py-5 transition-colors hover:text-zinc-900 dark:hover:text-white sm:flex-row sm:gap-8">
+            <span className="w-48 shrink-0 text-sm font-medium text-zinc-900 dark:text-white">{title}</span>
+            <span className="text-sm text-zinc-600 dark:text-zinc-400">{description}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

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>
+  )
+}

components/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="mx-auto max-w-5xl px-6 py-8 text-center text-sm text-zinc-500">
+        &copy; {new Date().getFullYear()} jonathan.dev
+      </div>
+    </footer>
+  )
+}

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>
+  )
+}

components/Navbar.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import ThemeToggle from '@/components/ThemeToggle'
+
+const links = [
+  { href: '/', label: 'Home' },
+  { href: '/projects', label: 'Projects' },
+  { href: '/about', label: 'About' },
+  { href: '/contact', label: 'Contact' },
+]
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-zinc-200 bg-white/90 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/90">
+      <nav className="mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
+        <Link href="/" className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-white">
+          jonathan.dev
+        </Link>
+
+        <div className="flex items-center gap-3">
+          {/* Desktop links */}
+          <ul className="mr-5 hidden gap-8 sm:flex">
+            {links.map(({ href, label }) => (
+              <li key={href}>
+                <Link
+                  href={href}
+                  className="text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+                >
+                  {label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          {/* Single toggle instance — visible on both breakpoints */}
+          <ThemeToggle />
+
+          {/* Mobile hamburger */}
+          <button
+            className="flex flex-col gap-1.5 sm:hidden"
+            onClick={() => setOpen((o) => !o)}
+            aria-label="Toggle menu"
+          >
+            <span className={`block h-px w-6 bg-zinc-500 transition-transform dark:bg-zinc-400 ${open ? 'translate-y-2 rotate-45' : ''}`} />
+            <span className={`block h-px w-6 bg-zinc-500 transition-opacity dark:bg-zinc-400 ${open ? 'opacity-0' : ''}`} />
+            <span className={`block h-px w-6 bg-zinc-500 transition-transform dark:bg-zinc-400 ${open ? '-translate-y-2 -rotate-45' : ''}`} />
+          </button>
+        </div>
+      </nav>
+
+      {/* Mobile menu */}
+      {open && (
+        <ul className="flex flex-col border-t border-zinc-200 px-6 py-4 dark:border-zinc-800 sm:hidden">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <Link
+                href={href}
+                className="block py-2 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+                onClick={() => setOpen(false)}
+              >
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </header>
+  )
+}

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>
+  )
+}

components/Skills.tsx

@@ -0,0 +1,40 @@
+import Badge from '@/components/Badge'
+
+const skills = [
+  {
+    category: 'Programming',
+    items: ['TypeScript', 'JavaScript', 'Go', 'Python', 'SQL'],
+  },
+  {
+    category: 'Tools',
+    items: ['React', 'Next.js', 'Tailwind CSS', 'Node.js', 'PostgreSQL', 'Docker', 'Git'],
+  },
+  {
+    category: 'Focus Areas',
+    items: ['Web Performance', 'Developer Experience', 'API Design', 'UI Engineering'],
+  },
+]
+
+export default function Skills() {
+  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">Skills</h2>
+      <dl className="flex flex-col gap-6">
+        {skills.map(({ category, items }) => (
+          <div key={category} className="flex flex-col gap-3 sm:flex-row sm:gap-8">
+            <dt className="w-36 shrink-0 pt-0.5 text-sm text-zinc-500">{category}</dt>
+            <dd>
+              <ul className="flex flex-wrap gap-2">
+                {items.map((item) => (
+                  <li key={item}>
+                    <Badge label={item} />
+                  </li>
+                ))}
+              </ul>
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  )
+}

components/ThemeToggle.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+
+function isDark() {
+  if (typeof window === 'undefined') return true
+  return document.documentElement.classList.contains('dark')
+}
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState(isDark)
+
+  function toggle() {
+    const next = !dark
+    setDark(next)
+    document.documentElement.classList.toggle('dark', next)
+    try {
+      localStorage.setItem('theme', next ? 'dark' : 'light')
+    } catch {
+      // ignore
+    }
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label="Toggle theme"
+      className="flex h-8 w-8 items-center justify-center rounded-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+    >
+      {dark ? (
+        // Sun — switch to light
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+        </svg>
+      ) : (
+        // Moon — switch to dark
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      )}
+    </button>
+  )
+}

content/projects.json

@@ -0,0 +1,40 @@
+[
+  {
+    "title": "Portfolio Site",
+    "description": "This site — a personal portfolio built with Next.js and Tailwind CSS. Focused on clean design and fast load times.",
+    "stack": ["Next.js", "TypeScript", "Tailwind CSS"],
+    "href": "#",
+    "featured": true
+  },
+  {
+    "title": "Deploy CLI",
+    "description": "An open-source command-line tool written in Go for automating local environment setup and deployments.",
+    "stack": ["Go", "Docker", "CI/CD"],
+    "href": "#",
+    "featured": true
+  },
+  {
+    "title": "Metrics Dashboard",
+    "description": "A real-time dashboard for monitoring system health and performance metrics across distributed services.",
+    "stack": ["React", "Node.js", "WebSockets", "Redis"],
+    "href": "#",
+    "featured": true
+  },
+  {
+    "title": "Auth Service",
+    "description": "A standalone authentication service supporting OAuth2, magic links, and session management.",
+    "stack": ["TypeScript", "PostgreSQL", "REST"]
+  },
+  {
+    "title": "Component Library",
+    "description": "An internal design system and component library exploring composability and accessibility patterns.",
+    "stack": ["React", "TypeScript", "Storybook"],
+    "href": "#"
+  },
+  {
+    "title": "RSS Reader",
+    "description": "A minimal feed reader with a clean reading mode, keyboard navigation, and offline support via service workers.",
+    "stack": ["Next.js", "SQLite", "PWA"],
+    "href": "#"
+  }
+]