Portfolio Website
Personal Brand & High-Performance Showcase
A modern portfolio website with a bold brutalist identity, scroll-triggered video scaling, and advanced GSAP animations engineered to balance creative impact with strong Core Web Vitals and SEO performance.
Project Overview
Role: Full-Stack Developer & Designer
Duration: 3 weeks
Team: Solo Project
Year: 2025
Live Site: Visit Project
Technologies Used
Project Details
A cutting-edge personal portfolio designed to showcase frontend and performance expertise through immersive interaction. The site combines advanced scroll-based animations and video-driven storytelling with disciplined optimization strategies, achieving near-perfect Lighthouse scores on desktop while intentionally prioritizing visual impact on mobile.
Challenge
Design a distinctive portfolio that demonstrates advanced frontend engineering, animation, and performance optimization without sacrificing accessibility or SEO. A key challenge was balancing an immersive video experience with measurable Core Web Vitals, especially on mobile devices.
Solution
Built with Next.js 16 using the App Router, the site leverages GSAP for scroll driven animation, dynamic imports for non-critical features, and strict layout control to eliminate CLS. Performance optimizations were applied aggressively on desktop, while mobile intentionally retains a cinematic video experience accepting a higher LCP as a conscious design trade-off.
Key Features
- Advanced GSAP scroll animations
- Scroll triggered hero video scaling
- Brutalist typography and layout system
- Core Web Vitals optimization with zero CLS
- Comprehensive SEO and structured metadata
- Dynamic imports for non-critical features
- Semantic HTML and accessibility best practices
- Mobile first responsive architecture
Results & Impact
- ✓
Desktop Lighthouse Performance score of 98 with near-instant rendering
- ✓
Mobile Lighthouse Performance score of 81, with intentional LCP impact from hero video
- ✓
Perfect 100 scores for Accessibility and SEO across devices
- ✓
Zero Cumulative Layout Shift through fixed media sizing
- ✓
Total Blocking Time of 0 ms on both desktop and mobile
- ✓
Distinctive brutalist design that differentiates from conventional developer portfolios