How This Site Was Built
The stack, services, and design decisions behind this portfolio. Over-engineered on purpose — this site is itself a project demonstrating engineering depth.
Framework
Next.js 14 (App Router)
React 18, TypeScript, server components, edge runtime
Styling
Tailwind CSS + SCSS Modules
Utility-first with scoped styles where needed
Framer Motion + GSAP
Declarative and timeline-based animations
3D
React Three Fiber / Three.js
Procedural 3D constellation hero with celestial objects representing the tech stack
AI
Claude Sonnet 4.6 via Anthropic API
Powers the chat assistant with streaming, RAG, and tool use
Content
MDX
Blog posts processed with next-mdx-remote, syntax highlighting, and custom components
Resend
Transactional emails for the contact form
Deployment
Vercel
Edge Functions, ISR, analytics, and preview deployments
Database
Upstash Redis
View counts, reactions, and guestbook entries
Testing
Vitest
Unit and integration tests
Playwright
End-to-end browser testing
Design
Dark Theme
Inter + Archivo Black fonts, gold accent (#C9A84C), muted zinc tones
A colophon is a statement about how a publication was produced. This one doubles as a tech spec.