The article
Our homepage is ten cards on a 12-column grid: five for the introduction, four for the portrait and contact, three for the rail. That 5-4-3 rhythm is the whole trick — every card has a clear size rank, so the eye knows what matters before reading a word.
Each card does exactly one job. The hero introduces, the portrait humanises, the rail navigates, the journal teases, resources invite, tools credential. Cards that try to do two jobs get split; cards with no job get deleted. Our first draft had fourteen cards. Four of them were decoration wearing a job title.
Two cards carry live behaviour, and both earn it. The clock proves someone is home. The theme toggle proves the studio sweats details — and it persists, because a toggle that forgets is worse than no toggle. Everything else is honest and static.
On mobile the grid collapses to a single column in reading order: intro, face, contact, status, then everything else. Bento grids fail on phones when teams shrink the desktop; ours re-orders instead. The rail becomes two columns on tablets, one on phones — same cards, same jobs.
Steal the system: rank your content 5-4-3, give every card one job, add one live detail, and let the grid collapse gracefully. Or skip the work — this exact system ships as our Portfolio Starter Template.