Production audit progression
Iteration resolved the remaining automated accessibility and agentic-browsing checks while keeping best-practice and SEO validation green.
Live iteration
Portfolio 2026
This portfolio is a living product that brings together my engineering experience, project storytelling, interactive visuals, and design sensibility in one cohesive web experience.
Next.jsTypeScriptTailwind CSSInteraction Design
Overview
The goal was to create a portfolio that feels personal and expressive while still being fast, accessible, and easy to scan. It uses reusable content sections, project detail pages, experience pages, animated image treatments, atmospheric backgrounds, and responsive layouts.
Goals
- Present experience and projects with stronger storytelling
- Build reusable page patterns for projects, experience, and contact sections
- Create a visual language that feels distinctive without hurting readability
- Keep the site responsive, accessible, and performant
Technical Focus
- Next.js App Router
- TypeScript components
- Tailwind CSS design system
- Reusable data-driven project pages
- Responsive navigation and footer links
- Subtle parallax backgrounds and RGB image effects
Challenges
The main challenge has been balancing personality with clarity. The site should feel memorable, but the work still needs to stay readable, recruiter-friendly, and easy to navigate.
What I'm Learning
Working on the portfolio as a product has been a useful reminder that presentation is part of UX. Strong content, visual hierarchy, performance, accessibility, and interaction design all shape how people understand the work.
Measured iteration
Improving the portfolio as a production product
I used Lighthouse and browser performance tooling throughout development to catch accessibility gaps, eliminate layout movement, reduce interaction latency, and validate each iteration instead of treating optimization as a final cleanup pass.
Interaction and layout stability
Cumulative Layout Shift improved from 0.10 to 0, while Interaction to Next Paint dropped from 56 ms to 16 ms in the captured local tests.
Lighthouse and local metrics are point-in-time lab measurements and can vary with environment, device, and test conditions. Read the optimization case study.
Interview Q&A
Why include the portfolio itself as a project?
Because it demonstrates product thinking, frontend architecture, visual design, responsive implementation, and iterative polish. It is also a live example of how I turn a vague creative direction into a usable interface.
What did you focus on most?
I focused on making the site feel cohesive: reusable page patterns, atmospheric but readable visuals, strong content hierarchy, and a navigation flow that supports both quick scanning and deeper reading.
Connect
Let's Build Something Great Together
I'm always happy to chat about frontend engineering, accessibility, React, or interesting opportunities.