Mein Portfolio, neu gebaut – mit einem Astronauten
Was ich gelernt habe, als ich eine persönliche Website gebaut habe, durch die man gern scrollt. Von der selbst generierten Galaxie bis zum NASA-Raumanzug.
Mein altes Portfolio ist vor einigen Jahren entstanden, in einer ganz anderen Phase meiner Laufbahn. Es hat seinen Zweck erfüllt, aber es hat sich einfach nicht mehr nach mir angefühlt. Also habe ich von vorne begonnen – mit einer einzigen Regel: Ich will etwas bauen, durch das ich selbst gern scrolle.
Zuerst das Gefühl, dann der Code
Bevor ich eine Zeile Code geschrieben habe, habe ich mir einen Satz notiert: Scrollen soll sich anfühlen, als würde man durchs All treiben. Dieser eine Satz hat mir später viele Entscheidungen abgenommen. Der Astronaut schwebt von Abschnitt zu Abschnitt, dreht sich zu dem, was du gerade liest, und zündet seine Düsen, wenn er irgendwohin muss. Am Ende jeder Seite landet er auf einem Planeten.
Echt schlägt generiert – meistens
Meine erste Galaxie habe ich in einem Shader erzeugt: mehrere Lagen Rauschen, so lange ineinander verzerrt, bis sie nach Gas aussahen. Das hat einen Abend gedauert und sah aus wie Rauch. Dann habe ich ein echtes Foto des galaktischen Zentrums eingesetzt, aufgenommen von der ESO-Sternwarte Paranal in Chile – und nach zwei Sekunden war klar, dass das die bessere Wahl ist.
Beim Planeten war es genauso. Meine prozedurale Version hatte Kontinente, Wolken und Stadtlichter und wirkte trotzdem billig. Eine echte Karte von Jupiters Wolkenbändern auf einer Kugel sieht dagegen aus wie ein Ort, an dem man tatsächlich sein könnte.
Der Astronaut ist das NASA-Modell jenes Raumanzugs, der auf der Internationalen Raumstation im Einsatz ist. Ich habe Flaggen und Missionsabzeichen entfernt, die Materialien neu aufgebaut und mein Logo auf die Schulter gesetzt.
Realistisch heißt nicht automatisch richtig
Echte Raumanzug-Jetpacks haben keine Flammen. Sie stoßen kalten Stickstoff durch winzige Düsen aus, und davon sieht man so gut wie nichts. Genau das habe ich zuerst gebaut: sechzehn Düsen, die nur dann feuern, wenn ihr Schub zur Bewegungsrichtung passt.
Das war physikalisch korrekt – und niemand hätte es bemerkt. Also bin ich zu sichtbaren Strahlen zurückgekehrt, nur weiß wie Gas statt orange wie Feuer. Realismus ist ein Werkzeug. Er soll dem Gefühl dienen, nicht umgekehrt.
Schnell bleiben
Eine persönliche Website mit 3D-Szene wird schnell zum Heizstrahler. Ein paar Dinge halten diese hier schlank:
- Der Himmel wird ein einziges Mal in voller Auflösung gezeichnet und beim Scrollen nur verschoben, statt ihn in jedem Frame neu zu berechnen.
- Sobald der Tab nicht sichtbar ist, pausiert alles.
- Wer im System reduzierte Bewegung eingestellt hat, bekommt einen ruhigen Astronauten und eine Seite, die einfach funktioniert.
Was ich mir beim nächsten Mal sagen würde
Echte Assets möglichst früh einbauen – sie verändern jede Designentscheidung danach. Und: Kleinigkeiten summieren sich. Dass sich der Astronaut zu dem dreht, was du gerade liest, waren vielleicht zwanzig Zeilen Code, und es ist mein liebstes Detail auf der ganzen Seite.