Portfolio web primitives

dropzone · v0.1.0

Drag-and-drop file capture with localStorage persistence + JSON export. Pure client-side; no server roundtrip.

<link rel="stylesheet" href="https://assets.gf.cx/dropzone/dropzone.css">
<script src="https://assets.gf.cx/dropzone/dropzone.js" defer></script>

Docs: README · Source: github

media · v0.1.0

Portfolio-wide sizing defaults for inline <video> / <img> / <audio> inside article. One place to tune the visual proportion across every surface.

<link rel="stylesheet" href="https://assets.gf.cx/media/media.css">

Docs: README · Source: github

cards · v0.1.0

Three card variants (--system, --stat, --tile) + .card-grid layout. Replaces hand-rolled .system / .stat / .cell CSS across portfolio surfaces with one canonical primitive. Grayscale-thumb-to-color hover baked in. CSS-custom-property theming.

<link rel="stylesheet" href="https://assets.gf.cx/cards/cards.css">

Docs: README · Source: github

status-pill · v0.1.0

Lifecycle-state badge (--neutral, --alert, --resolved, --service) that sits under a record title. Optionally driven from one JSON state-vocabulary — add a state once, not per row. Themed from the active design-system palette; the demo page carries a live colour swatch reference.

<link rel="stylesheet" href="https://assets.gf.cx/status-pill/status-pill.css">
<script src="https://assets.gf.cx/status-pill/status-pill.js" defer></script>

Demo + palette: status-pill · Docs: README · Source: github

op-panel · v0.1.0

Collapsible operational status panel: a roll-up of card--stat tiles at rest, expanding to a sortable job table. One shared sort segment (failing-first / A–Z / recent) and a list↔cards view toggle drive every panel at once, from [data-panel] / [data-sortlist] / data-rank hooks. Powers every panel on status.gf.cx.

<link rel="stylesheet" href="https://assets.gf.cx/op-panel/op-panel.css">
<script src="https://assets.gf.cx/op-panel/op-panel.js" defer></script>

Demo: op-panel · Docs: README · Source: github

manifest-diff · v0.1.0

The "before/after delta + what changed verdict" UI. A one-sentence .verdict callout that decodes a jump (growth = red edge, shrink = green edge) over a signed-Δ comparison table with per-row .tag.new / .tag.gone markers. CSS-only, namespaced under .manifest-diff. Lifted from the R2 file-type manifest pages on status.gf.cx.

<link rel="stylesheet" href="https://assets.gf.cx/manifest-diff/manifest-diff.css">

Demo: manifest-diff · Docs: README · Source: github

article-hero · v0.1.0

A framed lead image for an article — classical public-domain art or a NASA plate, never stock — with a mono attribution caption (artist · source · public domain). Self-hosted to R2, never hotlinked. .band crops to a uniform 16:7 banner. Fed by the classical_art_fetch.py toolkit script (Met + NASA, both keyless).

<link rel="stylesheet" href="https://assets.gf.cx/article-hero/article-hero.css">

Demo: article-hero · Docs: README · Source: github

format-chips · v0.1.0

A row of small mono pills that hang off a reference link — every onward route to the cited thing as compact tappable chips. The BOOK row (BUY · LIBBY · PDF · EPUB) and media rows (LISTEN · CLIP · WATCH) are the same primitive, different vocabulary. Two tiers: .fmt (accent) and .fmt.alt (clay). Promoted from the growth.gf.cx teardowns.

<link rel="stylesheet" href="https://assets.gf.cx/format-chips/format-chips.css">

Demo: format-chips · Docs: README · Source: github

art-library · v0.1.0

A curated, pre-vetted shelf of public-domain images — classical fine-art (Met, CC0) and NASA / deep-space plates, self-hosted to R2, never stock. Browse the filterable gallery (art · nasa · space), then one-click copy the <figure> for any tile straight into an article. Seeded and grown by the art_library_seed.py toolkit script; manifest at /art-library/library.json. Pairs with article-hero.

Gallery: art-library · Manifest: library.json · Source: github

made-with · v0.1.0

The shared "Built with — how this page ships" provenance footer, rendered from a placeholder. One import, the wording + styling live in one file — change it once and every page across the portfolio updates. Ends hand-copied-footer drift (the favicon-control-plane model applied to provenance).

<script src="https://assets.gf.cx/made-with/made-with.js" defer></script>

Demo: made-with · Docs: README · Source: github

nav · v0.1.0

Shared cross-surface header breadcrumb that links the connected gf.cx surfaces together. Destinations live in one ITEMS array — change them here, every surface updates. Drop the placeholder as the first child of the content wrapper; data-current orients the reader (both destinations always render as links).

<div data-site-nav data-current="status"></div>
<script src="https://assets.gf.cx/nav/nav.js" defer></script>

Docs: README · Source: github

back-to-top · v0.1.0

A neat ↑ top jump affordance, injected at the bottom (above the made-with footer when one is present). Self-injecting: shows only on long pages at runtime (≥ 2.2× viewport & ≥ 1400px), so it's safe to drop into every page. No markup, no per-page CSS — themes off local CSS vars.

<script src="https://assets.gf.cx/back-to-top/back-to-top.js" defer></script>

Docs: README · Source: github

modal · v0.1.0

A thumbnail that earns a click opens one shared enlargement modal (lightbox) — image or inline <svg> — with a caption, closable by ×, backdrop, or Escape. The overlay DOM injects itself on demand, so there's no per-page markup to paste; mark a thumbnail data-modal and it's keyboard-native. Themes off local CSS vars. Lifted from the bespoke modal on srvc.gf.cx/transit/.

<link rel="stylesheet" href="https://assets.gf.cx/modal/modal.css">
<script src="https://assets.gf.cx/modal/modal.js" defer></script>

Docs: README · Pattern: patterns.gf.cx · Source: github

map-dossier · v0.1.0

The "good-map" pattern for placing a facility in a location dossier — a three-beat sequence: aerial → close-up hover → street-view. Three composable primitives: .rollimg (mouse-over reveal — for maps, start on the close-up and hover out to the wider context), .svfacade (click-to-load embed facade — defer the third-party until intent), and .embed3d (always-on inline embed when the embed is the point). The hover image must be the exact pixel dimensions of the base so the overlay lands pixel-perfect. Themes off local CSS vars. Lifted from srvc.gf.cx/transit/.

<link rel="stylesheet" href="https://assets.gf.cx/map-dossier/map-dossier.css">
<script src="https://assets.gf.cx/map-dossier/map-dossier.js" defer></script>

Docs: README · Notes: kb.gf.cx · Source: github

maintenance-timer · v0.1.0

The recurring-interval cousin of date-counter. Give it a last-done date + a cadence (6mo, 90d, 1y…) and it renders the next-due date, a live countdown, a due/overdue status pill, and a progress bar of the interval consumed — so a recurring chore counts itself down and no operator does "when's it next due?" math. Optional data-store adds a one-tap "✓ Mark done today" button whose only job is to tell you the data-last="…" line to commit (the git-tracked page stays the source of truth). Self-contained + prefers-color-scheme-aware. First use: the 6-month descale cadence on the DeLonghi EC9255M page.

<link rel="stylesheet" href="https://assets.gf.cx/maintenance-timer/maintenance-timer.css">
<script src="https://assets.gf.cx/maintenance-timer/maintenance-timer.js" defer></script>

Docs: README · Source: github