The whole thing, as ground you can fly.
I build the model side and the product side of the same thing, and I ship it under my own domains.
The range has a shape and the shape is the argument. Rendering work sits in one massif, model work in another, infrastructure in a third, and the products stand on their own. Fly close to any summit and you find a small world built for that project.
Reach me
Moving around
Drag to orbit, wheel or pinch to zoom, Shift drag to pan. Arrow keys or WASD move you over the ground, O pulls back to the whole range, Escape steps out of wherever you are. Click a summit or a region name to fly there. The address bar keeps up, so any place can be linked.
This page normally opens as a mountain range you fly through: a capital in the middle, ranges falling away from it, summits on real terrain. With JavaScript off you are reading the same words as a plain document, all of them, in order. Nothing was held back for the map.
Under my own domains.
Every one of these is mine and resolves right now.
Every place on the map
Reach me
▲ Rendering
The Rendering range
Rendering
What a browser can draw when you write the shader yourself.
Aurora writes GLSL by hand. Drift reaches the same GPU from higher up, through Three.js. Creeper Glory never leaves the DOM and holds its frame rate anyway.
Summits here
Rendering · a summit with its own sky
Aurora
Generative skies. One WebGL shader draws every frame.
The lights over this summit are the project's own kind: curtains drawn by a shader, moving because time is one of their inputs.
Every pixel is a function of position and time, evaluated on the GPU from simplex noise. Nothing here is a video or a texture. React holds the dials and nothing else.
Stack
Links
Rendering · a summit that will not sit still
Drift
A 3D dreamscape. Thousands of instances, each on its own spring.
The swarm breathing around this peak is the project at small scale: points pulled home by springs, none of them ever quite arriving.
Each point has a rest position; the pointer pushes, the spring pulls it back with damping. All of it is one draw call, with bloom and depth of field on top.
Stack
- react-three-fiber
- Three.js
- drei
Links
Rendering · a town built out of cubes
Creeper Glory
Minecraft as a film title sequence.
The blocks assembling beside this summit do it the way the real site does: staggered off the diagonal, so the build reads as a wave.
Five panels, hand-timed motion, one detonation. Transforms and opacity only, so it never drops a frame.
Stack
Links
Rendering · standing ground
GLSL
The shader language under Aurora.
Aurora writes it by hand. Three.js writes it for you. Knowing what the generated shader looks like is what makes it debuggable.
Feeds
Rendering · standing ground
Three.js
The engine under Drift, and under this page.
React decides what exists; the render loop never goes through React at all. This map is built on it too.
Feeds
Rendering · standing ground
React and Vite
The build under the rendering projects.
One rule in all of them: React owns what exists, the animation owns what it looks like this millisecond.
Feeds
▲ Models
The Models range
Models
Inference that runs inside the app, not behind someone else's API.
Lens and Resonance share one decision: the weights ship with the project. transformers.js against ONNX is that decision.
Summits here
Models · a summit that reads images
Lens
One image in. A label, its text and its palette out.
The prism turning over this summit throws off shards of color: the palette step, at the end of every run.
An ONNX vision transformer labels the image, Tesseract reads the text in it, and the palette is quantised from the pixels. sharp decodes and resizes first. All of it inside the request.
Stack
- transformers.js
- Tesseract.js
- sharp
Links
Models · a summit that listens
Resonance
Text in, an emotion spectrum out.
The rings widening from this peak are its output made visible: a sentence lands, and a spectrum spreads out from it.
A transformer inside the serverless function, warmed on first paint so the cold start never shows. The sentence you type never becomes a call to a third party.
Stack
- transformers.js
- ONNX
- Vercel
Links
Models · standing ground
transformers.js and ONNX
The runtime under Lens and Resonance.
Transformer models running in JavaScript against ONNX weights, where the request already is. The reason neither project needs a vision API or a sentiment API.
Feeds
▲ Infrastructure
The Infrastructure range
Infrastructure
Systems you can watch while they run.
Conveyor and the two things it stands on. Node runs the queue, the worker pool and the stream in one process. Vercel is where it deploys.
Summits here
Infrastructure · a summit with a working line
Conveyor
A job queue with the lid off.
The line circling this summit is doing the real thing: jobs moving, one failing, waiting out its backoff, the unlucky ones dropping into the pit that glows red. That pit is the dead-letter sink.
The queue is its own: a worker pool inside one serverless function, retries with backoff, a dead-letter sink, every state change streamed to the page. No broker, no database. What the interface shows is the part that normally only exists in logs.
Stack
- Next.js
- Node.js streams
- Vercel
Links
Infrastructure · standing ground
Node.js
The process under Conveyor.
One function holds the queue, runs the worker pool and streams every frame to the page. When the stream closes, the run is over. Nothing outside the process to rent, configure or lose.
Feeds
Infrastructure · standing ground
Vercel
Where all of this deploys.
A server that exists only while a request does. Conveyor cannot hold a worker open, so state lives elsewhere; Resonance has to get a model into a process that will be thrown away.
Feeds
▲ Shipped
The Shipped range
Shipped
Products with users, under domains I own.
ayoubalkak.com is the capital of the map, and the faint dotted paths running out of it are its subdomains. DNS, not architecture. Lumevel and Traduction Office are their own apex domains.
Summits here
Shipped · the capital
ayoubalkak.com
You are here.
The capital. Everything on this map sits under it, and I run all of it. Ayoub Alkak, full-stack and AI engineer in Limoges, France.
The citadel on this summit has a curtain wall, a keep and a lighthouse whose beam sweeps the range. The obelisks outside its wall are the subdomains, and the faint paths running out to them are the DNS records made visible.
Links
Shipped · the studio
Lumevel
My studio.
The hall on this summit is a drawing office. The frames circling its roof are pages of light, each one sketching a layout that never quite finishes.
Websites, web apps and AI for local businesses in Limoges, delivered in days. Its own domain, because it is a company and not a lab project.
Links
Shipped · three languages
Traduction Office
Certified translations ordered online, in French, English and Arabic.
Right to left included, which changes what leading means, which side a chevron points and where a form error sits. Being rebuilt. Back on its own domain when it is ready.
Status
Shipped · on the road
Décode
The French driving-theory exam, learned in full.
Lessons, road signs, timed mock exams. French first, with English help inline. Live, with accounts and saved progress.
Links
Shipped · this map
Sonnet
This map.
A mountain range you fly, one small world per project, all on your GPU. Three.js, from scratch.
Links