Portfolio-Website und Fotoarchiv für eine Installationskünstlerin

Für die Schweizer Installationskünstlerin Marion Linke habe ich eine vollständige Portfolio-Website und ein hybrides Fotoarchiv von Grund auf aufgebaut. Das Projekt umfasst 25 Jahre Werk, über 40 Ausstellungen und über 7’000 Fotos.

marionlinke.com

Ausgangslage

Marion Linke hatte bereits eine Website, die auf einem CMS lief. Die Limitationen wurden mit der Zeit zu gross: keine befriedigende Lösung für Zweisprachigkeit, eingeschränkte gestalterische Kontrolle und Abhängigkeit von externen Plugins. Wir haben entschieden, alles neu zu bauen, diesmal ohne CMS, in reinem HTML, CSS und JavaScript.

Das Projekt entstand in stetigem Kontakt mit der Künstlerin. Viele Inhalte, Korrekturen und Ausstellungsangaben kamen direkt von ihr. Bis zur Abgabe konnten noch nicht alle Punkte vollständig realisiert werden, wie z.B. ein Kontaktformular, da ich noch kein Backend programmieren kann, daher vorübergehend ein Button, der die eigene eMail-App öffnet.

Das Fotoarchiv

Bevor die Website entstehen konnte, musste das Bildmaterial strukturiert werden. Die bestehende Sammlung enthielt über 7’000 Fotos, verteilt auf mehr als 40 Ausstellungsordner, mit Fotos, PDFs, Flyern und Pressetexten bunt vermischt.

Archivstruktur Vorher/Nachher

Das Resultat ist ein hybrides Drei-Ebenen-System: Die Ordnerstruktur auf der Festplatte bleibt nach Ausstellung sortiert. Lightroom Classic übernimmt die Metadaten-Schicht, mit IPTC-Presets pro Werk, die Copyright-Vermerk und Ausstellungshistorie direkt in die Bilddatei schreiben. Obsidian dokumentiert die Texte, Materialien und Entstehungsgeschichten pro Werk. Work still in progress 🙂

Design und Konzeption

Das visuelle Konzept entstand in Figma: Farbpalette (Weiss, Schwarz, Dunkelrot als Akzent), Typografie (Helvetica Neue) und die Komponentenstruktur für Desktop und Mobile.

Figma-Skizze für Layout

Bewusst auf plain HTML/CSS/JavaScript gesetzt: maximale Kontrolle, keine Framework-Abhängigkeiten, minimale Ladezeiten.

Die Website

Die fertige Website hat fünf Seiten: Home, Works, Statement, CV und Kontakt. Zweisprachig (Deutsch/Englisch), mit Dark Mode.

Webseite Landingpage

Mehrsprachigkeit war eine der technischen Herausforderungen, bei denen ich KI-Unterstützung eingeholt habe. Das eigene i18n-System arbeitet mit data-i18n-Attributen im HTML und einem zentralen JavaScript-Übersetzungsobjekt, ohne externe Bibliotheken.

Desktop und Mobile: ähnliches Design, andere Logik

Desktop und Mobile sehen gestalterisch konsistent aus: dieselbe Typografie, dieselben Abstände, dasselbe Farbsystem. Wer die Seite vom Laptop kennt, erkennt sie auf dem Smartphone sofort wieder.

Die Interaktion funktioniert aber anders. Auf dem Desktop öffnet ein Klick auf ein Werk eine Lightbox mit Bildnavigation und Infopanel. Das funktioniert gut, wo Übersicht und Kontext nebeneinander Platz haben.

Dark Mode/Englisch, Lightbox, Desktop-Gallery, Mobile-Gallery

Auf Mobile würde eine Lightbox den Scrollfluss unterbrechen: Man tippt, ein Overlay öffnet sich, man schliesst es, man verliert die Position. Stattdessen klappen die Details direkt unter dem Bild auf. Der User scrollt weiter, die Informationen erscheinen genau dort, wo er bereits ist.

Das gleiche Prinzip gilt für die Werkgruppen: Die Bilder bleiben horizontal scrollbar wie auf dem Desktop. Die Details zu jedem Werk sind unter dem jeweiligen Bild erreichbar, ohne die horizontale Anordnung zu verlassen.

(mbi)