Scroll down: mein Scrollytelling Portfolio

von

Runterscrollen statt durchklicken – für mein Portfolio habe ich mich für eine Scrollytelling-Website entschieden. Von der ersten Skizze bis zum Programmieren der Website war es ein spannender Lernprozess.

In den letzten Monaten durfte ich als Freelancer immer wieder kleinere Aufträge in den Bereichen Filmen, Schreiben und Fotografieren umsetzen. Um mich künftig besser präsentieren zu können, habe ich mir eine eigene Portfolio-Website erstellt.

Die Website ist unter folgender Domain abrufbar: www.milenastadelmann.ch

Die Website sollte nicht einfach ein klassisches Portfolio sein, sondern lebendig und abwechslungsreich wirken. Deshalb habe ich mich für ein Scrollytelling-Format entschieden. Dieses eignet sich perfekt, um Medieninhalte wie Bilder, Videos und Texte spannend darzustellen. Ausserdem reizte es mich, eine solche Seite komplett von Hand zu programmieren.

Von der Skizze zum Code

Die inhaltliche Grundlage für die Website hatte ich zum Teil bereits: Im Modul Schreiben und Sprechen IV mussten wir ein Bewerbungsvideo erstellen, in dem ich mein Angebot als Selbstständige präsentierte. Dieses Video lieferte mir viele Ideen für die Inhalte der Website.

Zuerst habe ich die Seiten von Hand skizziert. Einzelne Elemente, wie die Home-Seite, habe ich zusätzlich in Figma visualisiert. Bei den Scrollytelling-Seiten habe ich bewusst auf aufwändige Vorvisualisierungen verzichtet, um die Zeit in die eigentliche Umsetzung zu investieren.

Technische Umsetzung

Für die Website habe ich pro Seite eigene HTML-, CSS- und JavaScript-Dateien in Visual Studio Code angelegt und bewusst auf Baukastensysteme verzichtet. Dadurch konnte ich die Inhalte und das Verhalten der Seite vollständig selbst steuern.

Für die Typografie und das Layout habe ich die Schriften «Bryant» und «Pirulen» eingebaut und verwendet. Für alle Seiten habe ich eine andere Pastellfarbe als Akzent festgelegt, um etwas Farbe und Abwechslung auf meine Portfolio-Seite zu bringen, da ich oft schwarze Hintergründe verwendet habe. Ebenso habe ich für die Bereiche Filmen, Fotografieren und Schreiben individuelle Animationen und Effekte gestaltet.

Technische Highlights der Umsetzung:

  • Scrollytelling-Effekte mit GSAP & ScrollTrigger:
    • Fixierte Introbereiche
    • Animierte Bild-Text-Blöcke
    • Horizontales Scrollen bei der Porträt-Galerie
    • Fade-in-Effekte bei verschiedenen Abschnitten
  • Fotografie-Seite:
    Besonders aufwändig umgesetzt mit:
    • Animierten Abschnitten
    • Wechselnden Textphasen
    • Grid für Momentaufnahmen
  • Film-Seite:
    • Interaktive Filmkarten mit Pop-up-Funktion
    • Eingebettete YouTube-Videos
    • Videohintergrund
  • Home- & Über mich-Seite:
    • Individuelles Scrollytelling-Layout
    • Interaktive Symbole
    • Animierte Intro-Elemente
  • Gesamte Website:
    • Modular programmiert (HTML, CSS, JavaScript)
    • Individuell gestalteter Footer und eigene Farbwelt
    • Eigene Schriftarten und saubere HTML-Struktur
    • Impressum und Datenschutzseite integriert

Als Beispiel: So sieht die horizontale Scroll-Animation auf der Unterseite «Fotografieren» aus:

Und so sieht die «Filmen»-Seite aus:

Ein paar Teile der Website, z.B. die Home-Seite und die Kontakt-Seite habe ich ohne Scrollytelling-Effekte umgesetzt, um etwas Ruhe auf die Website zu bringen. Zudem konnte ich dadurch beim Programmieren Zeit sparen.

Visitenkarten

