Case Study
Personal Site & Technical Portfolio
I rebuilt my personal site as a production-grade portfolio and technical playground.
The goal: ship fast, type-safe pages with a first-class writing workflow, analytics you can trust, and a CMS that never fights the front end. I used Strapi 5 + Postgres for content, generated types into the Next app for end-to-end safety, and leaned on Vercel for speed and DX.
Timeline: 3 weeks (Strapi Cloud → pivot to Heroku for DB control, backups, and logs)
100/100
lighthouse (performance, accessibility, best practices, seco)
<100ms
server TTFB (cached pages on Vercel)
<60kb
critical CSS/JS on landing (post-treeshake)
Zero
incidents since launch
Overview
Week 1 – Information architecture, Strapi content types (Blog · Work · Case Studies · Tags · Categories · Tech Stack), initial Next scaffolding, Tailwind v4 & ShadCN setup, design tokens.
Week 2 – Typed content piped into Server Components, image & asset pipeline (S3 + CloudFront), email stack (Resend + Google Business Email), analytics instrumentation (Vercel, GA4, Meta, X).
Week 3 – Testing (Jest + React Testing Library), API test suite (Postman Collections), accessibility & performance passes, CI/CD hardening, smoke tests, launch.
Why I moved off Strapi Cloud: When a sequencing issue hit the DB, I had no database control (no resets, no surgical fixes). Rebuilding from scratch wasn’t acceptable. Migrated to Heroku Postgres + backups + logs + rollbacks—way better operationally at a fraction of the cost.
Challenges
Typed CMS without friction
Generate TS types from Strapi and keep Server Components happy without over-fetching or type-narrowing whack-a-mole.
Design system in Server Components
ShadCN + Tailwind v4 tokens, zero client bloat, and consistent theming across RSC boundaries.
Marketing analytics without regressions
GA4 + Meta + X + Vercel Analytics while preserving core web vitals and user privacy patterns.
Image & asset strategy
S3 + CloudFront + Next Image for responsive, cached media without layout shift.
Deployment resilience
Quick rollbacks, repeatable migrations, and reliable object storage/CDN.
Solutions
System Architecture & Infrastructure
Front End
React 19.2 + Next 16 App Router, Server Components by default; Server Actions/Functions for forms and admin utility tasks.
Design Systems
Tailwind v4 (design tokens + CSS variables), ShadCN UI (tree-shaken).
CMS: Strapi 5 on Heroku with PostgreSQL; type generation consumed in Next for compile-time safety.
Storage & CDN
AWS S3 (private + signed URLs where needed) fronted by CloudFront; Cloudflare for DNS and edge rules.
Delivery & Deployment
- Heroku Build - Lightweight, isolated linux container to host CMS server
- Heroku PostgreSQL Plugin - Automates and provisions the postgres db
- Cloudflare DNS to handle security, encryption, and cloud rules
- AWS S3 and Cloudfront to handle flash media storage and CDN for fast asset delivery
- Vercel (build cache of static, server rendered pages, ISR/SSG where appropriate, uses edge functions to handle server functions and server components
DX and Tooling
* CMS Backend - using Docker (local parity), pnpm (faster installs, better monorepo ergonomics), to spin a postgreSQL db, and create persistent volumes that can easily be destroyed or split.
- NextJS also uses pnpm for faster installs and better monorepo ergonomics. Also, helps mitigate dependency conflict and dependency duplication
CI/CD
- Vercel automatic previews
- Automate rollbacks on execution failure
- Release gating via test suite + 63 point lighthouse checks and analytic reviews
- Leveraging Cursor and Copilot for code reviews on PRs
Results & Impact
3 Weeks
From first commit to production
100%
Lighthouse score across the board
Editorial Velocity
Plublish flow cut to minutes (type-safe drafts -> live)
Operational Control
painless rollbacks and DB maintenance (Heroku)
Marketing-ready
analytics with clean attribution and conversion paths
Before and After
- Static, hard-coded copy and content
- 84% light house score, poor performance
- 30% layout-shift
- No proper router navigation setup
- create react app, outdated, javascript require
- Minimum SEO
- One page, glitchy, not dynamic
- Challenging to update and manage
- No contact form
- Next.js, server-side rendered static content and efficient cached lifetimes
- 100% lighthouse - Extremely performant and interactive
- Headless CMS / PostgreSQL DB - Great maintainability and scalability
- AWS Cloudfront/S3 Flash Storage - lightning-fast content delivery
- Privacy & Analytics - Opt-in Google and Vercel analytics to optimize CRO and UX
- Server and client-side validating contact form, enabling secure and relevant communications and privacy