Context
A portfolio that would not be a list of cards. The idea draws on Yggdrasil, the world tree of Norse mythology, and on the flame of Prometheus: a tree made of neurons and energy where every branch is a project.
Approach
- Procedural tree. It grows deterministically from a seed by space colonization and is cut into branch units. Projects only claim units, so the tree’s shape never changes when one is added or removed.
- Performance. The model is built in a Web Worker, off the main thread, and handed back to it as transferable arrays. Three quality tiers adapt to the measured frame rate.
- Rendering. Custom GLSL shaders, including a fire simulation, with bloom and AgX post-processing.
- Accessibility. Without WebGL 2 or without JavaScript, the site shows a static version with every project.
- Quality. About 100 unit test files with Vitest, plus end-to-end tests with Playwright.
Outcome
It is the site you are looking at. Visitors explore a 3D tree where every branch is a project. Adaptive quality tiers keep the scene smooth on modest hardware too, and without WebGL or JavaScript all the content is still there as a static version. The whole site is available in Spanish and English.
Underneath, the tree comes from a deterministic generator that runs off the main thread: the same seed always grows the same tree, and the interface stays responsive while it is built. Unit and end-to-end tests cover both how the tree is generated and how it behaves in the browser.