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

6
internal/web/static/favicon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<rect width="32" height="32" rx="7" fill="#0b0d10"/>
<rect x="0.75" y="0.75" width="30.5" height="30.5" rx="6.25" fill="none" stroke="#33404d" stroke-width="1.5"/>
<path d="M11.2 22.2c-1.9-.5-3-1.7-3-3.5h2.6c0 .9.5 1.4 1.5 1.6.9.2 1.6 0 1.8-.6.2-.6-.2-1-.9-1.2l-2-.4c-2-.4-3-1.4-3-3 0-2 1.6-3.3 4.1-3.4v-1.9h1.9v1.9c2 .2 3.1 1.4 3.2 3.2h-2.6c-.1-.8-.6-1.2-1.4-1.3-.8-.1-1.4.2-1.4.7-.1.5.3.8 1 .9l2 .4c2 .4 3 1.5 3 3.2 0 2.1-1.7 3.4-4.2 3.5v1.9h-1.9z" fill="#6ee7c6"/>
<path d="M19.6 10.3h4.9c1.9 0 3.1 1.1 3.1 2.8 0 1.1-.5 1.9-1.4 2.3 1.1.3 1.7 1.2 1.7 2.5v1.9h-2.6v-1.6c0-.9-.4-1.3-1.3-1.3h-1.8v-2.3h1.5c.7 0 1.1-.3 1.1-.9s-.4-.9-1.1-.9h-1.5z" fill="#b3bcc8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 761 B

124
internal/web/static/site.css
View File

