Redesign About-Seite

Aus einem klassischen About-Text wurde ein rotierender ASCII-Globus mit vier persönlichen Markern. Kein Framework, keine Kartenbibliothek, kein Build-Step, nur HTML, CSS und Vanilla JavaScript.

Warum ein Redesign?

Eine About-Seite ist schnell langweilig, wenn sie nur erklärt, wer man ist. Ich wollte stattdessen ein kleines Objekt bauen, das etwas über mich erzählt, ohne alles auszuschreiben. Die Seite sollte persönlicher werden, aber nicht wie ein Lebenslauf wirken.

Der neue Einstieg ist deshalb bewusst knapp: delusionally optimistic, darunter zwei Zeilen über Ideen, Projekte und Lernfortschritte. Der Rest der Bedeutung liegt im Globus.

Die Idee

Der Globus verbindet Orte, die für mich unterschiedliche Rollen haben. Die Marker sind nicht einfach Deko, sondern kleine Koordinaten meiner Biografie und meiner Ziele.

Heimat:    Erzurum
Zuhause:   Essen
Traum:     Tokio
Karriere:  San Francisco

Die Labels erscheinen nur, wenn der jeweilige Ort auf der Vorderseite der Kugel liegt. Dadurch wirkt der Globus nicht wie ein statisches Poster, sondern wie ein kleines System, das sich bewegt.

Warum ASCII?

Eine normale Weltkarte oder ein fertiger 3D-Globus hätte technisch wahrscheinlich schneller funktioniert. Aber ASCII passt besser zur Richtung der Website. Es ist reduziert, etwas nerdig und trotzdem visuell stark genug, um die Seite zu tragen.

Der Globus besteht aus einem 100x100-Zeichengitter. Wasser wird mit Schrägstrichen gezeichnet, Land mit einer Mischung aus Sternen und Rauten. Die runde Form entsteht durch einen präzisen Kreisbeschnitt in CSS.

Zeichengitter: 100 x 100
Land:          * und #
Wasser:        /
Rotation:      ca. 35 Sekunden pro Umdrehung

Land und Wasser

Die Kontinente sind nicht aus einer externen Kartendatei geladen. Stattdessen gibt es im JavaScript eine polygonbasierte Land-Wasser-Map, die beim Laden gerastert wird. Das ist nicht geografisch perfekt, aber für einen ASCII-Globus genau richtig: grob genug, um Stil zu haben, genau genug, um die Welt zu erkennen.

Manche Details wurden bewusst angepasst. Mittelamerika braucht eine sichtbare Verbindung zu Südamerika, Kalifornien muss weit genug nach Westen reichen, damit San Francisco nicht im Pazifik liegt, und die Arktis bleibt offen, weil eine Eiskappe die nördlichen Kontinente schlechter lesbar gemacht hätte.

Design-Entscheidungen

Die About-Seite ist jetzt die helle Ausnahme auf einer sonst eher dunklen Website. Der warme Hintergrund macht den ASCII-Globus weicher und gibt der Seite eine andere Stimmung, ohne dass sie komplett aus dem System fällt.

Die Navigation musste dafür ebenfalls angepasst werden. Die dunkle Standard-Pille der anderen Seiten war auf dem hellen Hintergrund zu schwer. Die About-Seite nutzt deshalb eine warme, glasige Pille, ein schwarzes Logo und Orange als Akzentfarbe.

Logo:        schwarz statt blau
Pille:       warm hell statt dunkel
Akzent:      Orange wie die Stadtmarker
Gilt nur:    About-Seite

Wichtig war, dass diese Änderungen nur für die About-Seite gelten. Die anderen Seiten behalten die dunkle Navigation, das blaue Logo und den Magenta-Akzent.

Was bewusst nicht drin ist

Ich habe absichtlich keine große Kartenbibliothek eingebaut. Auch Three.js oder eine echte 3D-Szene wären für diese Seite zu viel gewesen. Der Reiz liegt gerade darin, dass der Effekt mit einfachen Mitteln entsteht.

• Kein Framework.
• Keine externe Karten-API.
• Keine Build-Pipeline.
• Keine zusätzlichen Marker, wenn Labels dadurch kollidieren.

Was ich daraus mitnehme

Die neue About-Seite zeigt mir wieder, warum kleine persönliche Details oft stärker sind als große generische Layouts. Ein Hintergrundbild kann gut aussehen, aber ein selbst gebauter Globus erzählt mehr über die Website und über die Art, wie ich sie baue.

Der wichtigste Punkt ist nicht der technische Trick. Der wichtigste Punkt ist, dass die Seite jetzt eine klare eigene Idee hat. Sie erklärt weniger und zeigt mehr.