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

visuals: technology marks, area icons, client wall, two diagrams

Browse Source 
Phase 7 (AUD-149), cheapest first.

- internal/brand: vendored Simple Icons path data (CC0) for 50 marks, looked up
  by the technology label the content already uses. Inline SVG, 16 px,
  currentColor, no request and no font. tools/gen_brand_icons.sh regenerates it.
- Six hand-drawn area icons replace the two-letter badges in the nav and on the
  landing cards; the evidence index gets a seventh.
- TechChips renders a mark where one exists and plain text where one does not,
  so a missing icon reads as a decision rather than a broken image.
- Client wall: 45 names as one typeface, one size, one grid of equal tiles, and
  the reason for no logo collage written on the page. No mark invented.
- Two diagrams, authored in-repo: homelab topology (platform-network.md) and
  the RAG pipeline (ai-rag-corpus.md), each referenced from the page it explains.
- Content images now carry intrinsic width/height, loading="lazy" and
  decoding="async" at render time; a site test fails the build if an image
  ships without them.
- Topbar is two rows at desktop: the area names plus marks no longer overlap the
  search form (Lighthouse target-size was failing at 1440 px).
- Favicon, so the browser stops requesting a missing /favicon.ico.

Satisfies: logos on every area page, area icons in nav and cards, two diagrams
referenced from their pages, images sized and lazy, Lighthouse >= 95 held.

(cherry picked from commit a473e4738a3751418c2097df2bcf0568fb6d0208)
This commit is contained in:
Sam Rolfe
2026-10-28 15:50:08 +11:00
parent 59580b6e45
commit a76882de67
18 changed files with 914 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
content/ai/l3/ai-rag-corpus.md
View File

