Umweltfreundliches persönliches Portfolio (2025)

Dieses Portfolio zeigt, dass eine Website visuell ansprechend, funktional und leichtgewichtig sein kann. Es bietet sowohl eine Standardversion als auch eine Öko-Version, jede mit ihren eigenen Vorteilen.

Projektübersicht

Wie oft haben Sie eine Website verlassen, weil sie zu langsam war, voller aufdringlicher Werbung oder Sie belästigte, Cookies zu akzeptieren? Dieses Portfolio ist mein Versuch, ein respektvolleres Web-Erlebnis zu schaffen, das auf allen Geräten ohne Frustration gut funktioniert.

Quellcode ansehen

Hauptmerkmale

Praktischer Öko-Modus

Eine vereinfachte Version der Website, die das Überflüssige eliminiert, um direkt auf den Punkt zu kommen - ideal für Mobilgeräte oder langsame Verbindungen.

Mehrsprachige Unterstützung

Verfügbar in Französisch, Englisch und Deutsch mit automatischer Weiterleitung basierend auf dem Standort des Besuchers.

Schnelles Laden

Ressourcenoptimierung für ein reibungsloses und reaktionsschnelles Erlebnis auf allen Geräten.

Sanfte Übergänge

Persistente Elemente zwischen den Seiten, um redundantes Laden zu reduzieren und eine nahtlose Navigation zu ermöglichen.

Technischer Ansatz

Frontend 🖥️

• Astro zur Generierung von statischem HTML mit minimalem JavaScript
• Tailwind CSS für optimierte Stile und minimalen Fußabdruck
• Persistente Übergänge, um das erneute Laden gemeinsamer Elemente zu vermeiden
• Mehrsprachige Weiterleitung über Cloudflare Rules
• Architektur, die zwei unterschiedliche Modi ermöglicht (Standard und Öko)

Optimierungen ⚙️

• Statische HTML-Seiten mit auf wesentliche Funktionen beschränktem JavaScript
• Optimierte Bilder mit modernen Formaten (WebP, AVIF) und Lazy Loading
• Transition-persist-Attribute für zwischen den Seiten gemeinsam genutzte Komponenten
• Vorladen kritischer Ressourcen für sofortige Navigation
• Öko-Modus über einen einfachen Button für sofortiges Umschalten zugänglich

Herausforderungen

Erfahrung vs. Leistung

Die Balance zwischen einer attraktiven Benutzeroberfläche und einer leistungsstarken Website finden.

Reibungslose Navigation

Gestaltung eines nahtlosen Übergangs zwischen Seiten ohne erneutes Laden gemeinsamer Elemente.

Dualer Modus

Entwicklung von zwei Versionen der Website ohne unnötige Codeduplizierung und Ressourcen.

Barrierefreiheit

Sicherstellen, dass beide Versionen für alle perfekt zugänglich bleiben.

Design-Entscheidungen

Inhalt hat Priorität

🧩

Informationen bleiben im Vordergrund, ohne von überflüssigen dekorativen Elementen überwältigt zu werden.

Persistente Komponenten

🔄

Verwendung von transition-persist, um gemeinsame Elemente zwischen Seiten beizubehalten und die Flüssigkeit zu verbessern.

Intuitive URLs

🗺️

Klare URL-Struktur nach Sprache und Modus (/fr/, /en/, /fr/eco/) für einfaches Teilen von Seiten.

Sichtbarer Öko-Modus

🔍

Button ist immer zugänglich, um je nach Präferenz zwischen Standard- und Öko-Modus zu wechseln.

Ein Web ohne Cookie-Banner

Haben Sie bemerkt, dass es auf dieser Website kein Cookie-Banner gibt? Dies ist kein Versehen. Die meisten Websites benötigen diese aufdringlichen Banner nicht, die die Benutzererfahrung beeinträchtigen, besonders auf mobilen Geräten, wo sie manchmal die Hälfte des Bildschirms einnehmen.

Websites, die Cookies nur für wesentliche Funktionalitäten verwenden (wie das Speichern Ihrer bevorzugten Sprache oder das Aufrechterhalten einer Sitzung), müssen nicht um Ihre Einwilligung bitten. Die DSGVO-Gesetzgebung verlangt dies nur für Tracking-, Analyse- oder Werbe-Cookies.

Dieses Portfolio respektiert Ihre Privatsphäre standardmäßig: keine Tracker, keine Analysetools, keine Werbung – daher kein Bedarf an einem Banner. 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.

Standard vs. Öko

Metrik	Standardmodus	Öko-Modus
JavaScript	Minimal, für wesentliche Interaktionen	Fast keins
Bilder	Optimiert, aber vorhanden	Auf das notwendige Minimum reduziert
Übergänge	Persistente Elemente zwischen Seiten	Direkte Navigation ohne Animationen
Erfahrung	Visuell reichhaltiger	Direkter, inhaltsbezogener

Leistung und Auswirkungen

Seitengröße (Standardmodus)

< 200 KB

Seitengröße (Öko-Modus)

< 70 KB

Ladezeit

< 1 Sekunde

Lighthouse-Punktzahl

99-100/100

ClientRouter et transition-persist

Um das Navigationserlebnis zu verbessern, verwende ich Astro 5's <code>ClientRouter</code> mit dem <code>transition-persist</code>-Attribut auf mehreren Schlüsselkomponenten der Website. Dies ermöglicht:

Reibungslose Navigation mit Übergangseffekten zwischen Seiten ohne vollständiges Neuladen
Beibehaltung gemeinsamer Elemente zwischen den Seiten (Logo, Foto, Menü, Footer) ohne sie neu zu laden
Drastische Reduzierung der Netzwerkanfragen während der Navigation
Sanfte Übergänge ohne Flackern von Elementen, die mit transition-persist markiert sind

Mode standard vs Mode éco

Ein wesentlicher Unterschied zwischen den beiden Modi dieser Website betrifft die Verwendung von ClientRouter:

Standardmodus: ClientRouter ist für reibungslose Übergänge und ein reichhaltigeres Erlebnis aktiviert
Öko-Modus: ClientRouter wird bewusst deaktiviert, um ein leichteres und direkteres Erlebnis zu ermöglichen

// Dans layout.astro - L'activation conditionnelle en fonction du mode

// Ajouter Client Router uniquement si on n'est pas en mode éco
  {!isEcoMode && <ClientRouter />}
  
  // En mode standard: transitions fluides avec éléments persistants 
  // En mode éco: navigation classique plus légère

Dieser Ansatz zeigt, wie sich dieselbe Codebasis an verschiedene Nutzungskontexte anpassen kann und entweder ein reichhaltigeres Erlebnis oder maximale Leistung und Leichtigkeit bietet.

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 TypeScript

← Vorheriges Projekt: E-Sport-Anwendung mit Chat

Interesse an einer Zusammenarbeit?

Ich bin verfügbar für kurz- oder langfristige Aufträge, Teamprojekte oder Beratungen zum Web-Öko-Design.

Kontakt