HexaFlow
Sortir du site en scroll vertical classique — les emboîtements de texte au Lenis, on connaît par cœur.
Le brief que je me suis fixé pour Lea Dimas, designer graphique et monteuse vidéo : trouver une navigation qui change vraiment, sans sacrifier le côté premium, et une forme géométrique qui donne le ton à elle seule. C'est devenu HexaFlow : une ruche d'hexagones qui se déplie au scroll autour de l'identité centrale, en obsidienne et or. Neuf cellules — travaux graphiques, montages vidéo, CV, process, contact — chacune s'ouvre d'un clic pendant que ses voisines s'écartent.
METHODE
Le site tient dans un seul fichier HTML — un choix pratique au départ.
Mais pour garantir des performances optimales sur mobile sans ralentir l'affichage, il a fallu ruser avec React. Plutôt que de faire charger des scripts lourds par le navigateur de l'utilisateur, tout le code est précompilé et minifié en amont par un script maison. Résultat : le même site tourne à l'identique de manière ultra-fluide sur desktop et sur mobile.
Un site au poids plume de seulement 225 Ko, sans aucun framework superflu en production.
MODULE 01
Pas question d'alourdir le site avec des MP3 par défaut pour l'habillage sonore.
Tout le son est généré en temps réel par la Web Audio API : chaque survol, clic ou interaction déclenche un oscillateur (sinus, carré, triangle ou dent de scie) avec sa propre enveloppe de gain. Trois ambiances au choix — Gold, Wire, Film — définies comme de simples presets de fréquences, plus un mode Off. Poids initial ajouté au site : zéro octet de média.
Et si la cliente souhaite changer les sons ? L'espace d'administration (CMS) intègre une option dédiée pour importer et remplacer les fichiers MP3 en toute autonomie.
MODULE 02
Derrière le login, un dashboard complet aux couleurs du site : upload de photos en drag & drop, gestion des vidéos, éditeur de texte riche, tags, réglage des sons. Le tout branché sur Supabase (auth, base de données, stockage), contenus assainis avec DOMPurify. Lea met à jour son portfolio elle-même, sans toucher une ligne de code.
En tant que graphiste, j'avais des attentes élevées sur le visuel — et le résultat a dépassé ce que j'imaginais. Un portfolio unique, fluide, avec des détails que je n'ai vus nulle part ailleurs. Livré vite, et je gère mes projets moi-même depuis l'admin. Exactement le partenaire qu'il me fallait.Lea Di, Graphiste & monteuse vidéo (HexaFlow)