Say hi →
← All posts

Why I still hand-roll layout before reaching for a framework

This portfolio looks chaotic on purpose. Under the halftone and crooked cards is a plain CSS grid. That is the point.

I like component libraries for apps with forms, tables, and fifty states of buttons. Portfolios are different. They are one long argument about taste. Starting with a framework often means fighting defaults instead of making choices.

Grid first, personality second

Each section on this site gets a board: a grid container with cards inside. Alignment does the heavy lifting. Rotation, offset margins, and scrap labels add character on top. If the grid is wrong, no amount of transform: rotate() saves it.

Messy is a layer you add. Broken is what happens when the structure was never clear.

What hand-rolling buys you

  • Speed of mood. Riso pink and halftone overlays are CSS variables, not theme overrides.
  • Smaller payload. No runtime for a site that mostly scrolls and clicks.
  • Readable CSS. .work__board and .blog__post tell you where to look.
  • Accessible base. Semantic sections and real headings before animation hooks.

When I reach for tools anyway

React for OzSathi and Dhukuti because state and routing multiply. Tailwind when utility classes beat maintaining another stylesheet. But this portfolio is HTML, CSS, and a thin JS file. That matches the zine idea: photocopied, stapled, shipped.

A practical workflow

  1. Sketch the section in boxes on paper (yes, paper).
  2. Build the grid at desktop width with no rotation.
  3. Add mobile breakpoints while the layout is still boring.
  4. Layer scatter: chips, scraps, wires, cursor labels.
  5. Stop before every element is crooked. Restraint reads as confidence.

If you are rebuilding your own site, try one section without a UI kit. You might ship slower for a day and faster for a month. Or tell me what you are building and we can argue about grids in the comments (email works too).