@@ -151,13 +151,22 @@ samp {
/* ---- chrome ------------------------------------------------------------ */
/*
Two rows: the name and the search on the first, the six areas plus the index
on the second. The area names are long and the marks made them longer, so a
single row either overlapped the search form or scrolled the nav out of
reach. Two rows give every link a real target at every width.
*/
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: var(--nav-w) minmax(0, 1fr) auto;
gap: var(--pad);
grid-template-columns: var(--nav-w) minmax(0, 1fr);
grid-template-areas:
"brand search"
"nav nav";
gap: 0.5rem var(--pad);
align-items: center;
padding: 0.7rem var(--pad);
background: color-mix(in srgb, var(--bg) 92%, transparent);
@@ -165,6 +174,21 @@ samp {
border-bottom: 1px solid var(--line);
}
.brand {
grid-area: brand;
}
.nav-search {
grid-area: search;
justify-self: end;
width: min(28rem, 100%);
}
.nav-rail {
grid-area: nav;
min-width: 0;
}
.brand {
display: flex;
align-items: center;
@@ -241,17 +265,25 @@ samp {
box-shadow: inset 0 -2px 0 var(--accent);
}
.nav-gutter {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
/* The area mark replaces the old two-letter badge. It is decoration; the nav
label beside it is the accessible name. */
.nav-mark {
display: inline-flex;
align-items: center;
color: var(--text-muted);
}
.nav-current .nav-gutter {
.nav-link:hover .nav-mark,
.nav-current .nav-mark {
color: var(--accent);
}
.area-icon {
display: block;
width: 20px;
height: 20px;
}
/* ---- shell ------------------------------------------------------------- */
.shell {
@@ -564,8 +596,9 @@ samp {
color: var(--text-muted);
}
.pillar-gutter {
font-family: var(--font-mono);
.pillar-mark {
display: inline-flex;
align-items: center;
color: var(--accent);
}
@@ -600,6 +633,11 @@ samp {
color: var(--text-muted);
}
.pillar-go {
font-weight: 600;
border-bottom: 0;
}
.pillar-count {
font-family: var(--font-mono);
font-size: 0.74rem;
@@ -644,8 +682,11 @@ samp {
list-style: none;
}
.tech li {
padding: 0.12rem 0.45rem;
.tech-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.14rem 0.45rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
@@ -653,6 +694,67 @@ samp {
color: var(--text-dim);
}
/* Monochrome and currentColor, so the chip and the mark share one colour and
no icon ever adds a request. */
.tech-mark {
display: block;
flex: none;
width: 16px;
height: 16px;
fill: currentColor;
opacity: 0.85;
}
.tech-chip:hover {
border-color: var(--line-strong);
color: var(--text);
}
.tech-chip:hover .tech-mark {
opacity: 1;
}
/* ---- client wall ------------------------------------------------------- */
/*
One typeface, one size, one tile. Mixed brand marks would read as broken;
a consistent grid reads as deliberate. Tiles are the same height whatever
the length of the name, so the wall never looks like a failed image load.
*/
.client-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
gap: 1px;
margin: 1rem 0 1.6rem;
padding: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
list-style: none;
}
.client-tile {
display: flex;
align-items: center;
justify-content: center;
min-height: 4.2rem;
padding: 0.6rem 0.75rem;
background: var(--surface);
text-align: center;
}
.client-name {
font-size: 0.88rem;
line-height: 1.25;
letter-spacing: 0.01em;
color: var(--text-dim);
text-wrap: balance;
}
.client-tile:hover .client-name {
color: var(--text);
}
.doc-head {
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--line);

19
internal/web/templates/components.templ
View File

@@ -17,6 +17,7 @@ templ Layout(v LayoutView) {
<title>{ v.Title }</title>
<meta name="description" content={ v.Description }/>
<meta name="color-scheme" content="dark"/>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
<link rel="stylesheet" href="/static/site.css"/>
<link rel="stylesheet" href="/static/chroma.css"/>
<script src="/static/htmx.min.js" defer></script>
@@ -68,7 +69,8 @@ templ Nav(items []NavItem, current string) {
templ navLinks(items []NavItem, current string) {
for _, it := range items {
<a href={ templ.SafeURL(it.Href) } class={ navClass(it) } aria-current={ currentAttr(it) }>
<span class="nav-gutter" aria-hidden="true">{ it.Gutter }</span>
<span class="nav-mark">@AreaIcon(it.Area)
</span>
<span class="nav-title">{ it.Title }</span>
</a>
}
@@ -76,7 +78,8 @@ templ navLinks(items []NavItem, current string) {
templ evidenceLink(current string) {
<a href="/evidence/" class={ navClassFor(current == "evidence") }>
<span class="nav-gutter" aria-hidden="true">EV</span>
<span class="nav-mark">@AreaIcon("evidence")
</span>
<span class="nav-title">Evidence index</span>
</a>
}
@@ -178,7 +181,8 @@ templ FragmentView(f stage.Fragment) {
</header>
switch f.Kind {
case stage.KindText:
<div class="frag-text">@f.Body</div>
<div class="frag-text">@f.Body
</div>
case stage.KindCode:
if f.Code != nil {
<figure class="code">
@@ -263,7 +267,8 @@ templ EvidenceTable(rows []EvidenceRow) {
templ PillarCard(c PillarCardView) {
<article class="pillar">
<p class="pillar-kicker">
<span class="pillar-gutter" aria-hidden="true">{ c.Area.Gutter }</span>
<span class="pillar-mark">@AreaIcon(c.Area.Key)
</span>
if c.Area.Role != "" {
<span>{ c.Area.Role }</span>
}
@@ -283,11 +288,7 @@ templ PillarCard(c PillarCardView) {
</ul>
}
if len(c.Tech) > 0 {
<ul class="tech" aria-label="Technology">
for _, t := range c.Tech {
<li>{ t }</li>
}
</ul>
@TechChips(c.Tech)
}
<p class="pillar-foot">
<span class="pillar-count">{ strconv.Itoa(c.Pages) } pages</span>

67
internal/web/templates/icons.templ Normal file
View File

@@ -0,0 +1,67 @@
package templates
import "gitea.lab.audasmedia.com.au/sam/ai-resume/internal/brand"
// AreaIcon is the mark for one area of the site. The six marks are drawn here,
// geometrically, in one visual language: 24x24, 1.6 px stroke, round caps, no
// fill, colour inherited from the text. They are decoration only — the label
// beside them carries the meaning — so every one is aria-hidden.
//
// "evidence" is the seventh mark: the index, not an area.
templ AreaIcon(area string) {
<svg class="area-icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
switch area {
case "ai":
<circle cx="5.5" cy="6.5" r="2.5"/>
<circle cx="18.5" cy="6.5" r="2.5"/>
<circle cx="12" cy="17.5" r="2.5"/>
<path d="M8 6.5h8"/>
<path d="M6.7 8.8 10.8 15.6"/>
<path d="M17.3 8.8 13.2 15.6"/>
case "platform":
<rect x="3.5" y="3.5" width="17" height="4.6" rx="1.5"/>
<rect x="3.5" y="9.7" width="17" height="4.6" rx="1.5"/>
<rect x="3.5" y="15.9" width="17" height="4.6" rx="1.5"/>
<path d="M7 5.8h2M7 12h2M7 18.2h2"/>
case "edge":
<rect x="2.5" y="13" width="9" height="8" rx="1.5"/>
<circle cx="7" cy="17" r="1.6"/>
<path d="M15 11.5a3.5 3.5 0 0 1-3.5 3.5"/>
<path d="M18 11.5a6.5 6.5 0 0 1-6.5 6.5"/>
case "products":
<path d="M12 3.2 19 7.3v9.4L12 20.8 5 16.7V7.3z"/>
<path d="M5 7.3l7 4.1 7-4.1"/>
<path d="M12 11.4v9.4"/>
case "history":
<circle cx="12" cy="12" r="8.5"/>
<path d="M12 7v5.2l3.4 2.1"/>
case "about":
<circle cx="12" cy="8.4" r="3.6"/>
<path d="M5.4 20a6.6 6.6 0 0 1 13.2 0"/>
case "evidence":
<path d="M6.8 3.4h7.2l4 4v13.2H6.8z"/>
<path d="M14 3.4v4h4"/>
<path d="M9.6 14.2l2 2 3.6-4.1"/>
}
</svg>
}
// TechChips is the technology list on a page. A chip carries a published mark
// when one exists and plain text when it does not, so a missing icon reads as a
// design decision rather than a broken image.
templ TechChips(items []string) {
<ul class="tech" aria-label="Technology">
for _, t := range items {
<li class="tech-chip">
if paths, ok := brand.Mark(t); ok {
<svg class="tech-mark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
for _, d := range paths {
<path d={ d } fill="currentColor"/>
}
</svg>
}
<span>{ t }</span>
</li>
}
</ul>
}

27
internal/web/templates/pages.templ
View File

@@ -17,7 +17,6 @@ templ HomePage(v HomeView) {
</p>
@SearchForm("", "hero-search")
</section>
<section class="pillars" aria-label="Six areas">
for _, c := range v.Cards {
@PillarCard(c)
@@ -46,14 +45,9 @@ templ DocPage(v DocView) {
}
</div>
if len(v.Tech) > 0 {
<ul class="tech" aria-label="Technology">
for _, t := range v.Tech {
<li>{ t }</li>
}
</ul>
@TechChips(v.Tech)
}
</header>
<div class="prose">
@v.Body
</div>
@@ -97,7 +91,6 @@ templ DocPage(v DocView) {
</ul>
</section>
}
<footer class="doc-foot">
<p>Last verified { v.Doc.LastVerified } · <code>content/{ v.Doc.Path }</code></p>
</footer>
@@ -207,15 +200,21 @@ templ StreamPage(v StreamView) {
<p class="doc-claim">This page renders the same layout and the same panel as every other page. Its panel is bound to an event stream instead of pre-rendered files, and no layout code changed.</p>
</header>
<div class="prose">
<p>The presentation panel is a content sink. In Mode A it takes pre-rendered fragments over
<p>
The presentation panel is a content sink. In Mode A it takes pre-rendered fragments over
HTMX: you click a row in an evidence table and one file is swapped in. On this page the same
panel is bound to <code>/api/stage/stream</code> and receives { strconv.Itoa(v.Frames) } fragments
over server-sent events, one after another.</p>
<p>Fragments are pushed, not requested. Nothing about the panel — its markup, its fragment
over server-sent events, one after another.
</p>
<p>
Fragments are pushed, not requested. Nothing about the panel — its markup, its fragment
view, its empty state — knows the difference. That is the point: the Phase 5 console
re-points this panel at retrieval output and the layout does not change.</p>
<p class="section-note">This demonstration streams the artefacts already built for the site, with
no model in the loop. It exists to prove the transport, not to pretend an AI is answering.</p>
re-points this panel at retrieval output and the layout does not change.
</p>
<p class="section-note">
This demonstration streams the artefacts already built for the site, with
no model in the loop. It exists to prove the transport, not to pretend an AI is answering.
</p>
</div>
if len(v.Fragment) > 0 {
<section class="doc-sub">

2
internal/web/templates/view.go
View File

@@ -23,7 +23,7 @@ import (
type NavItem struct {
Title string
Href string
Gutter string
Area string
Current bool
}