Portfolio Website
Web · Design · 2024
A personal portfolio built with Next.js 16, TypeScript, and Firebase. The site features a custom CMS (admin panel) that lets me manage projects in real-time without redeployment. Content is stored in Firestore and streamed directly to the client.
Tech Stack
Next.js 16 · TypeScript · Firebase · GSAP · Tailwind CSS v4
The project is structured as an App Router application. Each route is either a React Server Component (for SEO) or a lightweight Client Component that hydrates Firebase data. GSAP ScrollSmoother adds the buttery scroll feel while TextScrollingEffect animates headings as they enter the viewport. Theme toggling uses CSS custom properties — no re-renders, no flash.
// loadProject — Firestore client helper
export async function loadProject(slug: string) {
const ref = doc(db, "projects", slug);
const snap = await getDoc(ref);
if (!snap.exists()) return null;
return snap.data() as ProjectData;
}Design System
All colors are CSS custom properties on :root, toggled by a `data-theme` attribute. This allows instant theme switching without a page reload or hydration mismatch.
Color token reference — light & dark