Reto Ryter

So ist diese Website entstanden

Ich entscheide, was gebaut wird, und prüfe, ob es richtig gebaut wurde; den meisten Code tippt Claude Code. Eine Arbeit beginnt als Karte: das Ziel, die offenen Fragen, die nötige Recherche. Jede Frage wird zu einem Ticket, eines nach dem andern gelöst, mit Wegwerf-Prototypen, wo eine Entscheidung etwas zum Anschauen braucht. Den Code schreibt Claude Code test-first gegen diese Entscheidungen; er wird gegen die Spezifikation und die Standards des Repos geprüft, und ich lese jeden Diff. Die Leitplanken sind der Punkt: Spezifikation vor Code, Tests vor Implementierung, Review vor Merge. Diese Website ist genau so entstanden, und die Karte ist öffentlich.

In meinen eigenen Projekten ist das der ganze Arbeitsablauf. Bei Kunden setze ich ihn ein, wo der Kunde es erlaubt.

Werkzeuge: Claude Code, mit dem Skills-Plugin von Matt Pocock (wayfinder, grilling, prototype, TDD, code review). Die Karte und die Tickets liegen im öffentlichen Repo; unten stehen sie, wie sie am 14. Oktober 2026 geschrieben wurden.

Die Karte und die Tickets sind auf Englisch.

Seit der Karte, 15. Oktober 2026

Die Karte unten steht, wie sie geschrieben wurde. Fünf Dinge wurden seither entschieden, im Design-Vorhaben, das folgte:

  • Verfügbarkeit: die Website sagt «Verfügbar für neue Engagements ab Januar 2027.»
  • Open-Graph-Bild und Favicon sind spezifiziert: ein 1200×630-Standbild des Schilds mit Name und Titel; ein SVG der «TWY»-Striche des Schilds.
  • Das Schild ist kein ganzseitiger Hintergrund mehr: es gehört auf dem Desktop zum ersten Viewport und ist überall sonst ein Poster; kein Frost.
  • Deutsch ist in v1: jede Seite gibt es unter /de/.
  • Schreiben ist in v1: ein Bereich Schreiben mit eigenem Verzeichnis und Beiträgen.

Ziel

Reached 2026-10-14. All ten tickets resolved; the spec is indexed in 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.

Bisherige Entscheide

Eine Zeile pro geschlossenes Ticket, in der Reihenfolge der Karte: der Titel und der Kern des Entscheids.

  1. 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 repo rryter/rryter.ch.

    resolvedTicket 10grilling

  2. Page structure and information architecture

    one landing page (hero, chapters, seven cards, how I work, before TWY, footer with legal line) plus /built and /built/<ticket>; non-sticky nav; print stylesheet as the CV. Outline in content/structure.md.

    resolvedTicket 08grilling

  3. 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.

    resolvedTicket 09grilling

  4. 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), see content/visual.md.

    resolvedTicket 07prototype

  5. 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.

    resolvedTicket 06grilling

  6. 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.

    resolvedTicket 05grilling

  7. 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.

    resolvedTicket 01research

  8. 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.

    resolvedTicket 02task

  9. Current Angular version and the showcase feature set

    Angular 22.2.2, ng new --ssr --zoneless --test-runner=vitest with outputMode: static prerenders every route to dist/.../browser; show signals, Signal Forms, resource, @defer, incremental hydration; sign goes in @defer (hydrate on viewport) with the poster as placeholder.

    resolvedTicket 03research

  10. 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 branch research/old-site-content.

    resolvedTicket 04research

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.

Noch nicht festgelegt

  • 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.

Nicht im Umfang

  • 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.