Developer Portfolio
A responsive, interactive personal portfolio website showcasing my projects, skills, and story.
Project Overview
This portfolio website is my personal showcase — built to reflect both my technical skills and my design sensibility. Rather than using a template, I built every component from scratch, treating the site itself as a project worth crafting well.
The design goal was to create an immersive, dark-themed experience that feels alive without being distracting. Subtle animations, a real-time 3D background, and smooth scroll transitions give the site personality while keeping the focus on the work.
Key Features
- Interactive 3D background built with React Three Fiber and WebGL
- Scroll-triggered animations powered by Framer Motion and Intersection Observer
- Fully responsive layout optimized for mobile, tablet, and desktop
- Project detail pages with rich content and visual storytelling
- Dark theme with a refined zinc color palette and gradient accents
Design Decisions
01
3D Canvas Background
The animated particle field in the hero is rendered with React Three Fiber. It runs as a client-side canvas component, lazy-loaded to prevent SSR conflicts.
02
Motion-first Layout
Every section animates in as it enters the viewport using Framer Motion stagger groups, giving the page a sense of depth and progression.
03
Minimal & Dark
A zinc-based palette keeps things clean and professional. Gradient accents and subtle borders add visual hierarchy without clutter.
Technical Implementation
Development Stack
- Next.js 15 App Router for file-based routing and SSR
- React Three Fiber for the WebGL 3D canvas
- Framer Motion for declarative animations
- TailwindCSS for styling and responsive design
- TypeScript for type-safe component interfaces
- Radix UI primitives for accessible components
Key Challenges
- Preventing Three.js SSR crashes by dynamically loading the canvas component
- Coordinating stagger animations across independent scroll sections
- Keeping the 3D background performant on mobile devices
- Balancing visual richness with load performance
Ready to see more?
Check out my other projects or get in touch to discuss your next idea.