Parallel zur Website habe ich auch Visitenkarten gestaltet, als zusätzliches Werbemittel. Da ich sie bestellt habe, bevor ich die Portfolio-Website aufgeschaltet habe, wählte ich bewusst ein sehr schlichtes Design.

Hier ein Bild von dem ersten Entwurf:

Der aktuelle Stand des Projekts ermutigt mich dazu, meine Portfolio-Seite weiter zu pflegen, zusätzliche Arbeitsproben zu ergänzen und die technische Umsetzung zu optimieren.

(abb)

Das Portfolio-Projekt war für mich eine sehr lehrreiche und herausfordernde Erfahrung. Ich wollte gezielt eine Website von Hand programmieren, um meine Kenntnisse in HTML, CSS und JavaScript zu vertiefen. Besonders interessiert hat mich dabei die Umsetzung von Scrollytelling-Elementen, da mir diese Darstellungsform bei anderen Seiten sehr gut gefällt und ich die Umsetzung selber ausprobieren wollte.

Bereits zu Beginn des Projekts war mir bewusst, dass die technische Umsetzung komplex werden würde. Ich habe daher grossen Wert auf eine strukturierte Arbeitsweise gelegt. Trotzdem habe ich im Verlauf des Projekts gemerkt, wie wichtig es ist, von Anfang an eine klare Ordnung in den Projektdateien zu schaffen. Im Nachhinein hätte ich die Dateistruktur noch konsequenter ordnen können, um spätere Anpassungen und das Hochladen der Seite effizienter zu gestalten.

Technisch habe ich sehr viel gelernt: die Nutzung von GSAP für Animationen, den gezielten Einsatz von CSS für Scrollytelling-Effekte und den Umgang mit komplexeren JavaScript-Funktionen. Auch das Online-Stellen einer handgefertigten Seite auf dem Webhoster Hostpoint war für mich eine neue und wertvolle Erfahrung.

Nicht alles verlief ohne Probleme. Besonders die Integration von PDF-Dokumenten mit pdf.js erwies sich als deutlich komplexer als erwartet und konnte in der aktuellen Version der Website noch nicht umgesetzt werden. Als Zwischenlösung habe ich einen Fade-In-Effekt beim Erscheinen der Texte verwendet. Ebenfalls ist die Seite noch nicht responsive, da dies den zeitlichen Rahmen gesprengt hätte. Da der Fokus für mich auf der inhaltlichen und gestalterischen Umsetzung lag, ist das Layout derzeit auf die Desktop-Nutzung ausgelegt. Für die Weiterentwicklung der Website ist die Optimierung für mobile Geräte wie Smartphones und Tablets jedoch fest eingeplant.

Besonders viel Zeit und Sorgfalt habe ich in die Umsetzung der «Fotografieren»-Seite investiert. Mir war es wichtig, die Bilder dort nicht einfach statisch darzustellen, sondern den Bereich bewusst lebendig und erzählerisch zu gestalten. Mit der horizontal scrollbaren Galerie und den wechselnden Textphasen habe ich eine Lösung erarbeitet, die dem Bereich eine eigene Dynamik verleiht. Hier habe ich viel ausprobiert und verschiedene Ansätze getestet, bis ich mit dem Ergebnis zufrieden war.

Positiv hervorzuheben ist, dass ich durch die Arbeit an diesem Projekt nicht nur technische, sondern auch konzeptionelle Fähigkeiten ausbauen konnte. Ich habe viel über die Wirkung von Design und Storytelling im Web gelernt.

Das positive Feedback aus meinem Umfeld hat mich sehr gefreut und bestärkt mich darin, die Seite weiterzuentwickeln und sie für meine Selbstvermarktung zu nutzen. Die Visitenkarten habe ich vor der Programmierung der Website entworfen und in den Druck gegeben. Daher passen sie noch nicht ganz mit dem Layout der Website überein. Beim nächsten Druck werde ich die Visitenkarten daher neu entwerfen.

Im Allgemeinen habe ich im Projekt viele neue Ansätze und Ideen gewonnen, die ich künftig bei ähnlichen Projekten gezielt einsetzen kann.