Portfolio CMS
This project is a full-stack personal portfolio platform with a purpose-built admin CMS, giving complete control over every piece of public-facing content without relying on a third-party service. The public site and the admin interface are unified under a single Next.js application, backed by Supabase for authentication, database, and storage.
The final product.
The public-facing portfolio showcases projects, work history, skills, and a personal biography — all driven by live data managed through the admin panel. Visitors can browse a project gallery with lightbox image viewing, see a live availability status ("looking for work" toggle), and explore a career timeline. Every field is editable in real time through the CMS with no redeployment needed.
The admin panel includes dedicated sections for:
Dashboard — at-a-glance stats (total views, project count, skills count, uptime), recent project list with status badges, and a live activity feed
Projects — create, edit, and remove portfolio projects with gallery image management
Analytics — page view trends over time, unique visitor counts, session duration, bounce rate, top pages, referrers, and geographic breakdown
Work History — add, edit, and remove career entries with role, company, period, and employment type
Settings — edit biography, statistics, and site-wide preferences including the "looking for work" availability flag
Technical accomplishments
Authentication-gated admin panel using Supabase Auth, with magic link and credential-based sign-in flows
Row-Level Security (RLS) policies applied across all Supabase tables — public data is read-only, write access is scoped strictly to authenticated admin sessions
Single consolidated migration file replacing incremental migration history — a clean, deployment-ready Supabase schema with all RLS policies defined in one place
Server-side data fetching via Next.js App Router with route-level data isolation between public and admin surfaces
Real-time availability toggle — a "looking for work" status flag that persists to the database and reflects instantly on the public portfolio
Gallery lightbox — project image galleries with a full-screen lightbox viewer built as a custom React component
Toast notification system — contextual feedback for CMS actions (save, delete, error) using Sonner with considered viewport placement
Type-safe database layer — TypeScript types derived from the Supabase schema, eliminating whole classes of runtime errors
Design system — a custom dark-mode design language used consistently across the admin UI, with a defined token set for color, spacing, and typography
Key screens.
A walkthrough of the core screens and interactions that define the product experience.