Portfolio & Blog Personal - deras.dev

deras.dev es mi portafolio y blog técnico, construido con Nuxt 4 y prerenderizado por completo como sitio estático en inglés y español.

La nube de puntos detrás de la página principal no es decoración. Un script local exporta cada proyecto, logro de experiencia, capacidad y párrafo del blog, los convierte en embeddings con sentence-transformers (all-MiniLM-L6-v2), reduce los vectores a 3D con UMAP y escribe un JSON versionado. La página dibuja ese espacio con TresJS y Three.js: un único mesh instanciado para los puntos, segmentos de línea para las aristas entre vecinos cercanos y una cámara que viaja a cada cúmulo mientras haces scroll.

La consulta en vivo del hero es una búsqueda real top-k por similitud: las consultas sugeridas se convierten en embeddings de antemano con el mismo modelo, así que el navegador solo lee vecinos precalculados y no corre ningún modelo en el cliente. El texto libre se resuelve a la consulta sugerida más cercana por palabras clave.

El rendimiento y la accesibilidad definieron la arquitectura. Todo el contenido es HTML real, el canvas 3D se carga solo en el cliente después del primer pintado, limita su resolución y se pausa cuando no está visible, y quienes tienen movimiento reducido, no tienen WebGL, usan ahorro de datos o equipos de gama baja ven un SVG estático del mismo espacio.

El sistema de diseño es propio (Fraunces y JetBrains Mono sobre una paleta cálida de papel) y reemplazó por completo a Vuetify. El movimiento usa GSAP con ScrollTrigger y Lenis, y el blog sigue usando @nuxt/content con KaTeX y Mermaid.