01 · Ingenieurspraktijk · Lyon · 2026
AutomatX — één ingenieur, X labs.
De site van AutomatX Labs, mijn onafhankelijke ingenieurspraktijk. Vier labs, ingedeeld naar wat ze verbeteren (een proces, een lichaam, iets fysieks, een berekening), acht vaardigheden die erdoorheen lopen, en een 3D-sterrenkaart die het hele model op één scherm zet.
// De opdracht
Veel vakgebieden, één methode, één site.
Labautomatisering, bewegingsanalyse, 3D-printen, AI. Op een cv oogt dat versnipperd. De site moest tonen dat het één methode is, overal toegepast: meten, automatiseren, reproduceerbaar maken.
Het antwoord werd het X Labs-model. Labs zijn ingedeeld naar het systeem dat ze verbeteren, en vaardigheden zijn de tools die ze delen. Een project hoort bij het lab waarvan het het systeem verbetert, niet bij de tools die het gebruikt.
[ x_labs ]
Vier labs, acht vaardighedenProces · Pharma, Lichaam · Sport, Materie · Robotica en Rekenen · AI delen sensoren, elektronica, mechanica, software, data, AI/ML, validatie en industrialisatie.
[ zero_requests ]
Niets komt van eldersFonts, scripts en three.js worden allemaal zelf gehost. Geen CDN, geen Google Fonts, geen analytics, dus niets dat een AVG-vraag oproept.
[ progressive ]
Werkt zonder JavaScriptEerst gewone HTML en CSS. Scripts voegen alleen iets toe: de 3D-kaart, live sportfiguren en onthullingen bij het scrollen.
[ i18n ]
EN · FRTien URL’s, elk via hreflang gekoppeld aan de Franse versie, plus een sitemap en JSON-LD.
// Signature build
De labs als sterrenbeeld
De kaart van de homepage, die hier draait zoals op de live site. De vier labs staan op twee diagonalen, zodat hun verbindingen de X van het logo tekenen. Vaardigheden draaien op een buitenste bol, dicht bij de labs die ze bedienen. Sleep om te draaien, gooi een ster weg, hover om de verbindingen op te lichten.
web3d.jsslepen · hover · ctrl + scroll om te zoomen
Automat Labs
AutomatX Labs is de onafhankelijke ingenieurspraktijk van Yolan Weiler, biomedisch & elektrotechnisch ingenieur (KU Leuven), gevestigd in Lyon. Eén methode, overal toegepast: meten, automatiseren, reproduceerbaar maken.
Sleep om te draaien · ⌘/Ctrl + scroll of knijp om te zoomen · tik op een ster om te lezen →// Hoe het gebouwd is
De SVG blijft de bron van waarheid
De kaart begint als een toegankelijke SVG: echte links, focusbare nodes, leesbare labels. three.js is een laag erachter, en de SVG blijft werken als die laag niet laadt.
01 / lees de markup
Nodes & lijnen uit de DOM
web3d.js bouwt de graaf op uit de SVG-cirkels en <line data-a data-b>-lijnen, dus de kaart aanpassen is een markup-aanpassing.
02 / elke frame vastplakken
Terug op het scherm geprojecteerd
Elke frame wordt elke ster op het scherm geprojecteerd en zijn SVG-node erheen verplaatst, zodat labels, focusringen en klikvlakken op de sterren blijven.
03 / niets in rust
Lazy, gepauzeerd, optioneel
Het script laadt pas als de kaart in beeld komt en pauzeert buiten beeld. Met beperkte beweging of zonder WebGL blijft de platte kaart staan.
0
externe verzoeken
4 × 8
labs × vaardigheden
10
URL’s · EN + FR
1
externe library
// Galerij
Door de site
