Eine Website für takeøff in fünf Tagen, mit Sternenhimmel und ohne Tracking
Unser Kultur-Kollektiv in Potsdam brauchte eine Website. Ich habe sie in fünf Tagen gebaut, zweisprachig, mit eigener Canvas-Szenen-Engine und einer Datenschicht, die später eine Datenbank verträgt.
Der Mond auf der Startseite zeigt die echte Mondphase von heute. Gerechnet, nicht als Bild.
takeøff ist ein ehrenamtliches Kultur- und Rave-Kollektiv in Potsdam, gegründet im Juni 2024, heute ungefähr 20 Leute. Wir brauchten eine Website, die zweisprachig ist, ohne Tracking auskommt und einen internen Bereich für die Crew hat. Und die später jemand ohne Programmierkenntnisse pflegen kann. Vom 2. bis 7. September habe ich sie gebaut, 32 von 33 Commits, live auf Vercel. Die Arbeit lief stark agentengestützt, mit klaren Verträgen in AGENTS.md und CLAUDE.md, was die Agenten dürfen und was nicht.
Technisch ist es Next.js 16 mit TypeScript und normalem CSS, ohne UI-Bibliothek. Das Auffälligste ist der Hintergrund. Dafür habe ich eine kleine Szenen-Engine auf Canvas 2D geschrieben, ohne fremde Bibliothek: ein Sternenfeld mit der echten Mondphase, der Mars, ein Strand und ein Taghimmel. Drei Themes, jeweils in einer Tag- und einer Nachtversion. Dazu drei Effektstufen, und wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt die ruhige Variante. Eine schöne Szene, die auf einem alten Handy ruckelt, wäre schlimmer als gar keine.
Der wichtigere Teil ist unsichtbar. Keine Seite lädt ihre Daten selbst. Alles geht durch einen zentralen Zugang, eine Datei, hinter der heute JSON-Dateien liegen und später eine Datenbank liegen kann, ohne dass eine einzige Seite angefasst werden muss. Und für jeden Datentyp gibt es einen Contract: eine JSON-Beschreibung seiner Felder. Aus dieser Beschreibung sollen später die Formulare für die Redaktion entstehen. Diese Konvention ist inzwischen eine feste Regel in allen meinen Projekten.
Dazu kommen Prüfskripte: ein UI-Check über acht Bildschirmbreiten, ein Check, ob auf den englischen Seiten noch deutscher Text steht, eine Messung der Scroll-Performance gegen einen gespeicherten Ausgangswert und ein Audit für Mobilgeräte. Der Crew-Bereich mit Schichtabläufen und Notfallplan läuft separat.
Fertig ist die Seite noch nicht. Ein Teil der Inhalte ist Platzhalter, die Rechtstexte fehlen noch. Aber das Gerüst steht, und sobald die Formulare da sind, brauchen neue Inhalte keinen Code mehr.
Was ich mitnehme: Bei einem Projekt, das andere weiterpflegen sollen, ist die Datenschicht wichtiger als die Optik. Und Effekte nur mit Ausschalter. Wer Bewegung nicht verträgt, soll trotzdem alles lesen können.
Tools und Skills: Next.js 16, TypeScript, CSS ohne Framework, Canvas 2D, Vercel, ein Adapter-Muster für die Daten, Contract-getriebene Datentypen, Barrierefreiheit mit prefers-reduced-motion, automatisierte UI- und Performance-Checks und agentengestütztes Arbeiten.
Nebenbei, aus dem letzten Herbst: Für unsere Events habe ich auch einen kleinen Python-Generator geschrieben, der Wertmarken als STL-Datei für den 3D-Drucker baut. 45 Millimeter, geriffelt, druckbar ohne Stützstruktur.