@@ -14,7 +14,7 @@ last_verified: 2026-10-26
tags: [ai, retrieval, rag, artefact]
---
The query graph diagram and an ingest run log land later; this site's own corpus build is Phase 4.
Ingest and index are live; the diagram below shows both sides, and the query path is labelled as the design it is until Phase 5 ships.
## What the artefact is
@@ -24,6 +24,12 @@ The ingest and query path: documents are chunked and tagged with metadata at ing
Retrieval designed around payload filtering and a hard stop, plus the reasoning for moving off ChromaDB — heavier footprint and weaker filtering — recorded as a decision rather than a migration.
## The pipeline
![Two lanes. Ingest reads the content tree and estate notes, excludes secrets, chunks and tags every block, then embeds through the model gateway and upserts into the resume_corpus and resume_graph collections in Qdrant. The query lane runs classify, route, retrieve, compose and verify, and only composes from retrieved context.](../../assets/diagrams/rag-pipeline.svg)
The separating line is the design decision: metadata is written at ingest, so the query can filter by area, level and source before it pays for a similarity search. The fourth node is the hard stop — an answer that cannot be supported by what was retrieved is refused rather than improvised.
## When it is delivered
The query graph diagram in Phase 7. The live demonstration of the same pattern is this site's own retrieval, delivered in Phase 4 and Phase 5.
Ingest is delivered and measured (this site's own corpus, Phase 4). The query path is delivered in Phase 5; the streaming console is the visitor-facing half of it.

96
content/assets/diagrams/homelab-topology.svg Normal file
View File

@@ -0,0 +1,96 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1110" height="600" viewBox="0 0 1110 600" role="img" aria-labelledby="topoTitle topoDesc" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
<title id="topoTitle">Homelab topology: build host, runtime host and public edge</title>
<desc id="topoDesc">Three hosts. The build host produces a release; the runtime host runs the site, the vector store, a workflow worker and the model gateway, all bound to loopback; the public edge terminates TLS and is the only host reachable from the internet. All three join one private mesh, and backups run in three tiers.</desc>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0 0 10 5 0 10z" fill="#6ee7c6"/>
</marker>
</defs>
<g fill="#12161b" stroke="#33404d" stroke-width="1.5">
<rect x="30" y="104" width="310" height="268" rx="10"/>
<rect x="400" y="104" width="310" height="268" rx="10"/>
<rect x="770" y="104" width="310" height="268" rx="10"/>
</g>
<!-- internet -->
<g>
<rect x="810" y="24" width="230" height="46" rx="23" fill="#171d24" stroke="#33404d" stroke-width="1.5"/>
<text x="925" y="52" text-anchor="middle" font-size="13" fill="#b3bcc8">public internet · https :443</text>
<line x1="925" y1="70" x2="925" y2="100" stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)"/>
</g>
<!-- host headers -->
<g fill="#e6edf3" font-size="15" font-weight="600">
<text x="54" y="136">Build and development</text>
<text x="424" y="136">Runtime host</text>
<text x="794" y="136">Public edge</text>
</g>
<g fill="#8b98a8" font-size="12" font-family="ui-monospace, SFMono-Regular, Menlo, monospace">
<text x="54" y="156">.27 · 4-screen desktop</text>
<text x="424" y="156">.13 · 15 GiB · memory-bound</text>
<text x="794" y="156">.35 · Ubuntu · 2 vCPU</text>
</g>
<!-- build host items -->
<g fill="#b3bcc8" font-size="12.5">
<text x="54" y="192">· repository working copy</text>
<text x="54" y="219">· agent fleet, panes and approvals</text>
<text x="54" y="246">· content, diagrams and exhibits</text>
<text x="54" y="273">· release bundles and hashes</text>
</g>
<!-- runtime: loopback trust boundary -->
<rect x="416" y="172" width="278" height="150" rx="8" fill="none" stroke="#6ee7c6" stroke-width="1.2" stroke-dasharray="5 4"/>
<text x="430" y="192" font-size="11" fill="#6ee7c6" font-family="ui-monospace, SFMono-Regular, Menlo, monospace">bound to 127.0.0.1</text>
<g fill="#b3bcc8" font-size="12.5">
<text x="430" y="216">· site server :8096</text>
<text x="430" y="241">· Qdrant :6333 / :6334</text>
<text x="430" y="266">· Prefect worker</text>
<text x="430" y="291">· model gateway (shared)</text>
</g>
<text x="424" y="345" font-size="11.5" fill="#8b98a8">Every cap equals its swap cap. Nothing here listens publicly.</text>
<!-- edge host items -->
<g fill="#b3bcc8" font-size="12.5">
<text x="794" y="192">· Caddy terminates TLS</text>
<text x="794" y="219">· proxies to the runtime host</text>
<text x="794" y="246">· Gitea · Immich · Nextcloud</text>
<text x="794" y="273">· one public listener, many sites</text>
</g>
<!-- hand-off arrows -->
<line x1="340" y1="230" x2="396" y2="230" stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="368" y="218" text-anchor="middle" font-size="10.5" fill="#8b98a8">deploy</text>
<line x1="710" y1="230" x2="766" y2="230" stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="738" y="218" text-anchor="middle" font-size="10.5" fill="#8b98a8">proxy</text>
<!-- mesh band -->
<rect x="30" y="410" width="1050" height="56" rx="10" fill="#12161b" stroke="#33404d" stroke-width="1.2" stroke-dasharray="6 5"/>
<text x="555" y="436" text-anchor="middle" font-size="13" fill="#b3bcc8">private mesh · SSH on every host · remote access without an exposed port</text>
<text x="555" y="454" text-anchor="middle" font-size="11" fill="#8b98a8">no service is reachable because it happened to bind to every interface</text>
<g stroke="#33404d" stroke-width="1" stroke-dasharray="3 4">
<line x1="185" y1="372" x2="185" y2="410"/>
<line x1="555" y1="372" x2="555" y2="410"/>
<line x1="925" y1="372" x2="925" y2="410"/>
</g>
<!-- backup tiers -->
<text x="30" y="506" font-size="13" font-weight="600" fill="#e6edf3">Three backup tiers — each covers a different failure</text>
<g fill="#12161b" stroke="#33404d" stroke-width="1.2">
<rect x="30" y="522" width="330" height="52" rx="8"/>
<rect x="390" y="522" width="330" height="52" rx="8"/>
<rect x="750" y="522" width="330" height="52" rx="8"/>
</g>
<g fill="#b3bcc8" font-size="12.5">
<text x="50" y="545">local snapshots, on the machine</text>
<text x="410" y="545">a copy on another machine</text>
<text x="770" y="545">encrypted object storage, offsite</text>
</g>
<g fill="#8b98a8" font-size="11">
<text x="50" y="562">restore tested, runbook beside it</text>
<text x="410" y="562">over the private mesh</text>
<text x="770" y="562">retention stated in the job</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

