01
Die Hauptseite als Ausgangspunkt
Die Startseite führt durch drei Bereiche: Blog, Spiele und Kontakt. Oben stehen ein persönliches Bild und direkte Einstiege zu den Inhalten. Darunter stelle ich mich vor; die Projektübersicht führt zu den einzelnen Werkstattberichten.
Die Spiele haben eigene animierte Kacheln. Karten, Begriffe und Kartenansichten machen schon vor dem Öffnen erkennbar, was sich dahinter verbirgt. Über die Navigation lassen sich die Bereiche direkt erreichen. Auf dem Handy ordnen sich Texte, Bilder und Kacheln untereinander an.
02
KI-Grundgerüst, eigener Aufbau
Mit KI habe ich die ersten Grundrahmen für die Website und die Spiele erstellt. Sie lieferten die Ausgangsstruktur für Seiten, Komponenten und Funktionen. Darauf habe ich weitergebaut: Inhalte ergänzt, Abläufe angepasst und die Gestaltung nach meinen Vorstellungen geformt.
Entscheidend war für mich, aus dem Grundgerüst eine Seite zu machen, die meine Projekte zeigt und sich so bedienen lässt, wie ich es möchte. Welche Bereiche zusammengehören, welche Bilder bleiben und wie ein Spiel aufgebaut ist, habe ich beim Weiterentwickeln konkretisiert.
03
Blogberichte mit nachvollziehbarem Aufbau
Jeder Projektbericht beginnt mit einer kurzen Einordnung. Danach folgen nummerierte Kapitel, die von der Idee über den Aufbau bis zum aktuellen Stand führen. Eine Kapitelnavigation macht längere Texte gezielt zugänglich.
Bei Auto-LST gehören Mechanik, Elektronik und Software zusammen. Der Drohnenbericht zeigt den Aufbau eines Quadrocopters. Fotos halten Bauteile und Zwischenstände fest; Videos zeigen Bewegung und Handgriffe, die sich mit einem einzelnen Bild kaum erklären lassen. Persönliche Beiträge haben daneben ihren eigenen Bereich.
04
Spiele mit eigener Logik
Charades und Who am I? bringen zwei einfache Spielideen in den Browser: Begriffe darstellen und Identitäten durch Fragen erraten. Durak und UNO ergänzen die Seite um Kartenspiele. Jedes Spiel öffnet sich auf seiner eigenen Unterseite unter einer Subdomain von noahvonvarchmin.com.
Beim Aufbau eines Kartenspiels gehören Oberfläche und Regeln zusammen: Karten darstellen, den aktuellen Zug anzeigen, erlaubte Aktionen prüfen und den Spielstand nach einer Aktion aktualisieren. Für UNO habe ich die Gestaltung von Durak als Ausgangspunkt genommen und für dessen eigene Regeln weiterentwickelt. Dazu gehören drei Sprachen, sechs Arenen, ein Computermodus und ein Mehrspielermodus für bis zu acht Personen.
05
Eine Karte für Zürich
Die Zürich-Karte ordnet Orte in acht farbige Kategorien: Bar, Café, Park und Grün, Sport, Geschichte, Kultur, Aussicht und Anderes. Ein Ort kann mehreren Kategorien angehören.
Die Karte ist auch für Beiträge anderer gedacht: Orte lassen sich anonym oder unter einem Pseudonym ergänzen. Der eigene Standort kann zur Orientierung und Navigation dienen. So steht neben den Texten und Spielen ein Werkzeug, das sich direkt draussen nutzen lässt.
06
Vom lokalen Code zur veröffentlichten Seite
Der Code liegt in meiner lokalen Entwicklungsumgebung. Dort bearbeite ich Texte, Komponenten und Funktionen und prüfe die Änderungen in einer Vorschau. Anschliessend veröffentliche ich den neuen Stand von dort aus, sodass die Änderungen auf der Website live werden.
Die Hauptseite ist mit React und TypeScript aufgebaut. Die Seiten liegen in einer Next-Struktur; wiederverwendbare Komponenten übernehmen etwa das Layout der Blogartikel und die Sprachauswahl. Vinext und Vite bauen daraus die veröffentlichbare Anwendung, die über Cloudflare bereitgestellt wird.
Neue Blogberichte verwenden die vorhandene Artikelstruktur. Spiele können unabhängig weiterentwickelt und über die Hauptseite erreichbar gemacht werden. So lässt sich die Website erweitern, ohne für jeden Beitrag oder jede neue Idee bei null anzufangen.