Personal Portfolio Site
A portfolio that doubles as proof of work: it has to look designed, load fast, rank well and demonstrate production-grade frontend architecture rather than just describe it.
Outcomes
- Server-Component-first App Router architecture with client boundaries pushed deep and narrow
- Tokenized Tailwind v4 design system with full light and dark theming from a single source of truth
- Complete SEO layer: per-route generateMetadata, dynamic Open Graph images, JSON-LD structured data, and sitemap
- Accessible, spam-protected contact form (Zod + React Hook Form + Resend + Cloudflare Turnstile)
- Built to localize: all copy externalized via next-intl (single en locale today)
Overview
This site itself: a from-scratch personal portfolio on the Next.js App Router with a Server-Component-first architecture. Ships a tokenized Tailwind v4 design system with full light and dark theming, an SEO layer (per-route metadata, Open Graph images, JSON-LD, sitemap) and a spam-protected contact form. Designed, built and deployed solo.
Approach & key decisions
The architecture defaults to Server Components and only drops to the client where interactivity demands it, keeping the JavaScript bundle small. Styling runs through one set of semantic design tokens, so light and dark themes and every accent stay consistent without scattered overrides. SEO is treated as a first-class feature: every route generates its own metadata, Open Graph image and structured data. Each is registered in the sitemap. A Vitest suite enforces the conventions, from slug rules to SEO cloaking guards.
What I owned
- Visual and UX design of the whole site
- Frontend architecture on the Next.js App Router with React Server Components
- Design-token system and light/dark theming in Tailwind v4
- SEO implementation: metadata, OG images, JSON-LD, sitemap, robots
- Contact form with server-side validation, email delivery, and bot protection
- Deployment and analytics on Vercel