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>

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";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @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);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
 }

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",
-  description: "Generated by create next app",
+  title: "jonathan.dev",
+  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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          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>
-  );
+    <>
+      <Hero />
+      <FeaturedProjects />
+      <Skills />
+      <CurrentWork />
+      <CallToAction />
+    </>
+  )
 }

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