Files

T

Jonathan 6b698c5f58 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:34:41 +01:00

1.5 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

@AGENTS.md

Commands

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