Personal Portfolio
This site, a Next.js 15 portfolio I designed and shipped end to end to sharpen my React and modern web dev skills.
Tech stack
- Next.js
- React
- TypeScript
- CSS Modules
- Vercel
- Responsive Design
- Accessibility
Overview
A production grade personal site built from scratch with the Next.js 15 App Router, React 19, and TypeScript. I designed the layout, built every component, wired up routing, animations, theming, and a working contact form, then deployed it on Vercel with analytics and a custom domain from Porkbun. No UI kit, no template, just CSS Modules and a small set of design tokens I tuned myself.
Problem & solution
- Shipped a Next.js 15 App Router site with TypeScript, per-route metadata, and static prerendering
- Built a layered animated background, light and dark theme toggle with no flash of incorrect theme, and custom page transitions
- Designed and coded every component by hand using CSS Modules and a small token based design system instead of pulling in a UI library
- Made the header, mobile drawer, and contact form keyboard accessible and screen reader friendly
- Implemented a contact form that validates input, opens the user's email client through a prefilled mailto link, and shows clear success and error states
- Deployed continuously on Vercel from GitHub with Vercel Analytics wired in and a custom Porkbun domain pointing at the production deployment
What I learned
- How the Next.js App Router, server components, and static generation fit together in a real shipped site
- How to design a small token based design system so spacing, color, and typography stay consistent across pages
- How to pair semantic HTML with focus styles, ARIA, and keyboard support so the site actually works for everyone
- How to plan animations, page transitions, and responsive layout so the site feels polished on phone and desktop
- How to set up a real production workflow with GitHub, Vercel, analytics, and a custom domain