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:

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.
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 />.
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.
Recent writing — a single merged feed of writing and shortlist posts.
Newsletter signup — <section class="newsletter"> with an email input and subscribe button.

Recent writing

Full-width section below the intro. Simplified 2026-08-10: the former Shortlist and Links columns were removed from the homepage, and shortlist posts now fold into this feed under their full “Shortlist #N” titles, reading as a series. (/shortlist and /links remain as standalone pages, linked from the footer colophon.)

.section-label “Recent writing” + .section-subtitle “Essays, reflections, and recommendations” (Montreuil, 0.8rem, --text-2).
A <PostList> component rendering the five most recent published posts across the writing and shortlist collections, merged and sorted by date. Each item carries an explicit path (/writing/[slug] or /shortlist/[slug]) so mixed collections link correctly.
.home-section-more link: “All writing ->” in Montreuil 0.8rem, --text-2, transitions to --text on hover.

Below recent writing, a newsletter section invites subscription. The .newsletter-row uses a 1fr 1fr grid with gap: calc(var(--space-xl) * 1.5).

.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, reflections, and recommendations</p>
        <ul class="post-list">
          <li>
            <a href="/writing/post-slug">
              <span class="title">Post title</span>
              <span class="date">Feb 15, 2026</span>
            </a>
          </li>
          <li>
            <a href="/shortlist/shortlist-slug">
              <span class="title">Shortlist #9 – ...</span>
              <span class="date">Jun 6, 2025</span>
            </a>
          </li>
          <!-- ... more posts -->
        </ul>
        <p class="home-section-more">
          <a href="/writing">All writing -></a>
        </p>
      </section>

      <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>