Homepage

The front door. The homepage establishes identity, signals liveness, and surfaces recent work. It uses a different header treatment than interior pages — a nameplate at display scale rather than a breadcrumb navigation.

Current homepage

Structure

The homepage assembles four sections inside the <main> element:

  1. Nameplate — <span class="name">Alex Priest</span> at 2.5rem Signifier. Not a link (the reader is already home). Rendered in the site header with view-transition-name: nameplate so it morphs into the smaller 1.1rem breadcrumb nameplate when navigating to interior pages.

  2. Intro section — <section class="intro"> containing prose paragraphs and a live indicator. margin-bottom: var(--space-xl); padding-bottom: var(--space-lg).

    • Paragraphs at 1.05rem Signifier, --text-2, line-height: 1.6. The first paragraph is promoted to 1.1rem in --text with line-height: 1.55 — the same lede convention as article pages.
    • The intro content is managed as an Astro content collection entry (pages/home), rendered through <Content />.

  3. Live indicator — <p class="live-indicator"> with a breathing Signifier asterisk (<span class="live-asterisk">). The asterisk animates with a 4s ease-in-out infinite breathe keyframe (opacity from 1 to 0.15 and back). Accent-colored. Accompanied by the current local time in Austin, TX, populated by client-side JavaScript. Gated behind prefers-reduced-motion: no-preference.

  4. Content sections — Recent writing, shortlist, and links, each introduced by a section label.

  5. Newsletter signup — <section class="newsletter"> with an email input and subscribe button, grid-aligned to the two-column layout above.

Recent writing

Full-width section below the intro.

  • .section-label “Recent writing” + .section-subtitle “Essays and reflections” (Montreuil, 0.8rem, --text-2).
  • A <PostList> component rendering the five most recent published writing posts. The first post receives a .latest-mark.
  • .home-section-more link: “All writing ->” in Montreuil 0.8rem, --text-2, transitions to --text on hover.

Two-column grid

Below recent writing, shortlist and links sit in a <div class="home-columns"> — a CSS Grid with grid-template-columns: 1fr 1fr and gap: calc(var(--space-xl) * 1.5). Collapses to a single column at <=600px, where the post lists are hidden (.home-column-list { display: none }) to keep the mobile homepage concise.

Shortlist column:

  • Section label “The Shortlist” + subtitle “Recommendations, loosely themed”.
  • A <PostList> with the five most recent shortlist items, titles stripped of the “Shortlist ” prefix.
  • “All shortlist ->” link pinned to the bottom with margin-top: auto.

