Portfolio personnel éco-responsable (2025)

Ce portfolio démontre qu'un site peut être à la fois agréable visuellement, fonctionnel et léger. Il propose une version standard et une version éco, chacune avec ses avantages.

Aperçu du projet

Combien de fois avez-vous quitté un site parce qu'il était trop lent, bourré de publicités intrusives, ou vous harcelait pour accepter des cookies? Ce portfolio est ma tentative de créer une expérience web plus respectueuse, qui fonctionne bien sur tous les appareils sans frustration.

Voir le code source

Caractéristiques principales

Mode éco pratique

Une version simplifiée du site qui élimine le superflu pour aller droit à l'essentiel - idéale sur mobile ou connexion lente.

Support multilingue

Disponible en français, anglais et allemand avec redirection automatique basée sur la localisation du visiteur.

Chargement rapide

Optimisation des ressources pour une expérience fluide et réactive sur tous les appareils.

Transitions fluides

Éléments persistants entre les pages pour réduire les chargements redondants et offrir une navigation sans interruption.

Approche technique

Frontend 🖥️

• Astro pour générer du HTML statique avec un minimum de JavaScript
• Tailwind CSS pour des styles optimisés et une empreinte minimale
• Transitions persistantes pour éviter de recharger les éléments communs
• Redirection multilingue via Cloudflare Rules
• Architecture permettant deux modes distincts (standard et éco)

Optimisations ⚙️

• Pages HTML statiques avec JavaScript limité aux fonctionnalités essentielles
• Images optimisées avec formats modernes (WebP, AVIF) et chargement différé
• Attributs transition-persist sur les composants partagés entre les pages
• Préchargement des ressources critiques pour une navigation instantanée
• Mode éco accessible via un simple bouton pour basculer instantanément

Défis rencontrés

Expérience vs performance

Trouver l'équilibre entre une interface attrayante et un site ultra-performant.

Navigation fluide

Concevoir une transition transparente entre les pages sans recharger les éléments communs.

Double mode

Concevoir deux versions du site sans dupliquer inutilement le code et les ressources.

Accessibilité

S'assurer que les deux versions restent parfaitement accessibles à tous.

Choix de conception

Priorité au contenu

🧩

L'information reste au premier plan, sans être submergée par des éléments décoratifs superflus.

Composants persistants

🔄

Utilisation de transition-persist pour conserver les éléments communs entre les pages et améliorer la fluidité.

URLs intuitives

🗺️

Structure d'URL claire par langue et mode (/fr/, /en/, /fr/eco/) pour un partage facile des pages.

Mode éco visible

🔍

Bouton toujours accessible pour basculer entre les modes standard et éco selon vos préférences.

Un web sans bandeaux de cookies

Avez-vous remarqué qu'il n'y a pas de bandeau de cookies sur ce site ? Ce n'est pas un oubli. La plupart des sites n'ont pas besoin de ces bandeaux intrusifs qui dégradent l'expérience utilisateur, surtout sur mobile où ils occupent parfois la moitié de l'écran.

Les sites qui n'utilisent des cookies que pour des fonctionnalités essentielles (comme mémoriser votre langue préférée ou maintenir une session) n'ont pas besoin de demander votre consentement. La législation RGPD ne l'exige que pour les cookies de suivi, d'analyse ou de publicité.

Ce portfolio respecte votre vie privée par défaut : pas de trackers, pas d'analytics, pas de publicité — donc pas besoin de bandeau. Imaginez un web où la majorité des sites adoptent cette approche : une expérience plus fluide, moins de frustration et plus de respect pour l'attention de l'utilisateur.

Standard vs Éco

Métrique	Mode standard	Mode éco
JavaScript	Minimal, pour interactions essentielles	Quasiment absent
Images	Optimisées mais présentes	Réduites au minimum nécessaire
Transitions	Éléments persistants entre les pages	Navigation directe sans animations
Expérience	Plus riche visuellement	Plus directe, axée sur le contenu

Performance et impact

Taille de page (mode standard)

< 200 Ko

Taille de page (mode éco)

< 50 Ko

Temps de chargement

< 1 seconde

Score Lighthouse

99-100/100

ClientRouter et transition-persist

Pour améliorer l'expérience de navigation, j'utilise <code>ClientRouter</code> d'Astro 5 avec l'attribut <code>transition-persist</code> sur plusieurs composants clés du site. Cette approche permet :

Navigation fluide avec effet de transition entre les pages sans rechargement complet
Conservation des éléments communs entre les pages (logo, photo, menu, footer) sans les recharger
Réduction drastique des requêtes réseau lors de la navigation
Transitions fluides sans clignotement des éléments marqués avec transition-persist

Mode standard vs Mode éco

Une différence clé entre les deux modes de ce site concerne l'utilisation de ClientRouter :

Mode standard: ClientRouter est activé pour des transitions fluides et une expérience plus riche
Mode éco: ClientRouter est délibérément désactivé pour une expérience plus légère et plus directe

// 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

Cette approche permet de montrer comment une même base de code peut s'adapter à différents contextes d'utilisation, offrant soit une expérience plus riche, soit une performance et légèreté maximales.

Pourquoi un mode éco?

Je crois qu'un bon site web devrait d'abord être accessible et rapide. Le mode éco n'est pas qu'une question d'environnement : c'est aussi une meilleure expérience pour beaucoup d'utilisateurs. Combien de fois avez-vous quitté un site parce qu'il était trop lent à charger, encombré de publicités, ou vous harcelait pour accepter des cookies? Je préfère un web plus léger, qui respecte l'attention de l'utilisateur et fonctionne bien sur tous les appareils sans frustration. Ce portfolio est ma modeste contribution à cette vision.

Technologies utilisées

Astro TailwindCSS TypeScript

← Projet précédent: Application e-sport avec chat

Intéressé par une collaboration?

Je suis disponible pour des missions ponctuelles ou longue durée, des projets d'équipe ou des consultations en éco-conception web.

Me contacter