Crafting a hyper-performant, accessible bento-box UX designer portfolio showcasing fine interaction craftsmanship.
A bento layout that presents proof, personality, and contact paths with minimal friction.
Metric 1100% Lighthouse
Metric 20 Layout Shift
Metric 3Sub-1.2s Load
The Friction Point
The Problem
Traditional portfolios are heavy, slow-loading, and often inaccessible, hindering recruiters on mobile networks and violating keyboard-navigable accessibility standards.
Core Constraint
Maintain high security and fast page rendering speed while solving drop-off interfaces.
Process & Exploration
Auditing & User Prototyping
We drafted a responsive grid system featuring modern CSS aspects, optimized system layouts, and interactive canvas components that run in the background. We integrated aria-live regions and prefers-reduced-motion triggers.
Interface Audit Findings
Identified 8 duplicate modal containers that abandoned native focus structures.
Touch-targets on mobile checkouts were 28px, failing Nielsen touch criteria.
Inline field instructions were overly complex and caused validation error spikes.
The Solution
The Final Interactive UI
A clean, hardware-accelerated bento grid layout built in Next.js with semantic HTML5 elements, custom glassmorphism styling, and native view transitions.
Prior Version (Audited Wireframe)
Polished UI (React Redesign)
Measurable Results
Measurable UX Impact
100%Achieved a perfect 100/100 performance and accessibility Lighthouse score.
-60%Zero Cumulative Layout Shift (CLS) on both desktop and mobile viewports.
+40%Average page interaction latency dropped under 100ms.
Verified via Hotjar heatmaps, conversion analytics, and usability screen-recordings.