`/stripe-agentic-commerce` — Recipient-Specific Portfolio

A standalone route built for sharing as a portfolio link to a specific company. First instance targets Stripe — Senior Staff Product Designer, Agentic Commerce.

Structure

This page is thin. Almost everything visual lives in src/components/portfolio/PortfolioPage.astro. The page file here only:

Sets the <title>, description, and canonical slug.
Provides the leadIn slot — recipient-specific Section 1 prose.
Sets prerender = false so PortfolioPage can read the v2-chrome-revealed cookie at request time.

Sections 2–8 (Positioning, Scout, Kosas, Style Hatch, Interactive Era, How I work, Contact) are shared across all recipients and live inside PortfolioPage.astro.

Adding a new recipient

src/pages/notion-agents/index.astro    # new file

---
import PortfolioPage from '@/components/portfolio/PortfolioPage.astro'
export const prerender = false
---

<PortfolioPage
  recipientSlug="notion-agents"
  pageTitle="Jonathan Moore — Portfolio for Notion, Agents Team"
  description="…"
  leadInPath="~ / lead-in / notion.md"
  leadInHeading="Notion — Agents Team"
>
  <Fragment slot="leadIn">
    <p>…recipient-specific lead-in prose…</p>
  </Fragment>
</PortfolioPage>

That’s it. Sections 2–8 carry over automatically.

Reveal behavior

Portfolio pages always render the chrome statically — no typewriter or bars-open animation. The home page (/) is where that reveal lives. Body cascade still plays, compressed by --v2-reveal-scale: 0.55 via the v2-skip-reveal html class.

Auto-cascade

Per-element reveal delays are computed dynamically by an inline script in PortfolioPage.astro. At parse time it walks <main> in DOM order and assigns each revealable element a delay along a 300 BPM grid:

Four half notes to open: 0, 400, 800, 1200, 1600ms
Quarter notes thereafter: 1800, 2000, 2200, …

All values are scaled by --v2-reveal-scale (so on portfolio pages the actual fade-in delays are ×0.55).

Revealable elements are picked up by selector — headings (.pf-lead-h1, .pf-section-title, .pf-subsection__title), paragraphs (.v2-statement > p, .pf-prose > p, .v2-statement__contacts), figures (.pg-media-fig), scrollers ([data-pf-scroller]), section footers (.pf-section-footer), and dividers (.v2-divider). Adding new sections or content automatically inherits the cascade — no per-page wiring.

SectionLabelReveal reads its parent .v2-reveal’s data-pf-reveal-delay-ms on mount so the typewriter starts on the same beat the label fades in.

Section index

The right-edge § 01 … § 08 rail (SectionIndex.astro) is a position: fixed IntersectionObserver-driven nav. Hidden under 900px viewport width.

Image placeholders

All figure slots currently render decorative pattern fills (dots, stripes, rings, grid, diag, wave) via the existing Lightbox pg-lb__art CSS. To swap in real assets, set src on the figure / gallery frame in PortfolioPage.astro. The image picks up data-preview="true" automatically and click-to-expand wires through the global ImageViewer.

Privacy

Pages carry <meta name="robots" content="noindex, nofollow"> since they’re meant for direct sharing, not search.

/stripe-agentic-commerce — Recipient-Specific Portfolio