106
content/assets/diagrams/rag-pipeline.svg Normal file
View File

@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1120" height="580" viewBox="0 0 1120 580" role="img" aria-labelledby="ragTitle ragDesc" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
<title id="ragTitle">Retrieval pipeline: ingest on top, four-node query path below</title>
<desc id="ragDesc">Ingest reads content and estate notes, excludes secrets, chunks and tags each block, embeds through the model gateway and upserts into two Qdrant collections on loopback. The query path classifies the question, routes it to an area, retrieves with a payload filter, composes an answer from the retrieved context only, and verifies that every citation resolves to a page.</desc>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0 0 10 5 0 10z" fill="#6ee7c6"/>
</marker>
<marker id="arrowDim" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0 0 10 5 0 10z" fill="#8b98a8"/>
</marker>
</defs>
<!-- ingest lane -->
<text x="30" y="42" font-size="14" font-weight="600" fill="#e6edf3">Ingest — one source of truth, one index</text>
<g fill="#12161b" stroke="#33404d" stroke-width="1.4">
<rect x="30" y="60" width="244" height="92" rx="9"/>
<rect x="302" y="60" width="244" height="92" rx="9"/>
<rect x="574" y="60" width="244" height="92" rx="9"/>
<rect x="846" y="60" width="244" height="92" rx="9"/>
</g>
<g fill="#e6edf3" font-size="13.5" font-weight="600">
<text x="48" y="86">Sources</text>
<text x="320" y="86">Normalise</text>
<text x="592" y="86">Chunk and tag</text>
<text x="864" y="86">Embed and upsert</text>
</g>
<g fill="#b3bcc8" font-size="12">
<text x="48" y="110">content/ Markdown</text>
<text x="48" y="129">estate notes</text>
<text x="48" y="148">platform guides</text>
<text x="320" y="110">front-matter parsed</text>
<text x="320" y="129">secrets and drafts</text>
<text x="320" y="148">excluded by rule</text>
<text x="592" y="110">blocks, not lines</text>
<text x="592" y="129">area · level · source</text>
<text x="592" y="148">title · tags</text>
<text x="864" y="110">model gateway only</text>
<text x="864" y="129">deterministic ids</text>
<text x="864" y="148">batched, resumable</text>
</g>
<g stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)">
<line x1="277" y1="106" x2="298" y2="106"/>
<line x1="549" y1="106" x2="570" y2="106"/>
<line x1="821" y1="106" x2="842" y2="106"/>
</g>
<line x1="968" y1="152" x2="968" y2="184" stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)"/>
<rect x="30" y="186" width="1060" height="62" rx="9" fill="#12161b" stroke="#6ee7c6" stroke-width="1.2" stroke-dasharray="5 4"/>
<text x="50" y="210" font-size="13" font-weight="600" fill="#e6edf3">Qdrant on 127.0.0.1</text>
<text x="50" y="231" font-size="12" fill="#b3bcc8">resume_corpus · one point per chunk resume_graph · one point per node and edge HNSW and payloads on disk · within a 400 MiB cap</text>
<text x="50" y="272" font-size="11.5" fill="#8b98a8">A sync run re-embeds only the documents whose content, model or chunker version changed.</text>
<!-- query lane -->
<text x="30" y="316" font-size="14" font-weight="600" fill="#e6edf3">Query</text>
<text x="108" y="316" font-size="12" fill="#8b98a8">— four graph nodes. It grows past four only with a written reason.</text>
<line x1="776" y1="248" x2="776" y2="352" stroke="#8b98a8" stroke-width="1.3" stroke-dasharray="4 4" marker-end="url(#arrowDim)"/>
<text x="788" y="330" font-size="11" fill="#8b98a8">payload-filtered search</text>
<g fill="#12161b" stroke="#33404d" stroke-width="1.4">
<rect x="30" y="360" width="196" height="112" rx="9"/>
<rect x="246" y="360" width="196" height="112" rx="9"/>
<rect x="462" y="360" width="196" height="112" rx="9"/>
<rect x="678" y="360" width="196" height="112" rx="9"/>
<rect x="894" y="360" width="196" height="112" rx="9"/>
</g>
<g font-size="10.5" fill="#6ee7c6" font-family="ui-monospace, SFMono-Regular, Menlo, monospace">
<text x="46" y="382">CLASSIFY</text>
<text x="262" y="382">ROUTE</text>
<text x="478" y="382">RETRIEVE</text>
<text x="694" y="382">COMPOSE</text>
<text x="910" y="382">VERIFY</text>
</g>
<g fill="#e6edf3" font-size="13" font-weight="600">
<text x="46" y="406">Read the question</text>
<text x="262" y="406">Pick the areas</text>
<text x="478" y="406">Find the evidence</text>
<text x="694" y="406">Answer from it</text>
<text x="910" y="406">Check citations</text>
</g>
<g fill="#b3bcc8" font-size="11.5">
<text x="46" y="430">intent · injection</text>
<text x="46" y="448">off-topic · PII</text>
<text x="262" y="430">which pages can</text>
<text x="262" y="448">answer this</text>
<text x="478" y="430">vector + keyword</text>
<text x="478" y="448">ranked, top five</text>
<text x="694" y="430">context only</text>
<text x="694" y="448">no outside claims</text>
<text x="910" y="430">every claim maps</text>
<text x="910" y="448">to a real page</text>
</g>
<g stroke="#6ee7c6" stroke-width="1.5" marker-end="url(#arrow)">
<line x1="227" y1="416" x2="242" y2="416"/>
<line x1="443" y1="416" x2="458" y2="416"/>
<line x1="659" y1="416" x2="674" y2="416"/>
<line x1="875" y1="416" x2="890" y2="416"/>
</g>
<text x="30" y="500" font-size="12" fill="#b3bcc8">A refusal is a real outcome: an off-topic question, an injection attempt or a request over the cost cap stops at the first node with zero model spend.</text>
<text x="30" y="526" font-size="11.5" fill="#8b98a8">Ingest runs today. The query path is the Phase 5 design; until it ships, every page is pre-rendered and needs no model.</text>
<text x="30" y="550" font-size="11.5" fill="#8b98a8">The public AI has no tools, no filesystem, no network fetch and no memory between visitors — architectural, not a prompt instruction.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

