Developer portfolios often start as static sites. Adding a new project means editing code, redeploying, and manually syncing screenshots and copy. Rich case studies — architecture diagrams, image galleries, structured sections — are awkward to maintain without a proper content layer.
I needed a portfolio that could grow over time, support production-quality case studies, and demonstrate the same full-stack skills I bring to client work.
Solution
Built a CMS-backed portfolio platform: a public Next.js site for projects and blog content, plus a protected admin area for managing everything without redeploys.
Content lives in Supabase (projects, blog posts, site settings) with a static MDX fallback for case study files in content/projects/. The public site reads from Supabase when configured, falls back gracefully when it isn’t, and renders long-form case studies through an MDX pipeline with custom components.
Product Screenshots
(Prioritize admin UI, project editor, blog editor, and chat widget — not just the homepage.)
Architecture
Visitor
Chat widget
→
API Route
/api/chat
→
Context Builder
Supabase CMS
→
AI
OpenAI API
Public site, CMS, and AI assistant data flow
The system uses a Next.js App Router frontend with server components for data fetching. Supabase provides PostgreSQL, auth, RLS policies, and public storage for screenshots. An admin panel under /admin lets authenticated users manage projects, blog posts, site settings, and AI assistant configuration. Visitor-facing chat pulls context from CMS data and calls OpenAI via an API route.
Features
Project CMS — CRUD for projects with status (published / coming-soon / hidden), sort order, tech tags, and external links
MDX case studies — Rich content via next-mdx-remote with shared components (ProjectScreenshots, diagrams, styled tables)
Screenshot pipeline — Cover images and galleries from Supabase storage or static config
Blog — Draft/publish workflow with MDX content
Admin auth — Supabase authentication with RLS separating public read vs. admin write
AI visitor assistant — Configurable greeting, FAQs, and knowledge base; context built from site/project data
Graceful fallback — Site works with static project data when Supabase isn’t configured
The platform doubles as both a professional portfolio and a working example of a small SaaS-style content system: structured data, authenticated admin, rich MDX rendering, and AI integration — without treating “I made a personal website” as the headline.
It demonstrates skills in App Router architecture, headless CMS design, security policies, and content authoring workflows that transfer directly to client and product work.
