Why I Designed My Portfolio Like a Bento Box
I did not want a static resume page
Most portfolios read like a PDF converted into HTML: one column, long paragraphs, and generic cards. I wanted this site to feel like the way I actually think and work — modular, visual, and interactive. The bento layout became the right metaphor because it lets me group information by importance while still keeping the experience playful.
A portfolio should communicate taste in under 10 seconds and depth in under 2 minutes.
Why bento specifically
The design goals
- →Scan fast: visitors should understand who I am without scrolling through walls of text.
- →Go deep selectively: each tile acts like a doorway into one part of my work.
- →Create memory: shape, motion, and color make sections easier to recall later.
- →Reflect product thinking: structure and interaction should show engineering decisions, not just visuals.
How I mapped content into tiles
I treated every tile as a unit with a clear job. Large tiles carry identity and narrative. Medium tiles carry projects and outcomes. Small tiles carry metadata and utility actions. This avoids equal visual weight everywhere and creates a hierarchy that guides the eye naturally.
12 cols
Primary grid
drag + repack
Interaction model
localStorage
Layout memory
Engineering choices behind the UI
What powers the experience
- →Custom `DraggableBento` component with `dnd-kit` for smooth drag/reorder.
- →A packing algorithm to prevent holes and keep the grid visually balanced.
- →Persistent tile order using localStorage so the layout feels personal.
- →Reusable tile system shared across pages, not one-off route-specific hacks.
// simplified idea from the bento system
const next = arrayMove(prevTiles, oldIndex, newIndex)
localStorage.setItem("bento-blog", JSON.stringify(next.map((t) => t.id)))
// then repack so tiles fill the grid without gaps
const placements = packTiles(next, cols, rows)Design rules I followed
Non-negotiables
- →Every tile must answer one clear question.
- →Color encodes tone and category; it is not random decoration.
- →Motion must guide attention, not create distraction.
- →Dark mode and light mode both need strong contrast and personality.
- →If a tile does not improve clarity, it gets removed.
What this changed for visitors
People now navigate by curiosity instead of obligation. Recruiters can skim the high-signal parts quickly. Engineers can inspect deeper implementation details. And because the layout is interactive, the site feels less like a brochure and more like a product I designed and shipped.
The bento style is not just visual branding — it is my way of turning information architecture, interaction design, and engineering into one coherent story.