Personal Portfolio

This portfolio started as a collection of static, hardcoded data. Every time I wanted to add a new project, update my bio, or tweak a skill — it meant editing code, committing, and redeploying. That got overwhelming fast. So I decided to go further and build a proper admin panel on top, where I can manage every piece of content directly from a browser — no code changes needed.

A modern, full-stack personal portfolio website built to showcase projects, skills, and professional experience. Powered by Next.js 15 App Router with a custom-built admin panel — all content is managed dynamically without touching code.

Key highlights include a full CRUD admin dashboard, rich text editing via Tiptap, dark/light theme support, a guest demo mode for read-only portfolio previews, and a fully responsive design deployed on Vercel with a Supabase backend.

1. Architecture & Stack decisions — Chose Next.js 15 App Router for the public-facing site and admin panel in a single repo. Supabase for auth, database (PostgreSQL), and file storage. Tailwind CSS for styling with a custom design system.

2. Public pages — Built Home, About, Projects, and Contact pages as server components, fetching data directly from Supabase on the server for fast, SEO-friendly rendering.

3. Admin panel — Built a fully custom admin dashboard at /admin with CRUD for all content (projects, FAQs, skills, timeline, settings). No off-the-shelf CMS.

4. Rich text editing — Integrated Tiptap editor for project descriptions, FAQ answers, and timeline entries, with HTML output stored in the database and rendered with Tailwind Typography on the public side.

5. Drag-and-drop ordering — Used dnd-kit to make project and timeline lists reorderable, with optimistic UI updates and a persisted order column in the DB.

6. Guest / demo mode — Added a read-only guest login so anyone can explore the admin panel without credentials. Protected at three layers: middleware (blocks /new routes), UI (fieldset disabled, hidden action buttons), and server actions (demoGuard()).

7. Auth & session management — Implemented remember-me via a admin_persist cookie enforced in middleware, rate-limited login, and password reset via Supabase email.

8. Deployment — Deployed on Vercel with environment variables for Supabase keys and demo credentials. Supabase cron keep-alive ping to prevent database pausing on the free tier.