Portfolio infrastructure built like production software — shipped, instrumented, and documented by the same person you'd hire.
PROBLEM
Most freelance portfolios are static marketing pages. They tell clients what the developer can build — they don't prove it.
I needed a portfolio that would demonstrate three things at once: engineering depth, operational discipline, and the ability to ship real AI infrastructure solo. Off-the-shelf SaaS (Framer, Webflow, Notion) couldn't show any of that — the admin console, the observability pipeline, the security posture, the RAG chatbot. Those are the demo.
So the site became its own case study: a full-stack app with an admin dashboard, an AI chat interface grounded in a knowledge base, rate limiting, CSP, error tracking, and a CI/CD pipeline behind branch protection. Every decision is visible because the infrastructure is the pitch.
ARCHITECTURE
Edge proxy injects per-request CSP nonce + rate-limit headers. Next.js App Router handles SSR, streaming, and tool-calling. Supabase stores conversations (for RAG context), leads, and analytics with row-level security. Sentry captures errors and CSP violations end-to-end.
METRICS
TARGET
< 3s
p95 latency
/api/chat streaming first token
TARGET
< 1%
Error rate
Sentry-monitored with alerts
TARGET
99.9%
Uptime
Vercel platform SLA
TARGET
~$0.003
Cost / request
Claude Opus + Sonnet with 5-min cache
Targets reflect engineering standards. Actual values tracked in Sentry + Finops dashboard.
ADMIN WALKTHROUGH
The admin surface is not a third-party dashboard — it's a custom Next.js area under /admin, gated by an ADMIN_COOKIE session, rendering directly from Supabase. Four views handle the operational needs.
Password gate using validateAdminSecret. Sets httpOnly SameSite=Strict session cookie.Overview shows live counts for conversations, leads, and analytics events — each a drill-down link into its detailed view.30-day token spend, cache hit rate, and per-event table computed against the Claude pricing constant. Useful for predicting margin on new client projects.Every lead submission captured with full metadata: name, email, LINE ID, business type, package interest, and message. Newest first.
SECURITY
→Content Security Policy
Per-request nonce with strict-dynamic, injected at edge proxy
→HSTS preload
max-age=63072000 with includeSubDomains and preload (submitted)
→Rate limiting
Upstash Redis, per-IP on /api/chat and form endpoints
→Row-Level Security
Supabase RLS on conversations, leads, and analytics tables
→Branch protection
main requires typecheck+lint+test and RAG answer quality checks; no force push
→Admin auth gate
ADMIN_COOKIE session, httpOnly with SameSite=Strict for admin surface
OBSERVABILITY
Sentry is wired end-to-end: client SDK (with a Turbopack visibility fix that took three iterations to nail), server SDK, and CSP violation reporting via the same transport. Errors, performance traces, and blocked CSP directives all land in one project. The setup is documented in SOPs §22–§25 as a reusable pipeline for future Next.js projects.
WORKFLOW
Every change flows through a disciplined pipeline: Claude Code (builder) operates on a feature branch with pre-flight validation; GitHub serves as ground truth — no auto-opened PRs, all merges manual and squash-only. Each PR represents exactly one logical change. Phase structure: Recon → Discovery → Plan → Pre-flight → Apply → Verify (typecheck + lint + vitest) → Report. This is how a solo developer ships at the quality of a small team.
WORK WITH ME
Work with me
Need infrastructure like this for your business? I build production-grade web apps, AI chatbots, IoT systems, and internal tools — solo, fast, and instrumented from day one.