Links column:

  • Section label “Links” with a .live-dot — a 6px accent-colored circle with a 3s pulse animation (opacity 1 to 0.3). Gated behind prefers-reduced-motion.
  • A <ul class="home-link-list"> with the three most recent links. Each <li> contains:
    • Title link (<a> to external URL) in Signifier with weight-shift hover (400 to 500, accent).
    • Permalink glyph (<a class="link-permalink"> using &#10022;, 0.65em, --text).
    • Optional “Must read” marginalia (same treatment as link post pages, desktop only).
    • Domain name (<span class="link-domain">, Montreuil, 0.75rem, --text-3).
  • --ui bottom borders between items.
  • “All links ->” link pinned to the bottom.

Newsletter signup

Below the two-column grid, a newsletter section invites subscription. The .newsletter-row uses the same 1fr 1fr grid and gap as .home-columns, so “Subscribe →” aligns horizontally with “All links →” in the right column.

  • .section-label “Newsletter” + .newsletter-blurb (same treatment as .section-subtitle).
  • Email input with bottom-border-only styling (Signifier, 0.9rem). The input extends var(--space-xl) into the grid gap to close the visual distance to the button.
  • “Subscribe →” as a text-link button (Montreuil, 0.8rem, --text-2 → --text on hover) — same pattern as section navigation links.
  • Status message below: --accent for success, --red for error.

The form posts to /api/subscribe, a Vercel serverless function that proxies the Beehiiv API. See Controls → Newsletter signup form for full specs.

Exploration directions

Two future homepage concepts documented during the design audit. These represent exploration directions, not current implementations.

The Folio

Table-of-contents approach. The homepage as a title page that immediately orients.

The idea: strip the homepage to structured navigation. A clear hierarchy of content sections — writing, shortlist, links, books, media, now — each with a one-line description and the most recent entry date. Minimal prose, maximum wayfinding. The reader knows exactly what exists and where to find it within seconds.

This draws from the front matter of a printed book: title page, table of contents, then content. The current homepage intro could move to /about, letting the front door function as pure architecture.

Characteristics:

  • Nameplate at display scale (unchanged)
  • Section links as the primary content, not preview lists
  • Each section shows title, description, and latest-updated date
  • No preview content, no post lists on the homepage itself
  • The reader clicks through to browse, rather than scanning previews

The Broadsheet

Multi-column editorial grid. The homepage as a newspaper front page.

The idea: use a multi-column layout with mixed-scale typography to surface multiple content streams simultaneously. A lead article at large scale, secondary items at medium scale, a links sidebar, a “what I’m reading/watching” strip. Visually rich, closer to an editorial publication than a personal blog.

This draws from broadsheet newspaper layout: headline hierarchy, column rules, mixed-scale entries that let the eye choose where to land. The homepage becomes a curated edition rather than a chronological list.

Characteristics:

  • Multi-column CSS Grid with asymmetric column widths
  • Lead item with larger title typography (1.5-2rem)
  • Secondary items at standard scale
  • Vertical column rules using --ui borders
  • Dense information display — more content visible above the fold
  • Requires careful responsive breakpoint work to collapse gracefully

Code example

HTML structure of the current homepage:

<body>
  <div class="scroll-progress" aria-hidden="true"></div>

  <div class="site-wrapper">
    <header class="site-header">
      <span class="name" style="view-transition-name: nameplate;">Alex Priest</span>
    </header>

    <main id="main">
      <section class="intro" data-animate>
        <div class="prose">
          <!-- Rendered from content collection: pages/home -->
          <p>First paragraph at 1.1rem in --text color.</p>
          <p>Subsequent paragraphs at 1.05rem in --text-2.</p>
        </div>
        <p class="live-indicator">
          <span class="live-asterisk" aria-hidden="true">*</span>
          It's <span class="live-time"></span> in Austin, TX.
        </p>
      </section>

      <section>
        <p class="section-label">Recent writing</p>
        <p class="section-subtitle">Essays and reflections</p>
        <ul class="post-list">
          <li>
            <a href="/writing/post-slug">
              <span class="title">Post title</span>
              <span class="latest-mark">Latest</span>
              <span class="date">Feb 15, 2026</span>
            </a>
          </li>
          <!-- ... more posts -->
        </ul>
        <p class="home-section-more">
          <a href="/writing">All writing -></a>
        </p>
      </section>

      <div class="home-columns">
        <section>
          <p class="section-label">The Shortlist</p>
          <p class="section-subtitle">Recommendations, loosely themed</p>
          <div class="home-column-list">
            <ul class="post-list">
              <!-- Shortlist items -->
            </ul>
          </div>
          <p class="home-column-link">
            <a href="/shortlist">All shortlist -></a>
          </p>
        </section>

        <section>
          <p class="section-label">Links <span class="live-dot"></span></p>
          <p class="section-subtitle">Reading from around the web</p>
          <ul class="home-link-list home-column-list">
            <li data-animate>
              <a href="https://example.com" target="_blank" rel="noopener">Link title</a>
              <a href="/links/link-slug" class="link-permalink">&#10022;</a>
              <span class="link-domain">example.com</span>
            </li>
            <!-- ... more links -->
          </ul>
          <p class="home-column-link">
            <a href="/links">All links -></a>
          </p>
        </section>
      </div>

      <section class="newsletter" data-animate>
        <p class="section-label">Newsletter</p>
        <p class="newsletter-blurb">...</p>
        <form class="newsletter-form" id="newsletter-form">
          <div class="newsletter-row">
            <input type="email" placeholder="your@email.com" required />
            <button type="submit">Subscribe →</button>
          </div>
          <p class="newsletter-status" id="newsletter-status"></p>
        </form>
      </section>
    </main>

    <footer class="site-footer">
      <!-- Colophon: nav groups, copyright, settings -->
    </footer>
  </div>

  <aside class="side-rail" aria-label="Navigation">
    <!-- Book-spine nav links -->
  </aside>
</body>