← Back to projects
Portfolio Website
Next.jsTypeScriptTailwind CSSFramer MotionLenis
I wanted a portfolio that felt like me — not a template, not a wall of text, just something fun to scroll through. So I built this from scratch.
The homepage is a timeline of my career, education, and personal milestones. Each card animates in as you scroll, with a glowing progress line that grows down the center. Cards alternate left and right on desktop and stack on mobile. Clickable cards (like Penny) open into their own detail pages with photos and videos.
The space theme runs through the whole site — a multi-layer starfield with parallax scrolling, randomized twinkling, and shooting stars, all pure CSS and JS. A custom rocket SVG cursor replaces the default pointer, and a spotlight glow follows your mouse. The background is a deep near-black (#010a10) that lets the stars pop.
Built with Next.js 16 (App Router) for routing and static generation, TypeScript for type safety, and Tailwind CSS v4 with custom theme variables for consistent styling. Framer Motion powers all the scroll-linked animations — the parallax hero, timeline progress line, and card fade-ins. Lenis handles the smooth buttery scrolling. Lucide React provides the icons.
The project pages, clips page, and blog are all statically generated from TypeScript data files — no CMS, no database. Videos are served from a local /videos directory tracked with Git LFS. The whole thing is deployed on Vercel.