Overview

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.

Result 1100% Lighthouse

Result 20 Layout Shift

Result 3Sub-1.2s Load

Problem

The friction point

Traditional portfolios are heavy, slow-loading, and often inaccessible, hindering recruiters on mobile networks and violating keyboard-navigable accessibility standards.

Core constraint

Maintain security and rendering speed while eliminating drop-off points.

Process

Auditing & 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.

Audit findings

8 duplicate modal containers abandoned native focus structure.
Mobile touch targets at 28 px — below the 44 px Nielsen threshold.
Inline validation fired only on submit, causing error-rate spikes.

Solution

The final UI

A clean, hardware-accelerated bento grid layout built in Next.js with semantic HTML5 elements, custom glassmorphism styling, and native view transitions.

Before — audited wireframe

After — production UI

Results

Measurable impact

100% LighthouseAchieved a perfect 100/100 performance and accessibility Lighthouse score.

0 Layout ShiftZero Cumulative Layout Shift (CLS) on both desktop and mobile viewports.

Sub-1.2s LoadAverage page interaction latency dropped under 100ms.

Verified via Hotjar heatmaps, conversion analytics, and usability screen-recordings.