Vor knapp zehn Jahren hatte ich diese Website schon einmal komplett neu aufgesetzt – damals mit React, TypeScript, Redux und einem ASP.NET-Core-Backend (vgl. Creating www.carecom.de). Das Stack-Konzept war 2017 frisch und spannend, hat aber wie alles in der Web-Welt deutliche Patina angesetzt. Zeit also für einen Relaunch – mit allem, was C# und .NET 2026 zu bieten haben.
Die neue carecom.de läuft jetzt als Blazor Web App auf .NET 10, mit serverseitigem Pre-Rendering und gezielt interaktiven Komponenten dort, wo es Sinn ergibt (Kontaktformular, Cookie-Hinweis, Foto-Slider, Mini-Space-Invaders). Kein JavaScript-Framework mehr im Hintergrund, keine Redux-Pipeline – stattdessen typsicheres C# bis in die UI-Komponenten hinein und ein eigenes, kompaktes CSS ohne Bootstrap.
Soweit das Übliche. Spannend ist eigentlich nicht was da steht, sondern wer es geschrieben hat: weit über 99 % des Codes – Razor-Components, CSS, Service-Klassen, Konfiguration – kam von Claude Code, dem agentischen CLI-Tool von Anthropic. Ich habe in einer Reihe von Sessions die Ziele und Iterationen vorgegeben; der Agent hat geplant, geschrieben, getestet, korrigiert und wiederum vorgeschlagen.
Vorgehen
Eingestiegen sind wir mit einer kurzen Anforderungs-Abstimmung – Hosting-Modell, Lokalisierung, UI-Framework. Direkt im Anschluss hat Claude die alte Website Seite für Seite gescraped, die Texte verbatim extrahiert und die Bilder samt Ordnerstruktur lokal abgelegt. Über mehrere Iterationen ist daraus ein vollständiger Klon entstanden, der dem Original optisch wie inhaltlich nahekommt – und im Lauf weiterer Sessions eigene Verbesserungen dazugewonnen hat.
Komponenten und Layout-Shell
Bei der Architektur lag der Schwerpunkt auf wiederverwendbaren Komponenten: SiteHeader, SiteFooter, PageHeaderRow, LanguageSwitcher, RightSidebar, PersonCard, BlogTeaser, ReferenceList, QuoteBlock, Testimonial, PhotoSlider, TextCarousel, CookieConsent, SeoTags, SocialIcons, LatestPosts, SpaceInvaders – wo immer das gleiche Pattern an mehreren Stellen auftauchte, wurde es zu einer eigenen Razor-Komponente verdichtet.
Quer über alle Inhaltsseiten liegt eine SitePage-Hülle mit benannten Slots: BeforeMain für Full-Bleed-Elemente vor dem Container (Home-Carousel, Photography-Slider), ChildContent als Hauptspalte, Sidebar als optionale Erweiterung des Auto-Child-Menüs und Aside als kompletter Ersatz für die Standard-Sidebar (Kontaktseite mit zwei PersonCards). Jede Page erbt von PageBase, das die Lang/Effective-Routine zentral hält und damit das Per-Page-Boilerplate komplett einspart.
Mehrsprachigkeit – deklarativ
Lokalisierung über URL-Prefix (/de/…, /en/…) mit einem Sprachumschalter rechts oben im SiteHeader. Echt-bilinguale Texte (gleiche DOM-Form, andere Worte) liegen als typsichere L(De, En)-Records in einer zentralen SiteContent.cs, generiert per Source-Generator aus XML-Dateien pro Sektion. SiteContent.Contact.Phone[Effective] liefert die richtige Variante – ohne IStringLocalizer-Ballast und ohne .resx-Generierung.
Für strukturelle Sprach-Verzweigungen im Markup – ganze DE-only-Sektionen wie den IT-Beratungs-Block auf der Consulting-Seite oder unterschiedliche DOM-Formen pro Sprache – stehen zwei winzige Razor-Komponenten zur Verfügung: <De> und <En>. Sie lesen den aktiven Sprach-Wert per [CascadingParameter(Name = "Lang")] aus einer MainLayout-Cascade, die ihrerseits direkt aus dem URL-Pfad gespeist wird. Das ersetzt Dutzende @if (Effective == "de")-Blöcke durch deklaratives Markup, das wie HTML liest.
Photography
Auf der Photography-Seite läuft ein 42-Bilder-Slider, der die gesamte Browser-Breite einnimmt – aber mit fixiertem 3:2-Aspect-Ratio passend zu den Original-1920×1280-Bildern und object-fit: contain. Auf normalen Bildschirmen sieht man jedes Bild perfekt eingepasst; auf sehr großen Screens deckelt max-height: 70vh die Höhe, das schmale Letterboxing an den Seiten ist der bewusst akzeptierte Trade-off gegen vertikales Crop. Captions und Navigations-Pfeile blenden nur beim Hover ein, damit das Bild zur Hauptsache wird. Auf Touch-Geräten ohne Hover-Fähigkeit bleibt die Steuerung dauerhaft sichtbar.
Brand-Animation: caredef als choreografiertes SVG
Das Favicon wurde nicht von Hand entworfen, sondern direkt aus dem Wordmark erzeugt: Claude hat per Pixeldichte-Profil die Bounding-Box des ersten „C" in carecom.png bestimmt, die dominante Farbe (#10AE5B – das CARECOM-Grün) gesampelt und daraus 32×32-, 64×64- und 192×192-Favicons gerendert.
Die alte caredef.jpg auf der Markenseite (Die Marke CARECOM) ist inzwischen komplett in ein animiertes SVG übersetzt: das CARECOM®-Wordmark als base64-eingebettete PNG (pixelgenaue Letterform, da kein installierter Font sie reproduziert), die sieben Satelliten-Begriffe (Competence, Commitment, Communication, Computer, Complete, Competitive, Common Sense) und die phonetische Caption als echte SVG-Textelemente an den Originalpositionen. Beim Aufruf federt das Logo zentral rein (Spring-Easing mit Overshoot), dann faden die sieben Wörter sequentiell im 150-ms-Takt aus leicht außen-versetzten Positionen an ihren Platz, zum Schluss fliegt die Caption von unten herauf. prefers-reduced-motion wird respektiert.
Easter Egg: Space Invaders in 6502-Tradition
Auf der Informatiker-/Computer-Scientist-Seite habe ich Claude gebeten, ein Mini-Space-Invaders-Spiel zu integrieren – als Reminiszenz an mein erstes 6502-Assembler-Projekt auf einem Apple ][. Das Resultat ist ein eigenes Canvas-Spielchen in reinem Browser-JS, im Site-Farbschema (Akzent-blaue Invader auf Footer-Schwarz, gestaffelt nach Punktewert von hell nach dunkel) und mit bilingualen On-Canvas-Labels.
Drei Wege führen dorthin: ein „6502"-Anker im Fließtext der Programmiersprachen-Aufzählung, eine eigene /de/play-Route für den teilbaren Direkt-Link, und ein klassischer Konami-Code (↑ ↑ ↓ ↓ ← → ← → B A), der von jeder Seite zum Spiel navigiert.
CSS-Isolation
Komponenten-spezifisches CSS ist konsequent ausgelagert: pro Foo.razor gibt es eine Foo.razor.css, die Blazor mit einer eindeutigen [b-xxxxx]-Scope-Markierung versieht. Die ehemals 860 Zeilen lange site.css ist auf knapp 150 Zeilen geschrumpft – Design-Tokens, Basis-Typografie und echte Cross-Cutting-Patterns. An den wenigen Stellen, wo Regeln Komponenten-Grenzen überqueren müssen (Anchor-Farben des SiteFooter auf nested SocialIcons-Anchors, <li>-Border im RightSidebar-Slot, Breitenregel für das von InputText gerenderte Eingabefeld im ContactForm), erledigt ::deep den Job.
Datenschutz und Analytics
Google Analytics 4 ist als echtes Opt-in eingebaut: ohne Klick auf „Akzeptieren" im Cookie-Banner wird die gtag.js nie geladen, keine Cookies gesetzt, keine Daten an Google geschickt. Erst nach expliziter Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) startet der Bootstrap, und eine GoogleAnalyticsTracker-Komponente feuert auf jeder Blazor-internen Navigation ein zusätzliches page_view – sonst würden bei SPA-Routenwechseln nur die initialen Seitenaufrufe in Analytics landen. Die Datenschutzerklärung beschreibt den Mechanismus in einem eigenen Abschnitt mit Widerrufshinweis. Die SeoTags-Komponente setzt pro Seite Title, Description, Canonical, OpenGraph- und Twitter-Card-Tags sowie hreflang-Alternativen.
Render-Modi und Stolpersteine
Eine wichtige technische Lektion, die uns gleich zweimal begegnet ist: CascadingValue aus einem statisch gerenderten Parent überquert die Render-Mode-Grenze in einen @rendermode InteractiveServer-Subtree nicht automatisch. Folge: im Kontaktformular erschienen Labels nach dem interaktiven Übergang plötzlich auf Deutsch, obwohl die Seite auf /en/contact lag; und im Space-Invaders-Mini-Spiel zeigte der Intro-Block stur die DE-Variante, weil die <De>/<En>-Konsumenten innerhalb der interaktiven Komponente nur den Default-Wert sahen. Der saubere Fix in beiden Fällen: Lang als expliziter [Parameter] aus dem Page-Razor herein, und die Komponente intern via <CascadingValue Value="@Lang" Name="Lang" IsFixed="true"> für ihre Children re-publishen.
Fazit
Was früher Wochen Handarbeit gekostet hätte – Content-Migration, Komponenten-Splitting, Pixel-Treue zum Original, DSGVO-Texte, Mail-Layout, Foto-Slider, Favicons, Lokalisierung, animiertes Brand-SVG, ein Mini-Spielchen mit drei Auffindbarkeitspfaden, vollständige CSS-Isolation – ist in einer überschaubaren Zahl von Sessions mit Claude Code entstanden. Mein Anteil war im Wesentlichen Zielsetzung, Review und gelegentliche Kurskorrektur; der Agent hat den Rest erledigt: planen, schreiben, builden, smoke-testen, dokumentieren.
Wenn Sie über einen ähnlichen Relaunch oder über agentische Code-Werkzeuge im eigenen Unternehmen nachdenken: sprechen Sie mich gerne an!