jwright
8d955aa802
02 Capabilities becomes a 4-col bento (Edge AI 2x2 flagship w/ magenta corner radial, Platform wide, magenta-flavoured security tile, Observability row-completer) driven by span/flavor fields in skills.ts. 03 Selected Work becomes dossier cards: house-style SVG thumbnails (per-project motif via DossierThumb), DOSSIER/00N corner tags, 'the argument' line from the outcome field, chip tags, mono meta footer. 04 Writing cards gain the security-series badge (data/series.ts) and sit three across. Section numbers glow cyan; a circuit divider (gradient hairlines + two diamonds) closes the hero. Footer opens with the GitOps receipt - git sha + build date baked at build time via lib/build-info.ts, zero runtime calls.
84 lines
3.5 KiB
Plaintext
84 lines
3.5 KiB
Plaintext
---
|
|
// House-style mini-diagram for a dossier card thumbnail. Keyed by the project's
|
|
// `diagram` frontmatter; each motif is a tiny node/line sketch in the board palette.
|
|
// Pure SVG, pulsing cores only (reduced-motion turns them off).
|
|
interface Props {
|
|
kind?: string;
|
|
}
|
|
const { kind = "generic" } = Astro.props;
|
|
---
|
|
|
|
<svg viewBox="0 0 400 180" aria-hidden="true" class="thumb">
|
|
{kind === "edge-ai" ? (
|
|
<>
|
|
{/* GPU chip feeding a rack of stores */}
|
|
<line x1="70" y1="90" x2="330" y2="50" class="ln ln--c" />
|
|
<line x1="70" y1="90" x2="330" y2="90" class="ln ln--c" />
|
|
<line x1="70" y1="90" x2="330" y2="130" class="ln ln--m" />
|
|
<rect x="46" y="66" width="48" height="48" rx="6" class="nd nd--c" />
|
|
<text x="70" y="95" text-anchor="middle" class="tx">GPU</text>
|
|
<rect x="314" y="36" width="32" height="28" rx="4" class="nd nd--dim" />
|
|
<rect x="314" y="76" width="32" height="28" rx="4" class="nd nd--dim" />
|
|
<rect x="314" y="116" width="32" height="28" rx="4" class="nd nd--m" />
|
|
<circle cx="200" cy="70" r="2.5" class="dot dot--c pulse" />
|
|
<circle cx="200" cy="110" r="2.5" class="dot dot--m pulse-slow" />
|
|
</>
|
|
) : kind === "homelab" ? (
|
|
<>
|
|
{/* hub and spokes — the fleet */}
|
|
<line x1="200" y1="90" x2="90" y2="45" class="ln ln--c" />
|
|
<line x1="200" y1="90" x2="90" y2="135" class="ln ln--c" />
|
|
<line x1="200" y1="90" x2="310" y2="45" class="ln ln--m" />
|
|
<line x1="200" y1="90" x2="310" y2="135" class="ln ln--m" />
|
|
<circle cx="200" cy="90" r="24" class="hub" />
|
|
<circle cx="200" cy="90" r="3" class="dot dot--c pulse" />
|
|
<circle cx="90" cy="45" r="12" class="nd nd--c" />
|
|
<circle cx="90" cy="135" r="12" class="nd nd--c" />
|
|
<circle cx="310" cy="45" r="12" class="nd nd--m" />
|
|
<circle cx="310" cy="135" r="12" class="nd nd--m" />
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* pipeline — commits flowing through gates to a fleet */}
|
|
<line x1="40" y1="90" x2="360" y2="90" class="ln ln--c" />
|
|
<rect x="88" y="70" width="40" height="40" rx="5" class="nd nd--c" />
|
|
<rect x="180" y="70" width="40" height="40" rx="5" class="nd nd--dim" />
|
|
<rect x="272" y="70" width="40" height="40" rx="5" class="nd nd--m" />
|
|
<circle cx="60" cy="90" r="2.5" class="dot dot--c pulse" />
|
|
<circle cx="156" cy="90" r="2.5" class="dot dot--c pulse-slow" />
|
|
<circle cx="248" cy="90" r="2.5" class="dot dot--m pulse" />
|
|
<circle cx="340" cy="90" r="2.5" class="dot dot--m pulse-slow" />
|
|
</>
|
|
)}
|
|
</svg>
|
|
|
|
<style>
|
|
.thumb {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.ln {
|
|
stroke-width: 1;
|
|
}
|
|
.ln--c { stroke: rgba(63, 186, 245, 0.3); }
|
|
.ln--m { stroke: rgba(232, 121, 249, 0.3); }
|
|
.nd { fill: var(--panel-solid); stroke-width: 1.5; }
|
|
.nd--c { stroke: var(--accent); }
|
|
.nd--m { stroke: rgba(232, 121, 249, 0.5); stroke-width: 1; }
|
|
.nd--dim { stroke: rgba(126, 139, 161, 0.5); stroke-width: 1; }
|
|
.hub { fill: rgba(63, 186, 245, 0.06); stroke: var(--accent); stroke-width: 1.5; }
|
|
.tx { fill: var(--accent); font-family: var(--font-mono); font-size: 10px; }
|
|
.dot--c { fill: var(--accent); }
|
|
.dot--m { fill: var(--accent-2); }
|
|
.pulse { animation: thumbPulse 2.4s ease-in-out infinite; }
|
|
.pulse-slow { animation: thumbPulse 3.4s ease-in-out infinite; }
|
|
@keyframes thumbPulse {
|
|
0%, 100% { opacity: 0.35; }
|
|
50% { opacity: 1; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pulse, .pulse-slow { animation: none; }
|
|
}
|
|
</style>
|