Projekt "Mio's Fight Academy"

Projektanalyse

Mit der Neueröffnung des Kampfsportstudios Mio’s Fight Academy sollte eine moderne Webpräsenz geschaffen werden, die das Studio professionell präsentiert, Mitglieder effizient informiert und durch SEO-Optimierung leicht auffindbar ist. Da es keine Vorgängerseite gab, lag der Fokus auf der Konzeption eines dunklen, atmosphärischen Designs mit hoher Nutzerfreundlichkeit und technischer Exzellenz.

Kernziele:

• Entwicklung einer ultra-schnellen, mobiloptimierten Webseite.
• Umsetzung eines intuitiven Designs mit Fokus auf Responsiveness und Accessibility.
• Technische Basis für langfristige Skalierbarkeit und Sicherheit.

Projektumsetzung

Technischer Stack

• Static Site Generator (SSG): 11ty für serverseitiges Rendering und maximale Performance.
• Frontend: Alpine.js für interaktive Elemente, TailwindCSS für konsistentes, responsives Design.
• Hosting: Uberspace mit automatisierten Backups über Git.
• Workflow: CI/CD-Pipeline für automatisches Deployment aus dem Git-Repository.

Custom Bildoptimierung

Schlanke Eigenlösung: Eine in 11ty integrierte JavaScript-Funktion verarbeitet Bilder während des Builds:

• Automatische Konvertierung in WebP (80% kleinere Dateien als JPEG/PNG).
• Generierung responsiver Bildvarianten (480px, 800px, 1200px) für optimale Darstellung auf allen Geräten.
• Komprimierung ohne Qualitätsverlust via Sharp.js. Vorteile: Keine CDN-Abhängigkeit, volle Kontrolle über die Medienauslieferung.

Sicherheit & Skalierbarkeit

• Sicherheit: Durch den SSG-Ansatz minimale Angriffsfläche, SSL-Verschlüsselung, Backups via Git.
• Skalierbarkeit: Statische Architektur ermöglicht Handling hoher Traffic-Spitzen ohne Performance-Einbußen.

Ergebnisse

Technische Umsetzung:

• Lighthouse-Audit: Volle 100/100 Punkte in allen vier Kategorien (Performance, Accessibility, Best Practices, SEO).
• Ladezeiten: Unter 1 Sekunde dank statischem Rendering und optimierten Medien.

Nutzerfeedback:

• Einfache Bedienbarkeit, besonders auf Mobilgeräten.
• Atmosphärisches Design wird von Mitgliedern und Neukunden gelobt.

Zukunftssicherheit:

• CI/CD-Pipeline und Git-basierte Backups garantieren einfache Wartung.
• Flexibles Design lässt sich bei Bedarf um neue Funktionen erweitern.

Verwendete Technologien

• Frontend: 11ty, Alpine.js, TailwindCSS
• Bildmanagement: Custom JS-Lösung mit Sharp.js
• DevOps: Git, CI/CD-Pipeline, Uberspace-Hosting

Projekt -Besonderheiten:

• Performance-First-Ansatz: Beweist, dass statische Webseiten auch ohne CDN Top-Scores erreichen können.
• Agile Umsetzung: Vom Konzept bis zum Go-Live unter Einhaltung straffer Deadlines.
• Kundenzentrierung: Kombination aus ästhetischem Design und technischer Präzision – genau auf die Zielgruppe der Kampfsport-Community zugeschnitten.