Eco Mode Activated

You are currently viewing the ultra-lightweight version of my portfolio.

Eco-friendly Personal Portfolio (2025)

This portfolio was designed to demonstrate that a high-performing, pleasant-to-use website can also be lightweight and resource-efficient.

Project Overview

This site offers two versions: standard and eco. The eco version you're currently viewing is deliberately simplified to provide faster access to information, especially on mobile devices and limited connections.

Project Architecture

  • Astro for generating static HTML with little to no JavaScript
  • Tailwind CSS for optimized styles and minimal CSS footprint
  • Multilingual support (French, English, German)
  • Eco mode accessible via a distinct URL for direct sharing

Technical Challenges

  • Creating a smooth user experience with minimal JavaScript
  • Designing an eco version that doesn't sacrifice essential information
  • Setting up a simple multilingual navigation system
  • Drastically reducing page size without compromising readability

Practical Solutions

Simple Architecture

Static pages with minimal hydration for fast navigation without overloading the browser.

Direct Eco Mode

A version of the site that eliminates the superfluous to get straight to the point, particularly valuable on mobile or slow connections.

Multilingual Navigation

URL-based system that allows sharing a page directly in the language of your choice.

Minimalist Design

Clean interface that prioritizes content over resource-intensive visual effects.

A web without cookie banners

Have you noticed there's no cookie banner on this site? Websites that only use cookies for essential functionalities don't need your consent under GDPR. This portfolio respects your privacy by default: no trackers, no analytics, no ads.

Imagine a web where most sites adopt this approach: a smoother experience, less frustration, and more respect for user attention.

Benefits of Eco Mode

  • Near-instant page loading (fewer resources to download)
  • Streamlined navigation that gets straight to the point
  • Better experience on older devices or limited connections
  • Reduced energy consumption (less computation on the browser side)

Performance and Impact

Page Size (Standard Mode) < 200 Kb
Page Size (Eco Mode) < 70 Kb
Loading Time < 1 second
Lighthouse Score 99-100/100

ClientRouter & transition-persist

Eco mode deliberately disables Astro 5's <code>ClientRouter</code>, unlike standard mode which uses it for smooth transitions. This is a deliberate decision that offers several advantages:

  • Less JavaScript to load and execute by the browser
  • More direct and lightweight navigation, ideal for limited connections
  • Less client-side processing, saving battery on mobile
  • Improved compatibility with older or less powerful devices

This approach shows that it's possible to adapt the user experience according to the usage context, without compromising access to information.

Why an Eco Mode?

I believe a good website should be accessible and fast first and foremost. Eco mode isn't just about the environment—it's also a better experience for many users. How many times have you left a site because it was too slow to load, cluttered with ads, or harassing you to accept cookies? I prefer a lighter web that respects user attention and works well on all devices without frustration. This portfolio is my modest contribution to that vision.

Technologies Used

Astro, TailwindCSS, minimal JavaScript