Josselin HANEL.
FR | EN | DE
Eco Mode
← All Projects

Eco-friendly Personal Portfolio (2025)

This portfolio demonstrates that a website can be visually pleasing, functional, and lightweight. It offers both a standard version and an eco version, each with its own advantages.

Project Overview

How many times have you left a website because it was too slow, full of intrusive ads, or harassing you to accept cookies? This portfolio is my attempt to create a more respectful web experience that works well on all devices without frustration.

View Source Code

Key Features

Practical Eco Mode

A simplified version of the site that eliminates the superfluous to get straight to the point - ideal on mobile or slow connections.

Multilingual Support

Available in French, English, and German with automatic redirection based on visitor location.

Fast Loading

Resource optimization for a smooth and responsive experience on all devices.

Smooth Transitions

Persistent elements between pages to reduce redundant loading and provide seamless navigation.

Technical Approach

Frontend 🖥️

  • • Astro to generate static HTML with minimal JavaScript
  • • Tailwind CSS for optimized styles and minimal footprint
  • • Persistent transitions to avoid reloading common elements
  • • Multilingual redirection via Cloudflare Rules
  • • Architecture allowing two distinct modes (standard and eco)

Optimizations ⚙️

  • • Static HTML pages with JavaScript limited to essential functionalities
  • • Optimized images with modern formats (WebP, AVIF) and lazy loading
  • • Transition-persist attributes on components shared between pages
  • • Preloading of critical resources for instant navigation
  • • Eco mode accessible via a simple button for instant switching

Challenges Encountered

1

Experience vs Performance

Finding the balance between an attractive interface and an ultra-performing site.

2

Smooth Navigation

Designing a seamless transition between pages without reloading common elements.

3

Dual Mode

Designing two versions of the site without unnecessarily duplicating code and resources.

4

Accessibility

Ensuring that both versions remain perfectly accessible to everyone.

Design Choices

Content Priority

🧩

Information remains at the forefront, without being overwhelmed by superfluous decorative elements.

Persistent Components

🔄

Using transition-persist to maintain common elements between pages and improve fluidity.

Intuitive URLs

🗺️

Clear URL structure by language and mode (/fr/, /en/, /fr/eco/) for easy page sharing.

Visible Eco Mode

🔍

Button always accessible to switch between standard and eco modes according to your preferences.

A web without cookie banners

Have you noticed there's no cookie banner on this site? This isn't an oversight. Most sites don't actually need these intrusive banners that degrade user experience, especially on mobile where they sometimes take up half the screen.

Websites that only use cookies for essential functionalities (like remembering your preferred language or maintaining a session) don't need to ask for your consent. GDPR legislation only requires this for tracking, analytics, or advertising cookies.

This portfolio respects your privacy by default: no trackers, no analytics, no ads—therefore no need for a banner. Imagine a web where most sites adopt this approach: a smoother experience, less frustration, and more respect for user attention.

Standard vs Eco

Metric Standard Mode Eco Mode
JavaScript Minimal, for essential interactions Almost none
Images Optimized but present Reduced to the necessary minimum
Transitions Persistent elements between pages Direct navigation without animations
Experience Richer visually More direct, content-focused

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

To enhance the navigation experience, I use Astro 5's <code>ClientRouter</code> with the <code>transition-persist</code> attribute on several key components of the site. This approach allows for:

  • Smooth navigation with transition effects between pages without a full reload
  • Preservation of common elements between pages (logo, photo, menu, footer) without reloading them
  • Drastic reduction in network requests during navigation
  • Smooth transitions without flickering of elements marked with transition-persist

Mode standard vs Mode éco

A key difference between the two modes of this site concerns the use of ClientRouter:

  • Standard mode: ClientRouter is enabled for smooth transitions and a richer experience
  • Eco mode: ClientRouter is deliberately disabled for a lighter and more direct experience

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

This approach demonstrates how the same codebase can adapt to different usage contexts, offering either a richer experience or maximum performance and lightness.

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 TypeScript
← Previous Project: E-sport Application with Chat

Interested in working together?

I am available for short-term or long-term assignments, team projects or web eco-design consultations.

Contact me