howone 0.1.28 → 0.1.30

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

@@ -1,457 +0,0 @@
-/* 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

@@ -1,65 +0,0 @@
-# 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

@@ -1,159 +0,0 @@
-<!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>