Kontakt Webdesign & Development
Maßgeschneiderte Websites mit Scroll-Animationen und blitzschneller Performance.
Mehr erfahren →Dreier Dienstleistungen
Kompletter Markenauftritt für ein Dienstleistungsunternehmen.
Mehr erfahren →Holger Roth – WakeHouse
Vom Brochure-Page zur Live-Plattform am Rhein.
Die Geschichte
Das Wetter entscheidet – also zeigen wir's live.
Holger Roth betreibt WakeHouse am Schiersteiner Hafen in Wiesbaden. Sein Boot – die Super Air Nautique S21 mit 400 PS – ist eines der präzisesten Wake-Boote Deutschlands. Sieben Tour-Typen, bis zu zwölf Personen, ein Spielfeld zwischen Rhein und Mainspitze. Das Produkt stand. Die erste Website zeigte es brav. Mehr nicht.
Für die Neuauflage war die Frage klar: Was braucht jemand, der am Morgen entscheidet, ob er heute aufs Wasser will? Die Antwort: echte Daten. Pegelstand, Wassertemperatur, Wind, Wetter – nicht Prognose, sondern Messung. Und daneben einen Weg, die Tour in 30 Sekunden zu konfigurieren, ohne Telefonat, ohne Formular-Pingpong.
"Aus einer Brochure wurde ein echtes Erlebnis."
– Holger Roth, WakeHouse
Wir haben ein Live-Dashboard gebaut, das Daten vom DWD, der Wasser- und Schifffahrtsverwaltung und der Bundesanstalt für Gewässerkunde zusammenführt. Wir haben Claude per Cron-Job beigebracht, Wassertemperaturen aus PNG-Grafiken zu lesen, weil die BAfG keine API anbietet. Wir haben einen Slot-basierten Konfigurator entwickelt, der Instagram-Rabatte live einrechnet. Und das Ganze auf eine Seite gepackt, die in unter einer Sekunde interaktiv ist – ohne Tracking, ohne Cookie-Banner, ohne SaaS-Abhängigkeiten.
Leistungen
Was wir umgesetzt haben
01
Live-Dashboard mit echten Messdaten
Wetter, Wind, Rhein-Pegel und Wassertemperatur – direkt von DWD, WSV und BAfG, server-seitig gecached über einen PHP-Proxy mit 30-Minuten-Cache und Fallback-Logik.
02
KI-gestützte Wassertemperatur
Cron alle 10 Minuten, SHA-256-Hash-Vergleich, Claude Haiku liest den Zahlenwert aus dem BAfG-PNG – ca. 10 Cent pro Monat statt manueller Pflege.
03
Interaktiver Tour-Konfigurator
15-Minuten-Slots, Fokus-Auswahl, Equipment-Leihe und dreistufige Instagram-Rabattstaffel mit Live-Motivator zum nächsten Tier.
04
Server-seitiges Kontaktformular
Eigenes api/contact.php auf Hostinger mit Honeypot, Rate-Limit (3 Submits/IP/Stunde) und Reply-To – keine SaaS-Weiche, keine Drittanbieter-Fußabdrücke.
05
Progressive Web App
Manifest, Service Worker mit Stale-while-Revalidate, Home-Screen-Installation und Offline-Fallback für bereits besuchte Seiten.
06
Cinematic Scroll-Design
Scroll-gesteuertes Hero-Video, 14-Bilder-Marquee, SVG-Grain-Overlay, Hover-Color-Grading und Lenis-ähnliche Inertia – mit sauberem Reduced-Motion-Fallback.
Ergebnisse
Was wir erreicht haben
100
Lighthouse Performance
< 1 s
Time to Interactive
0
Tracker, Cookies, Banner
Die neue Seite erreicht Lighthouse 100/100 trotz Hero-Video, Live-API-Integration und PWA-Infrastruktur. Über 40 Bilder wurden von JPG auf WebP konvertiert, das Hero-Video von 8 MB auf 2 MB komprimiert.
Durch den server-seitigen API-Proxy landet kein einziger Request vom Besucher bei externen Diensten – das spart Bandbreite, umgeht CORS und hält die Seite vollständig DSGVO-konform ohne Cookie-Banner. Alle Bildmotive sind personenfrei, weil Persönlichkeitsrechte im Zweifel schwerer wiegen als ein Portrait.
Technologien
Das Ergebnis ansehen
Live-Dashboard, Konfigurator, PWA – alles auf wakehouse.de.