Back to Projects
Personal ProjectPersonal Portfolio
Personal Portfolio
Modern, high-performance developer portfolio engineered with Next.js 16, React 19, and Tailwind CSS v4. Features an interactive orbital canvas hero, dynamic theme color switcher, fluid Framer Motion reveals, command palette (Cmd+K), and responsive layouts.
Stack01
Next.js 16 & React 19
Styling02
Tailwind CSS v4
Motion03
Framer Motion & Canvas
Project Overview
An expressive, motion-driven personal portfolio engineered to showcase production-grade frontend engineering, accessible UI architecture, and fluid interactive experiences.
System Architecture & Decisions
01
Next.js 16 App Router foundation leveraging React 19 features and strict TypeScript type-safety.
02
Tailwind CSS v4 styling architecture with custom theme design tokens and micro-interactions.
03
Directional scroll reveal system built on Framer Motion with reduced-motion accessibility accommodations.
Key Engineering Highlights
Interactive orbital hero visualization built with HTML5 Canvas and dynamic Framer Motion orbits that scale seamlessly across device viewports.
Dynamic theme accent switcher powered by OKLCH CSS variables and persistent state across sessions.
Full-featured Command Menu (Cmd+K) supporting quick route navigation, theme switching, resume download, and keyboard shortcuts.
Responsive project case study architecture with smooth layout transitions and directional scroll reveals.
Technology Stack
Next.js 16React 19TypeScriptTailwind CSS v4Framer Motion
