Mode Éco activé

Vous consultez actuellement la version ultra-légère de mon portfolio.

Portfolio personnel éco-responsable (2025)

Ce portfolio a été conçu pour montrer qu'un site web performant et agréable à utiliser peut aussi être léger et respectueux des ressources.

Aperçu du projet

Ce site propose deux versions : standard et éco. La version éco que vous consultez actuellement est délibérément simplifiée pour offrir un accès plus rapide à l'information, surtout sur mobile et connexions limitées.

Architecture du projet

  • Astro pour générer du HTML statique avec peu ou pas de JavaScript
  • Tailwind CSS pour des styles optimisés et une empreinte CSS minimale
  • Support multilingue (français, anglais, allemand)
  • Mode éco accessible via une URL distincte pour un partage direct

Défis techniques

  • Créer une expérience utilisateur fluide avec un minimum de JavaScript
  • Concevoir une version éco qui ne sacrifie pas l'information essentielle
  • Mettre en place un système de navigation multilingue simple
  • Réduire drastiquement la taille des pages sans compromettre la lisibilité

Solutions pratiques

Architecture simple

Pages statiques avec hydratation minimale, pour une navigation rapide sans surcharge du navigateur.

Mode Éco direct

Une version du site qui élimine le superflu pour aller droit à l'essentiel, particulièrement appréciable sur mobile ou connexion lente.

Navigation multilingue

Système basé sur l'URL qui permet de partager directement une page dans la langue de votre choix.

Design minimaliste

Interface épurée qui donne la priorité au contenu plutôt qu'aux effets visuels gourmands en ressources.

Un web sans bandeaux de cookies

Avez-vous remarqué l'absence de bandeau de cookies sur ce site ? Les sites qui n'utilisent des cookies que pour des fonctionnalités essentielles n'ont pas besoin de votre consentement selon le RGPD. Ce portfolio respecte votre vie privée par défaut : pas de trackers, pas d'analytics, pas de publicité.

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.

Avantages du mode éco

  • Chargement quasi instantané des pages (moins de ressources à télécharger)
  • Navigation simplifiée qui va droit au but
  • Meilleure expérience sur appareils anciens ou connexions limitées
  • Consommation d'énergie réduite (moins de calculs côté navigateur)

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 & transition-persist

Le mode éco désactive délibérément le <code>ClientRouter</code> d'Astro 5, contrairement au mode standard qui l'utilise pour des transitions fluides. C'est une décision délibérée qui offre plusieurs avantages :

  • Moins de JavaScript à charger et exécuter par le navigateur
  • Navigation plus directe et légère, idéale pour connexions limitées
  • Moins de traitements côté client, économisant la batterie sur mobile
  • Compatibilité améliorée avec les appareils plus anciens ou moins puissants

Cette approche montre qu'il est possible d'adapter l'expérience utilisateur en fonction du contexte d'utilisation, sans compromettre l'accès à l'information.

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, très peu de JavaScript/TypeScript