Work / Plate 04 of 06
Agent observability site
A consulting site for observability should show a trace: strands of light for the hero, a real allowlist for the proof, and type that stays out of the way.
- Year
- 2026
- Status
- Own site
- Brief
- Front page of this site, rebuilt from its first lead-gen version (v1) to v4
- Medium
- Static HTML, CSS, vanilla JS
- Mobile speed
- Lighthouse 90, 374 KB
- Shown at
- agent-observability.pages.dev
- Palette
#08090A#EDEEF0#7FA2FF
Open the live site Live. Moved off anhermon.dev when this portfolio became the home page.
- Headline. v1 described the service in eight words ("AI agent pipelines you can observe and reproduce."). v4 states the problem in seven ("Agents that fail should leave a trace.") and puts what I do on the line below it.
- First screen. v1 was text and one button on flat navy, with no image. v4 opens on a drawn trace of light strands from an illustrative 8-span run, with a replay control, so the subject is visible before any copy is read.
- Navigation. v1 had four text links of equal weight (What I do, Public work, Engagement, Contact). v4 has three section links and Contact as the one filled button.
- Body. v1 was three card grids (what I do, public work) and a text list. v4 sets the problem as a short list of log lines, a live allowlist demo, and the repositories as a ruled ledger with their limits.
- The cost. Lighthouse mobile, simulated, both builds served from this machine on 2026-10-04: v1 scored 100 with LCP 0.9 s and 231 KB; v4 scored 96 with LCP 1.9 s and 448 KB. The hero image and WebGL layer make v4 heavier and slower. Both scored 100 on accessibility.
Plate 04. Agent observability site, before and after: drag to compareWall painted in the work's own #08090A
What was built
Art direction and sign-off: Angel. Design iteration, build, QA captures and Lighthouse runs: AI-agent pipeline.
A full front-page rebuild: v1 was a text-and-cards page with a describing headline and no imagery. v4 leads with a claim, a drawn trace as the hero, a live allowlist demo and a retyped system measured against ten reference sites.
- Dark single-page site with a WebGL hero (light strands drawn from an illustrative 8-span run) and a static fallback
- A replay control that re-draws the same strands, same seed, same frame
- An allowlist demo using the real paths from an open-source MCP server
- Lead form and double opt-in notes signup posting to a small Cloudflare backend, with honeypot and custom accessible checkbox
- IntersectionObserver reveals (iOS Safari has no scroll-driven CSS)
Stack Static HTML, CSS, vanilla JS, WebGL, Inter variable (opsz), GitHub Pages
Decisions, with the reasons.
Before and after
Before and after: v1 to v4
v1 (commit 8da2725, 1 Oct 2026) was the first version of this page written as a lead-gen page. v4 is the page live today. Versions 2 and 3 in between changed the type and the hero art; the pair shown is the furthest apart.
Rejectedshowing v3 against v4. They share the same hero art and layout, so the pair reads as a font swap and hides what the rebuild changed.
Colour
One accent, two status colours
Everything is near-black and off-white, with a single signal blue for emphasis. Amber and green are reserved for status (a timeout, a passing check), so a colour always means something.
Rejecteda second brand colour. Three hues would have competed with the hero.
- void
#08090A - plate
#0F1012 - text
#EDEEF0 - dim
#A1A6AD - signal
#7FA2FF - burn
#FF9F43 - pass
#C8FF6A
Interaction
Signature: the proof is live, not pictured
The Guard section runs real requests against the real 15-path allowlist from spark-ordernet-mcp, one every couple of seconds while in view: a POST is rejected, a near-miss spelling is rejected, the exact path passes. Timing is labelled illustrative.
How it was started Ten reference sites (including Stripe, Linear, Vercel, Notion, Figma, Apple, GOV.UK) were measured for type scale, spacing, tracking and radius; v4's numbers come from that table, not from taste.
Figures, captured live.
Screenshots I took from the running preview at 1440 and 390 pixels wide. They are not mock-ups.
Measured, not claimed.
- Largest contentful paint
- 3.5 s
- Layout shift
- 0
- Blocking time
- 30 ms
- Page weight
- 374 KB
- Fonts
- inter-latin-opsz-var.woff2 39 KB
Lighthouse 12.8.2, simulated mobile, one run against anhermon.dev/ on 2026-10-01. Lab data, not field data. Re-run before quoting these elsewhere.
Honest limits.
- The hero WebGL layer is lazy-loaded after first paint. In a throttled Lighthouse run against the live site, mobile LCP was 3.5 s, which costs the performance score; an earlier local run measured about 2.0 s.
- This is my own site: there is no client brief, so no outside constraints shaped it.
Next plate
Android 16 KB fix mapProgrammatic data site with free tools and a paid kit
Want a redesign demo of your own site?
Free and private. You only pay if you want the full build.
Try the Redesign Lab- RequestYour site and consent
- AuditBy email, straight away
- Private demoAbout five days
- Optional buildOnly on payment
- Case studyOnly with your yes