Personal project · 2026
Personal Web Portfolio
Single-page portfolio with custom full-page navigation, cursor-reactive gradients, and 95+ Lighthouse scores.
TypeScript · Next.js · Tailwind CSS · Framer Motion
Challenge
Traditional scrolling portfolios feel generic and fail to guide user attention effectively.
Approach
Built a single-page app with custom full-page navigation, cursor-reactive gradient backgrounds, and GPU-accelerated section transitions. Scores 95+ on all Lighthouse metrics.
What it does
- Custom Navigation Engine. Debounce-protected handler manages full-page transitions via scroll, swipe, and keyboard.
- 60fps Animations. Framer Motion transitions and GPU-accelerated CSS transforms for smooth performance.
- Cursor-Following Glow. 500px radial glow follows the cursor and adapts color to the active section theme.
- 95+ Lighthouse Scores. SVG gradients and Next.js App Router for optimal bundle splitting and performance.
Technology Stack
| Category | Technology | Purpose |
|---|---|---|
| Framework | Next.js 14 | App Router architecture |
| Language | TypeScript | Type safety |
| Styling | Tailwind CSS | Utility-first styling |
| Animation | Framer Motion | Complex state transitions |
| Deployment | Vercel | Edge network hosting |
Design System
| Section | Primary Color | Theme Hex |
|---|---|---|
| Home | Green/Purple | #27c029 / #8f46db |
| About | Magenta | #9e005d |
| Education | Orange | #ff6b35 |
| Skills | Burgundy | #83394c |
| Projects | Deep Blue | #001b70 |