59
content/history/l3/history-client-wall.md
View File

@@ -14,15 +14,66 @@ last_verified: 2026-10-26
tags: [history, clients, artefact]
---
The names are final; the layout, logo set and typography land in Phase 7 (the logo set is explicitly a Phase 7 decision).
The names are final. The treatment is deliberate: one typeface, one size, one grid, and no logo collage — see *Why there are no logos here* below.
## The agencies
Clemenger · Agency Republic · Brand Union · Jackpot Joy · Bryce Ford · RMG Connect · Sporting Index · Adventis Digital · Trinity Street · Inferno · SAS Design · Ogilvy · Wunderman · Illumina · Barkers · Mook · Pearsons · Penguin · Draft London · Behan Consulting · MCM Entertainment · Carsales
<div class="client-wall" role="list" aria-label="Agencies">
<div class="client-tile" role="listitem"><span class="client-name">Clemenger</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Agency Republic</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Brand Union</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Jackpot Joy</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Bryce Ford</span></div>
<div class="client-tile" role="listitem"><span class="client-name">RMG Connect</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Sporting Index</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Adventis Digital</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Trinity Street</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Inferno</span></div>
<div class="client-tile" role="listitem"><span class="client-name">SAS Design</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Ogilvy</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Wunderman</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Illumina</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Barkers</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Mook</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Pearsons</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Penguin</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Draft London</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Behan Consulting</span></div>
<div class="client-tile" role="listitem"><span class="client-name">MCM Entertainment</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Carsales</span></div>
</div>
## The brands
Carlton Draught · Diageo · KPMG · McDonald's · Accenture · BBC National Archive · Bank of America · War of the Worlds · Madonna (Hard Candy) · PlayStation · HSBC · DHL · Reuters · Volvic · AutoCAD · Channel 4 · Pearsons · Shell · Stella Artois · Baileys Irish Cream · Parkgate Homes · Carlton Dry · Cottees Cordial
<div class="client-wall" role="list" aria-label="Brands">
<div class="client-tile" role="listitem"><span class="client-name">Carlton Draught</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Diageo</span></div>
<div class="client-tile" role="listitem"><span class="client-name">KPMG</span></div>
<div class="client-tile" role="listitem"><span class="client-name">McDonald's</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Accenture</span></div>
<div class="client-tile" role="listitem"><span class="client-name">BBC National Archive</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Bank of America</span></div>
<div class="client-tile" role="listitem"><span class="client-name">War of the Worlds</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Madonna (Hard Candy)</span></div>
<div class="client-tile" role="listitem"><span class="client-name">PlayStation</span></div>
<div class="client-tile" role="listitem"><span class="client-name">HSBC</span></div>
<div class="client-tile" role="listitem"><span class="client-name">DHL</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Reuters</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Volvic</span></div>
<div class="client-tile" role="listitem"><span class="client-name">AutoCAD</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Channel 4</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Pearsons</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Shell</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Stella Artois</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Baileys Irish Cream</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Parkgate Homes</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Carlton Dry</span></div>
<div class="client-tile" role="listitem"><span class="client-name">Cottees Cordial</span></div>
</div>
## Why there are no logos here
A wall of mixed marks — some full colour, some monochrome, some missing — reads as broken, and the eight marks that exist for these names are not the eight the work is best remembered by. One typeface, one size and one grid says the same thing more clearly, and it sits beside the technical pages without competing with them. A mark is added only when it is the client's official mark and Sam has approved its use; none has been invented.
## Corrections carried into this list
@@ -36,4 +87,4 @@ The summary material said twenty-three agencies. The recovered, verified list ho
## When it is delivered
Phase 7 for the visual treatment. Names and one-line descriptions are approved as recovered and corrected.
Delivered as a body of names and descriptions, and presented as a typographic wall from Phase 7. Names and one-line descriptions are approved as recovered and corrected.

