Personal Portfolio & Blog - deras.dev

deras.dev is my portfolio and technical blog, built with Nuxt 4 and fully prerendered as a static site in English and Spanish.

The point cloud behind the home page is not decoration. A local script exports every project, experience bullet, capability and blog paragraph, embeds them with sentence-transformers (all-MiniLM-L6-v2), reduces the vectors to 3D with UMAP and writes a versioned JSON file. The page renders that space with TresJS and Three.js: one instanced mesh for the points, line segments for nearest-neighbor edges, and a camera that travels to each cluster as you scroll.

The live query in the hero is a real top-k similarity search: suggested queries are embedded ahead of time with the same model, so the browser only reads precomputed neighbors and no model runs on the client. Free text resolves to the closest suggested query by keyword overlap.

Performance and accessibility shaped the architecture. All content is real HTML, the 3D canvas loads only on the client after the first paint, caps its pixel ratio and pauses when hidden, and visitors with reduced motion, no WebGL, save-data or low-end devices get a static SVG of the same space.

The design system is custom (Fraunces and JetBrains Mono on a warm paper palette) and replaced Vuetify entirely. Motion uses GSAP with ScrollTrigger and Lenis, and the blog keeps using @nuxt/content with KaTeX and Mermaid.