Öko-Modus aktiviert

Sie sehen gerade die ultraleichte Version meines Portfolios.

Umweltfreundliches persönliches Portfolio (2025)

Dieses Portfolio wurde entwickelt, um zu zeigen, dass eine leistungsstarke, angenehm zu bedienende Website auch leicht und ressourceneffizient sein kann.

Projektübersicht

Diese Website bietet zwei Versionen: Standard und Öko. Die Öko-Version, die Sie gerade betrachten, ist bewusst vereinfacht, um schnelleren Zugriff auf Informationen zu ermöglichen, besonders auf Mobilgeräten und bei begrenzten Verbindungen.

Projektarchitektur

  • Astro zur Generierung von statischem HTML mit wenig bis gar keinem JavaScript
  • Tailwind CSS für optimierte Stile und minimalen CSS-Fußabdruck
  • Mehrsprachige Unterstützung (Französisch, Englisch, Deutsch)
  • Öko-Modus über eine eigene URL für direktes Teilen zugänglich

Technische Herausforderungen

  • Schaffung einer flüssigen Benutzererfahrung mit minimalem JavaScript
  • Gestaltung einer Öko-Version, die nicht auf wesentliche Informationen verzichtet
  • Einrichtung eines einfachen mehrsprachigen Navigationssystems
  • Drastische Reduzierung der Seitengröße ohne Beeinträchtigung der Lesbarkeit

Praktische Lösungen

Einfache Architektur

Statische Seiten mit minimaler Hydratation für schnelle Navigation ohne den Browser zu überlasten.

Direkter Öko-Modus

Eine Version der Website, die das Überflüssige eliminiert, um direkt auf den Punkt zu kommen, besonders wertvoll bei mobilen oder langsamen Verbindungen.

Mehrsprachige Navigation

URL-basiertes System, das das direkte Teilen einer Seite in der Sprache Ihrer Wahl ermöglicht.

Minimalistisches Design

Übersichtliche Benutzeroberfläche, die Inhalte gegenüber ressourcenintensiven visuellen Effekten priorisiert.

Ein Web ohne Cookie-Banner

Haben Sie bemerkt, dass es auf dieser Website kein Cookie-Banner gibt? Websites, die Cookies nur für wesentliche Funktionalitäten verwenden, benötigen nach der DSGVO nicht Ihre Einwilligung. Dieses Portfolio respektiert Ihre Privatsphäre standardmäßig: keine Tracker, keine Analysetools, keine Werbung.

Stellen Sie sich ein Web vor, in dem die meisten Websites diesen Ansatz verfolgen: ein reibungsloseres Erlebnis, weniger Frustration und mehr Respekt für die Aufmerksamkeit der Benutzer.

Vorteile des Öko-Modus

  • Nahezu sofortiges Laden von Seiten (weniger Ressourcen zum Herunterladen)
  • Optimierte Navigation, die direkt zum Punkt kommt
  • Bessere Erfahrung auf älteren Geräten oder begrenzten Verbindungen
  • Reduzierter Energieverbrauch (weniger Berechnungen auf der Browser-Seite)

Leistung und Auswirkungen

Seitengröße (Standardmodus) < 200 KB
Seitengröße (Öko-Modus) < 70 KB
Ladezeit < 1 Sekunde
Lighthouse-Punktzahl 99-100/100

ClientRouter & transition-persist

Der Öko-Modus deaktiviert bewusst den <code>ClientRouter</code> von Astro 5, im Gegensatz zum Standardmodus, der ihn für reibungslose Übergänge verwendet. Dies ist eine bewusste Entscheidung, die mehrere Vorteile bietet:

  • Weniger JavaScript, das vom Browser geladen und ausgeführt werden muss
  • Direktere und leichtere Navigation, ideal für begrenzte Verbindungen
  • Weniger clientseitige Verarbeitung, spart Akku auf dem Mobilgerät
  • Verbesserte Kompatibilität mit älteren oder weniger leistungsstarken Geräten

Dieser Ansatz zeigt, dass es möglich ist, das Benutzererlebnis an den Nutzungskontext anzupassen, ohne den Zugang zu Informationen zu beeinträchtigen.

Warum ein Öko-Modus?

Ich glaube, dass eine gute Website in erster Linie zugänglich und schnell sein sollte. Der Öko-Modus betrifft nicht nur die Umwelt – er bietet auch eine bessere Erfahrung für viele Benutzer. Wie oft haben Sie eine Website verlassen, weil sie zu langsam geladen wurde, mit Werbung überladen war oder Sie belästigte, Cookies zu akzeptieren? Ich bevorzuge ein leichteres Web, das die Aufmerksamkeit der Benutzer respektiert und auf allen Geräten ohne Frustration gut funktioniert. Dieses Portfolio ist mein bescheidener Beitrag zu dieser Vision.

Verwendete Technologien

Astro, TailwindCSS, minimales JavaScript