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>
2026-03-26 22:02:30 +01:00
parent 4fa9f280e6
commit 6b698c5f58
18 changed files with 628 additions and 82 deletions
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}