10
content/platform/l3/platform-network.md
View File

@@ -14,7 +14,7 @@ last_verified: 2026-10-26
tags: [platform, networking, security, artefact]
---
The topology diagram lands in Phase 7 with addresses and hostnames redacted.
The diagram below shows three hosts and one trust boundary; internal addresses, hostnames and public DNS names are generalised, not published.
## What the artefact is
@@ -24,6 +24,12 @@ The layout: hosts on a private mesh for remote access, SSH on every machine, a p
Security posture chosen rather than inherited: no service is reachable because it happened to bind to all interfaces, and there is exactly one place where the outside world meets the estate.
## The layout
![Three hosts side by side. A build workstation hands a release to the runtime host, which runs the site, the vector store, a workflow worker and the model gateway inside a loopback trust boundary; the public edge terminates TLS and is the only host the internet can reach. All three join one private mesh, and backups run in three tiers.](../../assets/diagrams/homelab-topology.svg)
Read it left to right: work is built on one machine, runs on a memory-bound machine with every service bound to loopback, and is published by a single edge that terminates TLS. The dashed boundary is the point of the whole arrangement — crossing it is a deliberate change to the edge configuration, not a side effect of starting a container. Below both, the mesh carries remote access and the second backup tier, so neither depends on a port being open.
## When it is delivered
Phase 7. Internal addressing, hostnames and public DNS names are excluded from publication by the redaction pass.
Delivered. Internal addressing, hostnames and public DNS names are excluded from publication by the redaction pass.