This personal portfolio exists to give visitors, whether prospective clients or recruiters, a clear picture of what I do, the skills I bring, and the detailed work behind every project I have built.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
The tools and technologies that came together to bring this project to life.
Each project draws on a mix of disciplines, here's how they came together on this one.
A closer look at what the finished product offers, the obstacles along the way, and what came out of it.
Animation Consistency Across Sections
Each section originally had inconsistent animation delays, standardized into a single delay hierarchy: label, then title, then description, then content.
Framer Motion Hover Conflicts
Combining entrance animations with hover-lift effects on the same element silently broke the hover, since Framer Motion's inline transform style always wins over a Tailwind hover class, solved by splitting entrance and hover effects across an outer and inner element.
Transparent iOS Status Bar
Content briefly bled into the status bar area on iOS 26, resolved with a full-width navbar that covers the top strip of the viewport on scroll.
PWA Launch Flicker on iOS
iOS briefly shows its own launch placeholder before the first paint, which can't be touched by app code, so the fix was accepting one clean flash instead of layering workarounds that made it worse.
How this project changed things for the business and its users after launch.
Vulnerability patched
Images under 200KB
Faster image pipeline
Clean status bar
A detailed skill and work showcase
Before
The site ran on an older Next.js version with a disclosed security vulnerability.
After
Upgraded to a patched version with no visible change to the site's behavior.
Before
High-resolution images across the site, not just one section, risked slowing down every page.
After
Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.
Before
Without sharp installed, Next.js falls back to a slower WASM image processor in production.
After
Installing sharp speeds up image optimization and delivery on every page.
Before
On iOS 26, page content briefly bled into the translucent status bar area.
After
A full-width, scroll-aware navbar keeps the status bar area clean.
Before
There was no single place presenting a full, detailed picture of my skills and work process to visitors.
After
The portfolio now serves as a detailed, technical case study that clients and recruiters can review directly.
