ds
Patterns
Page head

Page head

Kicker, title, lead and the grid behind them.

Writing

Notes from making data systems faster

Long posts on Spark, Rust, ClickHouse and streaming. Each one started as a problem at work.

Code

<header class="page-head" style="padding:4rem 1.75rem 3rem;overflow:hidden">
  <p class="label">Writing</p>
  <h1>Notes from making data systems faster</h1>
  <p>Long posts on Spark, Rust, ClickHouse and streaming. Each one started as a problem at work.</p>
</header>

Every inner page on fin1te.com opens this way: an accent kicker, one title, one lead paragraph, and the square grid fading out behind them. The title stops at 24 characters per line and the lead at 58, so the block keeps its shape at any width.

Home hero

Cloud and data engineer

I make data systems faster, smaller and cheaper.

Code

<header class="grid-bg" style="padding:4.5rem 1.75rem 3.5rem;overflow:hidden">
  <p class="label kicker">Cloud and data engineer</p>
  <h1 style="margin-top:.875rem;font-size:clamp(2.125rem,4.9vw,3.625rem);font-weight:620;font-stretch:112%;letter-spacing:-0.035em;line-height:1.04;max-width:17ch">
    I make data systems <span class="grad-text">faster, smaller and cheaper</span>.
  </h1>
</header>

The home page is the only place the display size and the gradient appear together.