A responsive portfolio that shows off my skills and projects.
Most portfolios feel like static resumes. I wanted something that could demonstrate technical skills through execution itself and not just describe them. The challenge was creating a memorable experience without sacrificing maintainability, performance, or accessibility.
I engineered a data-driven Next.js architecture separating dense content from presentation. This allowed rapid visual iteration. I authored custom hooks for responsive scroll-linked animations and built a physics-based ambient canvas background, ensuring all motion strictly respects user accessibility preferences.
A live, interactive proof-of-work. It demonstrates my ability to execute complex physics, canvas animations, and responsive layouts natively in React without ever sacrificing performance, semantics, or UX.
Built on Next.js 16 with App Router for optimal performance. Framer Motion powers complex animations, scroll-triggered reveals, and page transitions. The design system uses CSS custom properties for theming with a Slate base and Terracotta accents. Glassmorphism and backdrop filters add depth. All animations respect prefers-reduced-motion for accessibility.
Scroll-linked parallax, orchestrated section reveals, and physics-based interactions create a living interface that responds naturally to user input.
Layered transparency effects with backdrop blur, subtle borders, and controlled opacity for depth without visual clutter.
Canvas-based animated blobs that react to mouse movement and scroll position, adding atmosphere while staying performant.
Semantic HTML, keyboard navigation, ARIA labels, and reduced-motion support ensure the site works for everyone.
Projects, skills, and experience are defined in typed data files, making updates straightforward without touching components.
Fullscreen image viewing with keyboard navigation, thumbnails, and smooth transitions for showcasing project visuals.
Defining the aesthetic and technical requirements.
Set up Next.js architecture with basic components and data structure. Overhauled with Vibrant Orange / Neon Blue palette, glassmorphism, and scroll animations.
Added ambient background, physics interactions, and microanimations throughout.
Improved motion quality, added reduced-motion support, and refined responsive behavior.