Contexto
Un portafolio que no fuera una lista de tarjetas. La idea se inspira en Yggdrasil, el árbol del mundo de la mitología nórdica, y en la llama de Prometeo: un árbol hecho de neuronas y energía en el que cada rama es un proyecto.
Enfoque
- Árbol procedural. Crece de forma determinista a partir de una semilla mediante colonización del espacio y se divide en unidades de rama. Los proyectos solo reclaman unidades, así que la forma del árbol no cambia al añadir o quitar uno.
- Rendimiento. El modelo se construye en un Web Worker, fuera del hilo principal, y vuelve a él como arrays transferibles. Hay tres niveles de calidad que se adaptan a la tasa de fotogramas medida.
- Render. Shaders GLSL propios, entre ellos una simulación de fuego, con bloom y postprocesado AgX.
- Accesibilidad. Sin WebGL 2 o sin JavaScript, el sitio muestra una versión estática con todos los proyectos.
- Calidad. Unos 100 archivos de pruebas unitarias con Vitest y pruebas end-to-end con Playwright.
Resultado
Es el sitio que estás viendo. Quien lo visita recorre un árbol 3D en el que cada rama es un proyecto. Los niveles de calidad adaptativos mantienen la escena fluida también en equipos modestos, y sin WebGL o sin JavaScript todo el contenido sigue disponible en una versión estática. El sitio completo está en español y en inglés.
Por debajo, el árbol sale de un generador determinista que se ejecuta fuera del hilo principal: la misma semilla produce siempre el mismo árbol y la interfaz sigue respondiendo mientras se construye. Las pruebas unitarias y end-to-end cubren tanto la generación del árbol como la experiencia en el navegador.