How this site was built
I decide what gets built and check that it was built right; Claude Code types most of the code. A piece of work starts as a map: the destination, the open questions, the research to do. Each question becomes a ticket, resolved one at a time, with throwaway prototypes where a decision needs something to look at. Code is written test-first by Claude Code against those decisions, reviewed against the spec and the repo's standards, and I read every diff. The guardrails are the point: specs before code, tests before implementation, review before merge. This site was built exactly that way, and you can read the map.
In my own projects this is the whole workflow. At clients I use it where the client allows.
Tools: Claude Code, with Matt Pocock's skills plugin (wayfinder, grilling, prototype, TDD, code review). The map and the tickets are in the public repo (opens in a new tab); below they are rendered as written on 14 October 2026.
Since the map, 15 October 2026
The map below is rendered as it was written. Five things have been decided since, in the design effort that followed:
- Availability: the site says “Available for new engagements from January 2027.”
- Open Graph image and favicon are specified: a 1200×630 still of the sign with name and Title; an SVG of the sign’s “TWY” strokes.
- The sign is no longer a full-page background: it owns the first viewport on desktop and is a poster everywhere else; no frost.
- German is in v1: every page exists under
/de/. - Writing is in v1: a Writing section with its own index and posts.
Destination
SPEC.md. The build is a separate effort.A locked spec for the new rryter.ch: positioning, the career story as content (Chapters, Engagements with "via Partner"), page structure, visual direction built around the TWY neon sign, the AI / Claude Code showcase, and the stack. Nothing left to decide before a build effort starts. The build itself is a follow-up effort.
Decisions so far
One row per closed ticket, in the map’s order: the title, and the gist that closed it.
Stack and repo setup decisions
plain Angular CLI 22.2, static prerender (ADR 0001), markdown→JSON build step, sign copied in behind
@defer (hydrate on viewport), plain CSS, Vitest + Playwright on dist, oxlint/oxfmt, GitHub Actions, public reporryter/rryter.ch.Page structure and information architecture
one landing page (hero, chapters, seven cards, how I work, before TWY, footer with legal line) plus
/builtand/built/<ticket>; non-sticky nav; print stylesheet as the CV. Outline incontent/structure.md.The AI / Claude Code showcase content
"How I work" paragraph written (map, tickets, prototypes, test-first code by Claude Code, review, "I read every diff"); the built-site page renders the map and tickets from the repo, links the repo, no transcripts; Claude Code and the skills plugin named; built-with-AI link list deferred. Text in
content/how-i-work.md.Neon sign: logo, hero, or large background?
C wins: sign as fixed full-viewport background (glow 0.45, thickness 3.2, sway on, flicker off), hero clean, frosted glass (22px blur, 35% tint) fades in over the first 60% viewport of scroll. Prototype on branch
prototype/sign-role. Added 2026-10-14: the sign is shot on a cyclorama set (grey wall curving into a floor, one key light, tube colours spilling onto the wall), seecontent/visual.md.The career story: chapters and engagements as content
three chapters in first person, engagements newest first with via/direct on each, LGT Dec 2023–Dec 2024 and CSS Jan 2025– as Expert Web Engineer via Zühlke, agencies unnamed, education incl. the 3D course. Text in
content/career.md.Positioning statement and headline
Title "Expert Web Engineer · AI-native"; headline "Angular, and whatever else the problem needs."; hiring managers first; AI claim is workflow only; email CTA; first person; TWY out of the header. Text in
content/positioning.md.TWY GmbH in the public records
founded Feb 2012 in Thun by Räz, Imhof and Ryter; both co-founders left June 2015 (Chapter 1 → 2 boundary); renamed TWY GmbH Jan 2016; seat Konolfingen since Jan 2020; six SHAB publications verified.
LinkedIn export and the engagement facts only Reto has
LinkedIn transcribed; LGT via Zühlke Dec 2023 for about a year, CSS via Zühlke since Jan 2025 ongoing; Chapter 3 starts Dec 2023; LGT/CSS contributions and Chapter 1 agency names still to ask during the career story.
Current Angular version and the showcase feature set
Angular 22.2.2,
ng new --ssr --zoneless --test-runner=vitestwithoutputMode: staticprerenders every route todist/.../browser; show signals, Signal Forms, resource, @defer, incremental hydration; sign goes in@defer (hydrate on viewport)with the poster as placeholder.Mine the old site's repo for content
live site is
twygmbh/cv-reto, one page, seven engagements ending Visana Oct 2023, no partner labels, no LinkedIn/GitHub links, private data exposed; all content and 24 assets captured on branchresearch/old-site-content.
Visual system beyond the sign (grilled 2026-10-14, no ticket): dark only; orange means proof or action (Title line, via-Partner tag, email button, focus) and nothing else; self-hosted Barlow Condensed, Plex Sans, Plex Mono; fixed body, six display sizes with four fluid; 1100px measure, two columns (label left, content right) from 960px; 8px spacing scale; no logos, names in type; imagery is the sign plus a future portrait in Contact. Text in content/visual.md.
Not yet specified
- Hosting and domains: Reto said to ignore hosting for now. Currently both rryter.ch and twy.gmbh serve one build: a Docker image (nginx) in Google Artifact Registry behind Cloudflare DNS. Decide later whether twy.gmbh redirects, and where the static output is hosted.
- Metadata and sharing: title, description, Open Graph image (a still of the neon sign?), favicon from the TWY logo.
- Availability line in the CTA: whether the site says Reto is engaged at CSS and from when he is open. Needs a real date from Reto.
- "Built with AI" link list (neon sign repo, Angular Claude plugin, signal-forms playground, sentinel): skipped for v1; may return once Reto picks what to show.
- Analytics: only if Reto already uses a privacy-friendly tool; otherwise none.
- Cut-over: what happens to the old site, the old repo, and the old CV data not carried over.
- Accessibility and performance budget: a full-viewport canvas plus full-viewport backdrop blur is the costliest combination the C verdict allows; measure on laptop and phone during the build, consider a lower pixel-ratio cap for the background role, verify Safari's backdrop blur. Reduced motion: still frame plus frost.
Out of scope
- German version (later effort, after v1 ships in English).
- Blog or writing section: a content treadmill, not v1.
- Contact form and CMS: mailto and LinkedIn are enough.
- Light theme: the neon sign dictates dark.