01 · Cabinet d’ingénierie · Lyon · 2026
AutomatX — un ingénieur, X labs.
Le site d’AutomatX Labs, mon cabinet d’ingénierie indépendant. Quatre labs répartis selon ce qu’ils améliorent (un procédé, un corps, un objet physique, un calcul), huit compétences qui les traversent, et une carte stellaire en 3D qui réunit tout le modèle sur un seul écran.
// Le brief
Plusieurs domaines, une méthode, un site.
Automatisation de laboratoire, analyse du mouvement, impression 3D, IA. Sur un CV, ça paraît dispersé. Le site devait montrer qu’il s’agit d’une seule méthode appliquée partout : mesurer, automatiser, rendre reproductible.
La réponse, c’est le modèle X Labs. Les labs sont répartis selon le système qu’ils améliorent, et les compétences sont les outils qu’ils partagent. Un projet appartient au lab dont il améliore le système, pas à celui des outils qu’il utilise.
[ x_labs ]
Quatre labs, huit compétencesProcédé · Pharma, Corps · Sport, Matière · Robotique et Calcul · IA partagent capteurs, électronique, mécanique, logiciel, données, IA/ML, validation et industrialisation.
[ zero_requests ]
Rien ne vient d’ailleursPolices, scripts et three.js sont tous auto-hébergés. Ni CDN, ni Google Fonts, ni analytics, donc rien qui pose une question RGPD.
[ progressive ]
Fonctionne sans JavaScriptD’abord du HTML et du CSS. Les scripts ne font qu’ajouter : la carte 3D, les figures sport animées et les apparitions au défilement.
[ i18n ]
EN · FRDix URL, chacune associée à son miroir français via hreflang, plus un sitemap et du JSON-LD.
// Réalisation phare
Les labs en constellation
La carte de la page d’accueil, qui tourne ici comme sur le site en ligne. Les quatre labs sont placés sur deux diagonales, si bien que leurs liens dessinent le X du logo. Les compétences gravitent sur une sphère extérieure, près des labs qu’elles servent. Glissez pour tourner autour, lancez une étoile, survolez-la pour allumer ses liens.
web3d.jsglisser · survoler · ctrl + molette pour zoomer
Automat Labs
AutomatX Labs est le cabinet d’ingénierie indépendant de Yolan Weiler, ingénieur biomédical et électrique (KU Leuven) installé à Lyon. Une seule méthode appliquée partout : mesurer, automatiser, rendre reproductible.
Glissez pour tourner · ⌘/Ctrl + molette ou pincez pour zoomer · touchez une étoile pour lire →// Comment c’est construit
Le SVG reste la source de vérité
La carte part d’un SVG accessible : vrais liens, nœuds focalisables, libellés lisibles. three.js est une couche placée derrière, et le SVG reste utilisable si cette couche ne se charge pas.
01 / lire le balisage
Nœuds & liens depuis le DOM
web3d.js construit le graphe à partir des cercles du SVG et des liens <line data-a data-b> : modifier la carte, c’est modifier le balisage.
02 / recaler chaque image
Reprojeté à l’écran
À chaque image, chaque étoile est projetée à l’écran et son nœud SVG déplacé au même endroit, pour que libellés, anneaux de focus et zones cliquables restent sur les étoiles.
03 / rien au repos
Différé, en pause, facultatif
Le script ne se charge qu’à l’approche de la carte et se met en pause hors écran. Avec le mouvement réduit ou sans WebGL, la carte plate reste.
0
requête externe
4 × 8
labs × compétences
10
URL · EN + FR
1
bibliothèque tierce
// Galerie
À travers le site
