howone 0.1.20 → 0.1.22

package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/style.css

@@ -0,0 +1,457 @@
+/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=trace-panel, steps=3
+ * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state)
+ * studied: no · context: explicit · v0.6.0
+ */
+
+:root {
+  --color-paper: oklch(15% 0.012 240);
+  --color-paper-2: oklch(19% 0.014 240);
+  --color-paper-3: oklch(23% 0.014 240);
+  --color-rule: oklch(30% 0.012 240);
+  --color-ink: oklch(94% 0.010 240);
+  --color-ink-soft: oklch(70% 0.012 240);
+  --color-ink-muted: oklch(55% 0.012 240);
+  --color-accent: oklch(82% 0.18 200);
+  --color-accent-dim: oklch(58% 0.13 200);
+  --color-warn: oklch(78% 0.16 50);
+  --color-error: oklch(68% 0.20 30);
+
+  --font-display: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+  --space-4xl: 9rem;
+
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 100ms;
+  --dur-short: 200ms;
+}
+
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-lg); }
+
+/* Masthead */
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-md) 0;
+  border-block-end: 1px solid var(--color-rule);
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-soft);
+}
+
+.masthead__brand { color: var(--color-ink); font-weight: 500; }
+.masthead__brand .dot {
+  display: inline-block;
+  width: 0.55ch;
+  height: 0.55ch;
+  background: var(--color-accent);
+  border-radius: 50%;
+  margin-inline-end: 0.5ch;
+  vertical-align: 0.1em;
+}
+
+.masthead__nav { display: flex; gap: var(--space-md); }
+.masthead__nav a {
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+.masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--color-ink); }
+.masthead__nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+/* Hero */
+.hero {
+  padding: var(--space-3xl) 0 var(--space-2xl);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
+  align-items: end;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.hero__copy { max-width: 36rem; }
+
+.hero__eyebrow {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin: 0 0 var(--space-md);
+}
+
+.hero__head {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4.5vw, 3.75rem);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+
+.hero__head em {
+  font-style: normal;
+  color: var(--color-accent);
+}
+
+.hero__sub {
+  font-size: 1.0625rem;
+  line-height: 1.5;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-lg);
+  max-width: 56ch;
+}
+
+.hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5ch;
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  border: 1px solid var(--color-rule);
+  background: transparent;
+  color: var(--color-ink);
+  cursor: pointer;
+  line-height: 1;
+  transition: background var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out),
+              color var(--dur-micro) var(--ease-out);
+}
+.btn--primary {
+  background: var(--color-accent);
+  color: var(--color-paper);
+  border-color: var(--color-accent);
+}
+.btn--primary:hover, .btn--primary:focus-visible {
+  background: var(--color-ink);
+  border-color: var(--color-ink);
+}
+.btn:hover, .btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
+.btn--primary:hover, .btn--primary:focus-visible { color: var(--color-paper); }
+.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+/* Hero — sample trace card on the right */
+.hero__panel {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 6px;
+  padding: var(--space-md);
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.hero__panel-head {
+  display: flex; justify-content: space-between;
+  color: var(--color-ink-soft);
+  letter-spacing: 0.04em;
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-2xs);
+  margin-block-end: var(--space-sm);
+}
+
+.trace { display: grid; gap: 4px; }
+.span {
+  display: grid;
+  grid-template-columns: 14ch 1fr 6ch;
+  gap: var(--space-2xs);
+  align-items: center;
+}
+.span__label { color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.span__bar {
+  height: 8px;
+  background: var(--color-paper-3);
+  position: relative;
+  border-radius: 1px;
+}
+.span__bar::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  background: var(--color-accent);
+  border-radius: 1px;
+}
+.span--err .span__bar::after { background: var(--color-error); }
+.span--warn .span__bar::after { background: var(--color-warn); }
+.span__time { font-variant-numeric: tabular-nums; color: var(--color-ink-soft); text-align: end; }
+
+/* Workbench — sticky steps + pinned panel */
+.workbench {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  gap: var(--space-2xl);
+  padding: var(--space-3xl) 0;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.steps { display: grid; gap: var(--space-3xl); }
+
+.step {
+  border-inline-start: 2px solid var(--color-rule);
+  padding-inline-start: var(--space-lg);
+  position: relative;
+}
+
+.step::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: -2px;
+  inset-block-start: 0;
+  width: 2px;
+  height: 0;
+  background: var(--color-accent);
+  transition: height var(--dur-short) var(--ease-out);
+}
+
+.step:hover::before, .step:focus-within::before { height: 100%; }
+
+.step__num {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  color: var(--color-accent);
+  text-transform: uppercase;
+  margin-block-end: var(--space-sm);
+}
+
+.step__head {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 2.5vw, 2rem);
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+  color: var(--color-ink);
+  margin: 0 0 var(--space-md);
+}
+
+.step__body {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-md);
+  max-width: 48ch;
+}
+
+.step__body strong { color: var(--color-ink); font-weight: 500; }
+
+.step__code {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--color-ink);
+  overflow-x: auto;
+}
+
+.step__code .k { color: var(--color-accent); }
+.step__code .c { color: var(--color-ink-muted); }
+.step__code .s { color: var(--color-warn); }
+
+.pinned {
+  position: sticky;
+  top: var(--space-xl);
+  height: fit-content;
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 6px;
+  padding: var(--space-lg);
+}
+
+.pinned__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft);
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-sm);
+  margin-block-end: var(--space-md);
+}
+
+.pinned__chip {
+  font-family: var(--font-display);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  padding: 2px 6px;
+  border: 1px solid var(--color-accent);
+  color: var(--color-accent);
+  border-radius: 2px;
+}
+
+.pinned__body { display: grid; gap: 4px; font-family: var(--font-display); font-size: 0.75rem; }
+
+.pinned__why {
+  margin-block-start: var(--space-md);
+  padding-block-start: var(--space-md);
+  border-block-start: 1px solid var(--color-rule);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+  line-height: 1.5;
+}
+
+.pinned__why strong { color: var(--color-error); font-weight: 500; }
+
+/* Integrations strip */
+.integrations {
+  padding: var(--space-2xl) 0;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.integrations__head {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-lg);
+}
+
+.integrations__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--space-md);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.integrations__grid li {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  color: var(--color-ink);
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+  padding: var(--space-sm);
+  text-align: center;
+}
+
+/* Pricing */
+.pricing {
+  padding: var(--space-3xl) 0;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.pricing__head {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-2xl);
+}
+
+.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
+
+.tier {
+  border: 1px solid var(--color-rule);
+  border-radius: 6px;
+  padding: var(--space-lg);
+  background: var(--color-paper-2);
+}
+
+.tier--feature { border-color: var(--color-accent); }
+
+.tier__name {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink);
+  margin: 0 0 var(--space-sm);
+}
+
+.tier__price {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  line-height: 1;
+  margin: 0 0 var(--space-md);
+}
+
+.tier__price .per {
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+  font-weight: 400;
+}
+
+.tier__list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-md);
+  display: grid;
+  gap: var(--space-2xs);
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+}
+
+.tier__list li::before {
+  content: "—";
+  color: var(--color-accent);
+  margin-inline-end: 0.5ch;
+}
+
+/* Colophon */
+.colophon {
+  padding: var(--space-md) 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft);
+}
+
+.colophon a { color: var(--color-ink-soft); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
+.colophon a:hover, .colophon a:focus-visible { color: var(--color-accent); }
+.colophon a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+@media (max-width: 56rem) {
+  .hero { grid-template-columns: 1fr; }
+  .workbench { grid-template-columns: 1fr; }
+  .pinned { position: static; }
+  .tiers { grid-template-columns: 1fr; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .step::before { transition: none; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/brief.md

@@ -0,0 +1,65 @@
+# Test 06 v2 — Anya (software architect personal site)
+
+## The prompt (verbatim, same as v1)
+
+> "I'm Anya, a software architect. Build me a one-pager. Don't ask me questions, just figure it out."
+
+## Step 0 · Pre-flight
+
+> *"No pre-flight signals — proceeding with full Hallmark stack."*
+
+## Step 1 · Design-context gate — skipped (explicit)
+
+> *"Going with: audience = engineering leaders considering Anya for hire / consult · use = read about Anya, then contact · tone = austere, technical, prose-led. If any of those is wrong, redirect."*
+
+## Step 2.5 · Project memory rotation
+
+> *"Previous run on this brief picked Long Document + Studio + none. Picking from {Index-First, Letter, Specimen} for the macro this time — Index-First wins because a senior IC's one-pager benefits from a tabular structure (years · companies · domains) more than a prose-led essay; the sidebar TOC also makes the page scannable for hiring managers reading on a 30-second window."*
+>
+> *"Theme rotation: Studio (light · italic-serif · chromatic-green) → Plain (light · display-heavy · cool-deep-ink-blue). Differs on display style and accent hue. Passes."*
+
+## Step 3 · Visual ruleset loaded
+
+`macrostructures.md` (Index-First), `component-cookbook.md` (sidebar-TOC archetype, prose-block), `typography.md` (Plain pairing — Inter Tight display-heavy + Bricolage wordmark + body sans), `color.md` (Plain palette — pure-white paper, near-neutral cool greys, deep ink-blue), `microinteractions.md` (single primitive: TOC active-section highlight on scroll), `anti-patterns.md`.
+
+## Step 4 · Hero enrichment
+
+> *"Enrichment: none. The page is a TOC + prose. A personal portfolio that builds a Three.js spinning name reads as overcompensating. Restraint is the credibility signal."*
+
+## Step 5 · Preview
+
+```markdown
+**Hallmark · v0.6.0**
+
+- **Macrostructure** · Index-First
+- **Theme** · Plain (pure-white paper #fff · Inter Tight display-heavy · deep ink-blue accent ~2%)
+- **Enrichment** · none (typography only — restraint is the credibility signal)
+- **Sections** · Sidebar TOC · 00 Index · 01 Now · 02 Years · 03 Writing · 04 Reach
+- **Motion** · TOC active-section highlight (1 primitive)
+- **Slop test** · 38 / 38 ✓
+- **Diversification** · differs from v1 (Long Document/Studio) on macrostructure + display style + accent hue
+```
+
+## Step 6 · Macrostructure stamp
+
+```
+/* Hallmark · macrostructure: Index-First · F4 sidebar-toc knobs: width=12rem, sticky=true, numbered=00-04
+ * theme: Plain · accent: deep-ink-blue ~2% (used as section-num + one rule)
+ * enrichment: none (typography only — restraint is the credibility signal)
+ * studied: no · context: skipped, inferred (personal / portfolio domain) · v0.6.0
+ */
+```
+
+## What changed vs v1
+
+- **Macro:** Long Document → Index-First. v1 was a salutation-led essay with a tabular work-sheet at the bottom; v2 leads with a numbered TOC on the left and structures the page as 5 sections that match how a hiring manager actually reads. Longer-form information density without losing the editorial feel.
+- **Theme:** Studio → Plain. Studio's italic Fraunces + cool grey paper + forest-green accent had warmth; Plain is pure-white #fff paper + Inter Tight display-heavy + deep ink-blue. The page reads more like a Klim Type Foundry "about" than a small studio's about.
+- **Voice:** v1 opened with "Hello, I'm Anya." (with a green highlighter mark behind "Anya"); v2 opens with the index list and the first section header `01 · NOW`.
+- **Section count:** v1 had ~3 narrative sections; v2 has 5 indexed sections, each tighter.
+
+## What stayed the same
+
+- Brand: Anya, software architect, Lisbon.
+- Enrichment: none on both. Typography only.
+- Slop test: 38 / 38 ✓.
+- Tabular work history (years × companies). v1 had it as a table at the bottom; v2 has it as section 02.

package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/index.html

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Anya Reis — software architect, Lisbon</title>
+  <meta name="description" content="Software architect. Distributed systems, payment graphs, eventually-consistent ledgers. Currently consulting. Reachable." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <aside class="toc" aria-label="Table of contents">
+      <p class="toc__brand">Anya Reis</p>
+      <span class="toc__role">Software architect · Lisbon</span>
+      <nav>
+        <ul class="toc__list">
+          <li><a href="#index"><span class="num">00</span><span>Index</span></a></li>
+          <li><a href="#now"><span class="num">01</span><span>Now</span></a></li>
+          <li><a href="#years"><span class="num">02</span><span>Years</span></a></li>
+          <li><a href="#writing"><span class="num">03</span><span>Writing</span></a></li>
+          <li><a href="#reach"><span class="num">04</span><span>Reach</span></a></li>
+        </ul>
+      </nav>
+      <div class="toc__meta">
+        <span>Lisbon · GMT+0</span>
+        <span>v. 26.05</span>
+        <span>set in Inter Tight</span>
+      </div>
+    </aside>
+
+    <article class="main">
+      <section class="section" id="index">
+        <p class="section__num">00 · Index</p>
+        <h1 class="section__head section__head--lede">A small, scannable index of who I am and what I do.</h1>
+        <div class="section__body">
+          <p>
+            I'm <strong>Anya Reis</strong>, a software architect working on distributed systems —
+            payment graphs, eventually-consistent ledgers, multi-region rollouts. Fifteen years in,
+            three companies long enough to ship something real, two short stops that taught me what
+            not to do, and one infra startup that didn't survive the 2023 rate hike.
+          </p>
+          <p>
+            This page is what's left when you remove the photo, the headline animation, and the
+            stack-of-stickers. Five sections. Read what's relevant.
+          </p>
+        </div>
+      </section>
+
+      <section class="section" id="now">
+        <p class="section__num">01 · Now</p>
+        <h2 class="section__head">Consulting, two clients at a time.</h2>
+        <div class="section__body">
+          <p>
+            I take on two engagements at once, three to nine months each. Mostly: <strong>scaling
+            payment systems past their first regional split</strong>, and <strong>extracting an old
+            monolith into a graph of services without losing the consistency guarantees</strong> the
+            business is actually relying on (which are usually fewer and stranger than the team
+            thinks).
+          </p>
+          <p>
+            I take on a third engagement only if it's pro bono — usually a small co-op or worker
+            collective in Portugal that needs a hand with infra. One month a year I write.
+          </p>
+        </div>
+      </section>
+
+      <section class="section" id="years">
+        <p class="section__num">02 · Years</p>
+        <h2 class="section__head">Where I've worked, in tabular form.</h2>
+        <div class="section__body">
+          <table class="years" aria-label="Work history">
+            <thead><tr><th>Years</th><th>Company</th><th>What</th></tr></thead>
+            <tbody>
+              <tr><td>2024 — now</td><td>Independent</td><td>Consulting on payments &amp; distributed systems</td></tr>
+              <tr><td>2021 — 2023</td><td>Knot Infrastructure</td><td>Co-founder · regional load shedding for fintechs (acq-hired, then closed)</td></tr>
+              <tr><td>2018 — 2021</td><td>Monzo</td><td>Senior staff eng · cards, then ledger</td></tr>
+              <tr><td>2015 — 2018</td><td>Stripe</td><td>Software engineer · radar, then payments rails</td></tr>
+              <tr><td>2012 — 2015</td><td>Flywire</td><td>Software engineer · cross-border FX settlement</td></tr>
+              <tr><td>2010 — 2012</td><td>Universidade do Porto</td><td>BSc + MSc CS · distributed systems track</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="section" id="writing">
+        <p class="section__num">03 · Writing</p>
+        <h2 class="section__head">Five pieces I'd point at first.</h2>
+        <div class="section__body">
+          <ul class="writing">
+            <li>
+              <span class="writing__date">2025-09</span>
+              <div>
+                <a href="#">Idempotency keys are the point. Everything else is a footnote.</a>
+                <span class="writing__sub">On building payment systems that survive partial failure.</span>
+              </div>
+            </li>
+            <li>
+              <span class="writing__date">2024-11</span>
+              <div>
+                <a href="#">Migrations: the org problem first, the schema problem second.</a>
+                <span class="writing__sub">A note from three years of monolith-to-services work.</span>
+              </div>
+            </li>
+            <li>
+              <span class="writing__date">2024-04</span>
+              <div>
+                <a href="#">Reconciliation is not a feature.</a>
+                <span class="writing__sub">Why every ledger team eventually rebuilds the closing job.</span>
+              </div>
+            </li>
+            <li>
+              <span class="writing__date">2023-08</span>
+              <div>
+                <a href="#">The distributed systems book I wish I'd read in 2012.</a>
+                <span class="writing__sub">Annotated bibliography, six entries, no Kleppmann jokes.</span>
+              </div>
+            </li>
+            <li>
+              <span class="writing__date">2022-02</span>
+              <div>
+                <a href="#">A senior engineer's last six months: what changes.</a>
+                <span class="writing__sub">On the shift from writing code to writing decisions.</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="section" id="reach">
+        <p class="section__num">04 · Reach</p>
+        <h2 class="section__head">The four places I read mail.</h2>
+        <div class="section__body">
+          <div class="contact">
+            <div class="contact__row">
+              <span class="contact__label">Email</span>
+              <span class="contact__value"><a href="mailto:hello@anya.dev">hello@anya.dev</a></span>
+            </div>
+            <div class="contact__row">
+              <span class="contact__label">GitHub</span>
+              <span class="contact__value"><a href="#">@anyareis</a></span>
+            </div>
+            <div class="contact__row">
+              <span class="contact__label">LinkedIn</span>
+              <span class="contact__value"><a href="#">/in/anyareis</a></span>
+            </div>
+            <div class="contact__row">
+              <span class="contact__label">Mastodon</span>
+              <span class="contact__value"><a href="#">@anya@hachyderm.io</a></span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+  </main>
+</body>
+</html>