Overview
Designed and built a Pantone color swatch-themed personal portfolio from scratch using Next.js 15, TypeScript, and Tailwind CSS. The site features a cycling hero color chip, a horizontal transit map timeline of education and experience, a dynamic project grid, and a contact form that generates a unique Pantone color from the visitor's name.
Highlights
- Designed a Pantone-inspired aesthetic with custom typography (Bebas Neue, Cormorant Garamond, Space Mono) and a cycling hero color chip that transitions through 12 vivid colors every 30 seconds
- Built a horizontal transit map timeline using percentage-based positioning so tracks scale fluidly to any screen width
- Implemented a hash-based color generation function that derives a unique HSL Pantone swatch and color name from any visitor's name in real time
- Created dynamic project and experience detail pages using Next.js 15 App Router with typed data from a shared projects.ts library
- Integrated a contact form with Nodemailer/Gmail SMTP that sends a styled HTML email including the visitor's generated Pantone color chip
Tech Stack
Next.js 15TypeScriptReactTailwind CSSNodemailerVercel