Site architecture
How I build and maintain this portfolio: a small multi-package repo, shared UI in Storybook, résumé data reused across web and PDF, and deployment through Vercel with Cloudflare in front of the domain.
Boundaries
Architecture
The Next.js app lives in apps/frontend. Shared browser components and global styles ship from packages/storybook as @portfolio/storybook. Structured résumé data and types come from packages/resume-content. The app composes the real data into props while Storybook stays presentation-only.
Design system
UI system and Storybook
Storybook runs as its own workspace with Vite, accessibility/docs addons, and Vitest-driven story tests. A static build is emitted under public/storybook with base path /storybook/ so Next can serve the component library beside the marketing site.
Confidence
Quality checks and CI
GitHub Actions split lint, typecheck, unit tests, Storybook checks, and Playwright smoke tests across the packages they touch. Local validation prefers Docker Compose so Node, Yarn, and browser tooling match the CI and deployment environment.
Release path
Vercel deployment
Production builds target Vercel with standalone Next.js output. Build settings and environment-specific values stay in Vercel configuration instead of being hardcoded into the app.
Domain path
Vercel to Cloudflare
Vercel serves the Next.js application, while Cloudflare manages the public DNS and front-door domain path. That keeps application deployment and domain/network controls separate and easier to reason about.