WTF - Die Geschichte und Technik dieser Webseite

Diese Webseite existiert in ähnlicher Grundstruktur mindestens seit 2008, anfänglich mit wenig Inhalt und wechselnden Hintergrundfotos. Ein Blick in die Vergangenheit zeigt, wie die Seite im Februar 2010 aussah: Wayback Machine - Februar 2010.

Im Jahr 2020 erfolgte ein leichtes Redesign und ein technisches Upgrade auf REDAXO 5, begleitet von der fortlaufenden Aktualisierung der Hintergrundbilder. So präsentierte sich die Seite im August 2020: Wayback Machine - August 2020.

Technische Kernkomponenten

Ab 2024 wurde das bisherige einfache Hintergrund-Script durch eine KI-generierte Version ersetzt. Dieses Script, das ich kontinuierlich erweitert und verfeinert habe, zeigt die Fotos in zufälliger Reihenfolge an, wobei jedes Bild nur einmal pro Durchlauf erscheint. REDAXO und dieses Script bilden das technische Herzstück der Webseite.

Die Hintergrundfotos sind mit Schlagwörtern versehen, was ihre Anzeige in verschiedenen Galerien ermöglicht, beispielsweise unter Bike und Italien. Im Hintergrund kümmert sich REDAXO um die Fotoauswahl, die Auslieferung im webp-Format sowie die AJAX-Schnittstelle.

Ausser den AddOns yrewrite (für schöne URLs), httpheader (für Security Header), vidstack für Videos und ein eigenes AddOn für die Auslieferung des Grundthemes wird für das Frontend bewusst auf weitere AddOns verzichtet! Es werden auschließlich REDAXO Core-Funktionen genutzt.

Animationen und dynamische Inhalte

Sukzessive wurden eigene Animationen und vor allem Animationen von CODEPEN integriert. Alle Funktionalitäten – von Animationen bis zur Anzeige von Vorschaubildern – können individuell oder in Kombination jeder einzelnen Seite zugewiesen werden. So können die verschiedenen Galerien mit unterschiedlichen visuellen Effekten versehen werden, wie z.B. METAL und ZombieWalk.

Einige dieser Effekte nutzen ein zufälliges Hintergrundbild, das über den Aufruf https://andreaseberhard.de/randomimage abgerufen werden kann. Die URL unterstützt auch Query-Parameter zur Filterung, z.B. nach "Live" oder "Italien".

Ende 2024 kamen zudem Hintergrundvideos hinzu, für die eine spezielle Übersichtsseite existiert. Dafür habe ich ein Script zur Implementierung sanfter Übergänge zwischen den Videos entwickelt, das auch auf Codepen verfügbar ist: https://codepen.io/aeberhard-the-solid/pen/KwPWLxg.

Diese Webseite dient mir primär als Spielwiese zur Anwendung von REDAXO, PHP, JavaScript und CSS.