Colofón
Cómo estáhecho esto.
Un colofón es la página que en un libro dice cómo se imprimió. Esta dice cómo está construido el sitio, con los números medidos y no prometidos.
El principio
El contenido vive en el HTML; el JavaScript solo le agrega comportamiento. Todo lo que se lee en este sitio está en el HTML servido, sin ejecutar nada: con JS apagado, para un lector de pantalla, y para los crawlers que responden preguntas sobre personas sin correr scripts.
Stack
Framework
Next.js 16, App Router, every route prerendered
Language
TypeScript
Styles
Tailwind 4, OKLCH tokens, CSS Modules for stateful parts
Content
MDX through Velite, schemas validated at build time
Motion
Lenis for scroll, Motion for the lab’s drag, rAF for the rest
3D
Hand-written WebGL2 — a textured scan at rest, 150k points on hover, no three.js
Command palette
cmdk, loaded on first ⌘K
Cursor
mouse-follower (Cuberto) + GSAP, loaded on the first mouse move
Sound
Web Audio, synthesised — no files
Type
Archivo and JetBrains Mono, self-hosted
The resume PDF
Typeset with @react-pdf/renderer at build time, from the same data the web page reads — so the document and the page cannot drift
For agents
Every page also as Markdown — ask with Accept: text/markdown or add .md — plus llms.txt and Content Signals in robots.txt
Hosting
Vercel
Números
JavaScript transferido en la primera carga, comprimido, medido con el build de producción el .
Lo que no cumplí
Me puse un presupuesto de 120 KB de JS por ruta y no lo cumplo: la base está en ~179 KB. Ese número era irreal para el App Router de Next, cuyo runtime de cliente ya se come casi todo el presupuesto antes de que yo escriba una línea. Dos cosas sí bajaron: el rail de secciones dejó de usar una librería de animación (una magnificación tipo dock es una resta, no hace falta Motion) y la paleta de comandos ahora carga al primer ⌘K. Eso llevó la home de 245 a 186 KB. El resto es el piso del framework, y decirlo es más útil que borrar la promesa.
Créditos
The rockPoly Haven — moon_rock_07
CC0. A real photogrammetry scan; its mesh, albedo, normal map and ambient occlusion form the solid rock, then the same surface becomes points on hover.
mouse-followerCuberto
The magnetic cursor.
cmdkPaco Coursey
The command palette. Also one of the design references this site was built against.
LenisDarkroom Engineering
Scroll.
MotionMatt Perry
Drag, with momentum and constraints.
@react-pdf/rendererDiego Muracciole
The resume PDF — real typesetting, not a print of the page.
Velitezce
Typed content collections.
Archivo · JetBrains MonoOmnibus-Type · JetBrains
Both OFL.
Los textos son míos. El código de este sitio es mío. La roca es CC0 de Poly Haven.