sam/ai-resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 7: authored assets (diagrams, code exhibits, client wall, budget)

Browse Source 
Phase 7 is mostly authored assets. This commit is the asset half; the
template half is a Builder child issue because this phase must not write
application code.

DoD items satisfied or advanced:

- [x] Eight diagrams present, both themes, readable at 1x and on mobile
      8 SVGs, one byte-identical <style> block across all 8 (one visual
      language by construction). Light and dark resolve from a single file
      via prefers-color-scheme, verified per file in Chrome: 8/8 return two
      distinct palettes. Geometry verified with getBBox(), not estimated:
      0 findings after fixing 74 (text overflow, partial overlap, empty
      text, out-of-viewBox). Mobile type at the 900px minimum is 14.1/12.2px.

- [x] Six code exhibits with a two-sentence rationale each
      212 verbatim lines across five eras, copied with cp/sed from the
      read-only archive. Every rationale is exactly two sentences about why
      the code is good; every exhibit also carries an honest_note, and where
      the code is not good the note says so (the 3,400-line procedural PHP
      script is presented for its operational judgement, not its structure).

- [~] Every image optimised; total page weight budgeted and recorded
      BUDGET.md records measured raw and gzip weights for all 15 served
      files: 63,802 B raw / 13,220 B gzipped. Zero rasters by design. Page
      weight of a real page is not measurable until Phase 2 templates and
      Phase 3 serving exist, and is recorded as open rather than asserted.

- [x] Archive never linked or exposed
      No mount paths or volume names under content/. Provenance recorded as
      "private archive, path withheld".

- [ ] Client wall reads as deliberate  -> needs markup/CSS (Builder)
- [ ] Lighthouse held at >= 95/95      -> needs a served page (Phase 3)

Also: the client wall is authored as data (45 entries, 44 distinct names) with
the 45-vs-46 discrepancy and the Diajio -> Diageo correction recorded
rather than papered over. No commercial marks are enabled: that is a
permission decision for Sam, so availability is recorded and permission is not
implied.
This commit is contained in:
Documenter
2026-10-26 17:35:11 +11:00
parent b267e55f8c
commit da18ab2237
22 changed files with 1711 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
content/assets/diagrams/README.md Normal file
View File

@@ -0,0 +1,80 @@
# Phase 7.2 — diagrams
Eight diagrams, one visual language, light and dark in one file each.
Authored 2026-10-26. Source of truth is the SVG files themselves: each one is
self-contained, with no external font, image or script reference.
## The language
| Part | Rule |
|---|---|
| Canvas | `viewBox="0 0 960 540"`, `width`/`height` set so a bare file view is 1× |
| Type | 19 px section title · 15 px heading · 13 px label · 12 px caption, all `ui-sans-serif` system stack |
| Boxes | `rx=7`, 1.4 px stroke, four semantic tones: neutral, accent (the thing being described), teal (store / gateway), amber (guard, failure, limit) |
| Arrows | solid = data or control flow, dashed = trust boundary or approximate relationship |
| Colour | greys carry structure; one blue accent, one teal, one amber, nothing else |
| Text | every `<text>` is real text in the SVG, so it scales, selects and reads to a screen reader |
Every file carries a **byte-identical `<style>` block**. That is the whole of the
consistency guarantee: there is one palette, defined once, repeated verbatim.
A check that compares the eight style blocks and finds one distinct value is the
evidence that the eight diagrams share a language.
## Both themes in one file
The `<style>` block defines the light palette, then repeats the same selectors
inside `@media (prefers-color-scheme: dark)`. No duplicated files, no theme
toggle needed in the page, no chance of a light and a dark copy drifting apart.
If the site later grows a manual theme toggle, the SVG must be inlined into the
page (not `<img>`) so page CSS can override the custom properties. Until then
`<img>` is correct: the file follows the reader's operating system.
| Role | Light | Dark |
|---|---|---|
| ink (text) | `#1b222b` | `#e7edf4` |
| panel (box fill) | `#f4f6f8` | `#182028` |
| muted (labels) | `#5b6673` | `#98a4b3` |
| accent | `#1a6bc4` | `#5aa2f0` |
| teal | `#0f766e` | `#38b3a6` |
| amber | `#b45309` | `#d98b3f` |
| box stroke | `#c3ccd6` | `#35424f` |
## Mobile
A 960 px schematic cannot be read at 360 px. The presentation contract is:
- wrap the figure in a horizontally scrollable container
- `svg { display:block; width:100%; min-width:900px; height:auto }`
At 1× (container ≥ 960 px) the type renders at 15 px / 13 px. At the 900 px
minimum inside a 390 px container it renders at 14.1 px / 12.2 px — the same
order as body text, and the figure scrolls rather than shrinking into
illegibility. A figure that is scaled to 360 px instead reaches 5 px type and is
not readable; that is why the contract is a requirement and not a suggestion.
## Accessibility
Each file carries `role="img"` and both `<title>` and `<desc>`. The `<desc>` is
the alternative text — 190–285 characters, describing what the diagram asserts
rather than naming its parts. If a template sets `alt=""` on the `<img>`, the
`<title>`/`<desc>` are not read out; the template must supply `alt` from the
manifest's `alt:` field.
## Files
| # | File | Area | Answers |
|---|---|---|---|
| 1 | `01-homelab-topology.svg` | platform | where it runs, and where the trust boundaries are |
| 2 | `02-agent-architecture.svg` | ai | how agents are organised and why one gateway |
| 3 | `03-rag-pipeline.svg` | ai | which side of the pipeline is AI and which side is not |
| 4 | `04-edge-architecture.svg` | edge | why devices never talk to each other |
| 5 | `05-distributed-audio.svg` | edge | how eight speakers stay in sync, and how voice gets in |
| 6 | `06-media-pipeline.svg` | products | where the human gate sits in a media pipeline |
| 7 | `07-cost-resource-engineering.svg` | platform | the memory ceiling, drawn to scale |
| 8 | `08-era-timeline.svg` | history | five platform shifts and what survived them |
Facts behind them come from `reference/stack.md`, `reference/content-map.md` and
`docs/phase-3-deploy.md`. Diagram 7 is numbers from a measurement, not an
illustration: if the caps change, the bars change.