Designing a portfolio that feels calm

Calm websites aren't calm by accident. Almost nothing on them is arbitrary. So before building pages, I set the rules every page would follow, then stuck to them.

A bar for every page

Longer pages get a second bar with the page's name and its sections: 52px tall, a frosted background (80% white, 20px blur, 1.8 saturation), a 1px hairline under it, the title at 21px semibold, the links at 12px. The section you're reading gets a thin line under its link.

The detail that makes it feel right is how the two bars share the screen. Scrolling down, the site bar slides away and the page's bar takes the top. Scrolling back up, or simply pausing for a moment, the site bar slides back in and the page's bar moves down under it.

Rhythm

• About 112px between sections, alternating white and light grey (#f5f5f7).
• Section names at 21px in ink, headlines at 40 to 48px under them.
• Body copy at 19px semibold in grey, with the sentence that matters in ink.
• Every button from one shared set: 44px for main actions, 36px inside cards.

Motion that follows you

Pictures rise and settle as they scroll in. That's a scroll-driven animation in plain CSS, so it costs no JavaScript and moves exactly with your finger:

.fx-rise {
  animation: fx-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}
@keyframes fx-rise {
  from { transform: translateY(40px) scale(0.96); }
  to { transform: none; }
}

It only animates transform, so it never fights other styles, and it switches off for anyone who has asked their device for less motion.

“Good design isn't one big idea. It's a hundred small decisions, each made on purpose.”