Portfolio hero with work strip

Design a portfolio hero with Tailwind CSS. The upper block is a max-w-4xl column: a small availability pill with a green pulse dot reading that new work is being taken from November, a large headline written in the first person over two lines, a paragraph naming the kind of work and the clients, and a row with a dark "See the work" button beside a plain email link. The lower block is a full-width horizontal strip of five project tiles that scrolls sideways with scroll-snap: each tile is a fixed-width rounded-xl bordered card holding a placeholder image area drawn as a neutral gradient with a small monospaced year in its corner, then a project name, a client line and two tiny tag pills. Fade the strip at both edges with a mask, hide the scrollbar, and add a muted line under it inviting a sideways scroll on touch devices.

<section class="pt-20">
  <div class="mx-auto max-w-4xl px-6">
    <span class="inline-flex items-center gap-2 rounded-full border border-neutral-200 px-3 py-1 text-xs font-medium text-neutral-600">
      <span class="relative flex h-2 w-2">
        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
        <span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
      </span>
      Taking new work from November
    </span>

    <h1 class="mt-7 text-5xl font-semibold leading-[1.05] tracking-tight text-neutral-900 sm:text-6xl">
      I design interfaces for<br class="hidden sm:block" /> software that people use all day
    </h1>

    <p class="mt-6 max-w-xl text-lg leading-relaxed text-neutral-500">
      Fifteen years on dense, unglamorous products — trading desks, hospital rotas, freight planning. Currently independent, working with two or three clients at a time.
    </p>

    <div class="mt-8 flex flex-wrap items-center gap-5">
      <a href="#" class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">See the work</a>
      <a href="#" class="text-sm font-medium text-neutral-700 underline underline-offset-4 hover:text-neutral-900">[email protected]</a>
    </div>
  </div>

  <div class="work-strip mt-16 overflow-x-auto pb-16">
    <div class="flex snap-x snap-mandatory gap-4 px-6" style="scroll-padding-left:24px">
      <article class="w-72 shrink-0 snap-start rounded-xl border border-neutral-200 bg-white p-3">
        <div class="relative grid h-44 place-items-center rounded-lg bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4 20V10m5 10V4m6 16v-7m5 7V7"/></svg><span class="absolute right-3 top-3 font-mono text-[10px] text-neutral-400">2026</span>
        </div>
        <p class="mt-3 text-sm font-medium text-neutral-900">Freight planning console</p>
        <p class="text-xs text-neutral-500">Kestrel Logistics</p>
        <div class="mt-2.5 flex gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Product design</span>
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Design system</span>
        </div>
      </article>

      <article class="w-72 shrink-0 snap-start rounded-xl border border-neutral-200 bg-white p-3">
        <div class="relative grid h-44 place-items-center rounded-lg bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></svg><span class="absolute right-3 top-3 font-mono text-[10px] text-neutral-400">2025</span>
        </div>
        <p class="mt-3 text-sm font-medium text-neutral-900">Ward rota scheduling</p>
        <p class="text-xs text-neutral-500">Fernbrook Health</p>
        <div class="mt-2.5 flex gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Research</span>
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">UI</span>
        </div>
      </article>

      <article class="w-72 shrink-0 snap-start rounded-xl border border-neutral-200 bg-white p-3">
        <div class="relative grid h-44 place-items-center rounded-lg bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg><span class="absolute right-3 top-3 font-mono text-[10px] text-neutral-400">2025</span>
        </div>
        <p class="mt-3 text-sm font-medium text-neutral-900">Warehouse control tower</p>
        <p class="text-xs text-neutral-500">Oakline Group</p>
        <div class="mt-2.5 flex gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Data viz</span>
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Prototyping</span>
        </div>
      </article>

      <article class="w-72 shrink-0 snap-start rounded-xl border border-neutral-200 bg-white p-3">
        <div class="relative grid h-44 place-items-center rounded-lg bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="3" y="5" width="18" height="4" rx="1"/><path d="M5 9v10h14V9M10 13h4"/></svg><span class="absolute right-3 top-3 font-mono text-[10px] text-neutral-400">2024</span>
        </div>
        <p class="mt-3 text-sm font-medium text-neutral-900">Claims review workspace</p>
        <p class="text-xs text-neutral-500">Meridian Insurance</p>
        <div class="mt-2.5 flex gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Workflow</span>
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Accessibility</span>
        </div>
      </article>

      <article class="w-72 shrink-0 snap-start rounded-xl border border-neutral-200 bg-white p-3">
        <div class="relative grid h-44 place-items-center rounded-lg bg-gradient-to-br from-neutral-100 to-neutral-200 text-neutral-400">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m8 9-3 3 3 3m8-6 3 3-3 3m-2-9-4 12"/></svg><span class="absolute right-3 top-3 font-mono text-[10px] text-neutral-400">2024</span>
        </div>
        <p class="mt-3 text-sm font-medium text-neutral-900">Developer documentation</p>
        <p class="text-xs text-neutral-500">Northwind</p>
        <div class="mt-2.5 flex gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 text-[10px] text-neutral-600">Information design</span>
        </div>
      </article>
    </div>

    <p class="mt-4 px-6 text-xs text-neutral-400">Scroll sideways for more, or see all twenty-eight projects in the archive.</p>
  </div>
</section>

<style>
  .work-strip { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .work-strip::-webkit-scrollbar { display: none; }
</style>