Overview
coffey.codes is my personal site — part digital resume, part technical blog, and part contact surface. It doubles as a living demonstration of the stack I recommend to clients: server-first rendering, strong SEO foundations, and a content workflow with minimal friction.
The Challenge
I needed a publishing workflow that stays out of my way. The site also had to perform: fast page loads, crawlable HTML, structured data that satisfies Google's Rich Results Test, and a search surface across all article content. Most portfolio-site starters sacrifice at least one of these.
Approach
The site runs on Next.js App Router with server components by default. Content is authored in MDX via next-mdx-remote, so posts are plain files — no CMS, no API calls at write time. Tailwind CSS v4 + SASS handle styling. The scroll-driven 3D homepage scene uses Three.js and React Three Fiber with a canvas that degrades gracefully if WebGL is unavailable.
next-themes reads the system color-scheme preference; there is no manual toggle. Comments on articles are backed by Giscus, which stores discussion threads in GitHub Discussions.
Key Features
| Feature | Implementation |
|---|---|
| Full-text article search | Debounced GET /api/search?q=… → filtered JSON from server |
| Dynamic OG images | /og route with @vercel/og, parameterized by title and category |
| Taxonomy | Tags and categories with dedicated listing pages |
| RSS feed | /feed.xml generated at build time |
| Structured data | JSON-LD for BlogPosting and CreativeWork with full datetime hygiene |
| Sitemap | sitemap.ts + robots.ts auto-generated by Next.js |
| CI gate | Vitest unit + component tests, Playwright E2E |
Results
- Clean Core Web Vitals baseline across all pages
- Fully crawlable blog content — every post has canonical URLs, OG metadata, and JSON-LD
- Friction-free MDX publishing: write a file, push to
main, Vercel deploys in under a minute - Playwright + Vitest CI gate catches regressions before they reach production