Projektbericht: Portfolio für Mira Lichtfeld – Fotografie, die Raum bekommt

Die Fotografin Mira Lichtfeld beauftragte mich mit der Umsetzung ihres neuen Online-Portfolios. Die zentrale Idee: Ihre Fotografie soll ungestört für sich sprechen – technisch unterstützt durch ein schnelles, modernes Webdesign, das sich visuell zurücknimmt, aber in der Wirkung beeindruckt.

Herausforderung

Miras bisherige Portfolio-Seite war weder technisch zeitgemäß noch mobilfreundlich. Die Ladezeiten waren lang, Bilder nicht optimiert und die Pflege umständlich. Gleichzeitig bestand der Wunsch nach mehr Eigenständigkeit bei der Inhaltspflege – ohne auf große CMS-Lösungen zurückzugreifen.

Ziele

• Großflächige Bildpräsentation mit reduziertem Interface
• Maximale Performance bei Bildladungen (auch mobil)
• Elegante Scroll-Animationen & sanfte Übergänge
• Markdown-basierte Pflege der Referenzen
• Technisches Fundament für künftige Erweiterungen (z. B. Blog)

Tech-Stack & Architektur

Der Fokus lag auf einem schlanken Stack ohne unnötige Komplexität:

• Astro als static Site Generator für schnelle Ladezeiten
• Tailwind CSS + DaisyUI für das gestalterische Fundament
• Markdown-Content für Projekte und Textabschnitte
• ImageMagick + WebP für optimierte Medien
• AOS.js für sanfte Scroll-Animationen
• Docker + GitHub Actions für Build & Deploy

Umsetzung

📷 Bildzentriertes Layout

Die Seite besteht aus mehreren 100vh-Sektionen, die Miras Arbeiten wie in einem digitalen Ausstellungsraum präsentieren. Ob Hochformat oder Querformat – jedes Bild wird perfekt ins Layout eingepasst, inklusive bildbezogener Metainformationen.

🧩 Modular & wartbar

Jede Sektion basiert auf wiederverwendbaren Komponenten. Inhalte wie Überschriften, Bildpfade oder Beschreibungstexte lassen sich direkt in Markdown-Dateien pflegen – ohne eine visuelle Oberfläche, aber mit maximaler Kontrolle und Git-basierter Historie.

⚡ Bildoptimierung & Lazy Loading

Alle Fotos werden automatisiert per Skript in WebP konvertiert und in Auflösung & Qualität optimiert. Hero-Bilder laden eager, alle weiteren lazy – ganz ohne störendes Aufploppen.

✨ Sanfte Interaktionen

Dank AOS und eigens gestalteter Animationen entstehen sanfte Bewegungen beim Scrollen – etwa beim Einblenden von Text oder beim Aufbau der Navigations-Timeline.

🚀 CI/CD & Hosting

Das Projekt ist dockerisiert und wird bei jedem Push automatisch auf dem Zielserver aktualisiert – inklusive automatischem Build, Deployment und Image-Pruning für maximale Wartbarkeit.

Ergebnis

Das Ergebnis ist ein digitales Portfolio, das Miras Stil widerspiegelt: Klar. Direkt. Künstlerisch. Die Seite funktioniert auf mobilen Geräten ebenso wie auf großen Bildschirmen, lädt extrem schnell und rückt das Wichtigste in den Fokus – die Bilder.

„Die Seite bringt meine Arbeiten so zur Geltung, wie ich sie sehe – klar, reduziert und technisch auf den Punkt.“
— Mira Lichtfeld, Fotografin

Fazit

Mit Astro, Markdown und einem durchdachten Bildkonzept ist eine Portfolio-Seite entstanden, die visuelle Kunst und technische Exzellenz vereint. Ein echtes Beispiel dafür, wie Design, Code und Inhalt ineinandergreifen – und wie modernes Webdesign auch ohne visuelles CMS auskommen kann.

Wenn du selbst ein kreatives Portfolio brauchst oder deiner Arbeit den passenden Rahmen geben möchtest – lass uns sprechen.