Design für interaktive Portfolio-Websites

Eine räumliche Einführung ins Portfolio

Diese OpenDesign-Homepage versteht das Portfolio als visuelle Umgebung und nicht als herkömmliche Landingpage. Im Eröffnungszustand erstrecken sich reflektierende blau-weiße dreidimensionale Buchstaben über ein feines Raster; rechts unten ist eine cursorähnliche Skulptur versetzt angeordnet. Die Komposition etabliert die Identität, bevor Besuchende das Arbeitsarchiv erreichen.

Über die erfasste Eröffnungsszene hinaus führt die Quelle ein OpenDesign-Wortzeichen mit einem AI-Suffix ein, gefolgt von „Design for Everyone“ und „Local-first, agent-native. No cloud lock-in.“ Diese Aussagen positionieren die spätere Textebene; im Screenshot der Eröffnungsszene sind sie nicht sichtbar. Typografie und Übergangsabfolge verbinden diese Positionierung mit dem Arbeitsarchiv. Wer jedoch nur einen Projektindex sucht, muss zunächst die Identitätsebene durchlaufen.

Die Quelle beschreibt das Konzept als Auslesen einer Marke anhand einer DESIGN.md und das Erstellen von HTML/CSS-Artefakten für Coding Agents. In diesem Artefakt wird diese Idee durch Typografie, Beschriftungen, Raster und eine lokal gerenderte 3D-Szene dargestellt. Die Aufnahmen belegen weder verbundene Dienste noch funktionierende Eingabeübermittlungen.

Von der Markenaussage zum Arbeitsarchiv

Das Design eignet sich für Portfolios, in denen die Beziehungen zwischen Projekten ebenso wichtig sind wie einzelne Fallstudien. Im Work-Zustand bleiben „WORK“ und „CONTACT“ neben „THEME[A]“ und „SOUND[\]“ in der oberen Navigation sichtbar, während das Archiv Projekte über ein breites Raster verteilt. So bleibt die Orientierung erhalten, obwohl sich der Inhalt ändert.

Das sichtbare Archiv umfasst Bezeichnungen wie „PLUGIN MARKETPLACE“, „150 BRAND SYSTEMS“, „HYPERFRAMES“ und „AMR ROUTER“ sowie Jahresangaben, Kategoriekennzeichnungen und „OPEN SOURCE“-Abzeichen. Diese wiederkehrenden Felder geben jeder Kachel eine kompakte Identität: Lesende können Thema, Datum und Typ überfliegen, ohne eine separate Detailseite zu öffnen. Der Nachteil: Kurze Bezeichnungen setzen gemeinsamen Kontext voraus; unbekannte Projekte benötigen möglicherweise an anderer Stelle eine längere Beschreibung.

Die erfasste Zeile links unten lautet „GMT-7 LA 18:49 19°C“; nahe der unteren Mitte steht „0720 X 0450 Y“. Im Quellcode liest die Uhr die lokalen Stunden und Minuten des Browsers aus, die Temperatur ist fest auf 19 eingestellt, und die Koordinaten werden aus Zeigerposition und Viewport-Größe abgeleitet. Die Bezeichnung LA/GMT-7 belegt daher weder eine Zeitzonenumrechnung noch einen Wetterdatenfeed. Diese Kombination erzeugt die Anmutung eines Instrumentenpanels, ohne einen funktionierenden Standortdienst nachzuweisen.

Eine Homepage als Abfolge von Zuständen

Die bereitgestellten Aufnahmen zeigen zwei unterschiedliche visuelle Zustände und keine einzelne fortlaufende Seite. Im Eröffnungszustand steht die 3D-Markenszene im Mittelpunkt; im Work-Zustand wird dieser Schwerpunkt durch ein Raster ausgewählter Projekte und geschichtete Projektbilder ersetzt. Dieser Zustandswechsel vermittelt das Ankommen im Archiv, ohne Raster, Typografie und Navigationsvokabular aufzugeben.

Die Seitenstruktur führt von der Identität über die Positionierung zum Archiv. „TURN AGENTS INTO A DESIGN ENGINE FOR ALL“ erscheint als große typografische Aussage, gefolgt von Erläuterungen zu DESIGN.md und lokal erstellten Artefakten. Darunter dienen Projektkacheln als Belegmaterial der Seite, doch ihre Aussagen bleiben redaktionell verfasste illustrative Inhalte und sind keine unabhängig verifizierten Produktnachweise.

Die schmalen, technischen Beschriftungen erzeugen Rhythmus in ansonsten offenen Flächen. Ihr Vorteil ist eine starke visuelle Kontinuität; ihr Nachteil ist die geringere Lesbarkeit, wenn Projektnamen, Jahre und Kategorien dieselbe visuelle Gewichtung erhalten. Eine Neugestaltung sollte Reihenfolge und Kontrast zwischen Hauptaussagen und Archivmetadaten beibehalten und zugleich lange Projektnamen sicher umbrechen lassen.

1. Mit der Szene beginnen

   Stellen Sie Markenform, Farbe und Bewegung mit der einleitenden 3D-Komposition heraus, bevor Sie das Archiv einführen.

2. Die Positionierung vermitteln

   Platzieren Sie die Botschaft „Design for Everyone“ und die Erläuterung des Local-first-Prinzips zwischen Identität und Projektinhalten.

3. Das Archiv zugänglich machen

   Verwenden Sie wiederkehrende Projektfelder für schnelle Vergleiche und stellen Sie weiterführende Projektdetails außerhalb der kompakten Kachel bereit.

Sichtbares Design und Grenzen der Funktionalität

Das Artefakt zeigt eine Designsprache: Beschriftungen in nichtproportionaler Schrift, ein helles Raster, blaue reflektierende Geometrie, Übergänge zwischen Projektzuständen und ein Archiv aus benannten Kacheln. Zu den durch die Quelle bestätigten Laufzeitzuständen gehören die anfängliche 3D-Szene und das ausgewählte Work-Raster, beide mit den deklarierten 3D-Abhängigkeiten der Quelle gerendert.

Die Quelle stellt eine lokale Work- und Contact-Navigation sowie im Browser gespeicherte Theme- und Sound-Einstellungen bereit. Die Galerie zeigt die Eröffnungs- und Work-Layouts, aber keinen verifizierten Ablauf für Audio oder Projektdetails. Eine interaktive Vorschau ist nicht verfügbar. Namen, Jahre und Mengenangaben sind Beispieldaten und keine aktuellen OpenDesign-Funktionen; die Aufnahmen belegen weder verbundene Dienste noch funktionierende Eingabeübermittlungen.