Cómo está hecho
Cómo está hecho este sitio. Es pequeño a propósito: sin framework en el cliente, sin librerías de animación, y cada página prerenderizada y servida desde el edge.
Plataforma
- Astro
- Todas las páginas se prerenderizan en el build. Los posts y las entradas de /work son colecciones de contenido en MDX, un archivo por idioma.
- Cloudflare Workers
- Los assets estáticos se sirven desde el edge. Un Worker pequeño corre primero en las rutas localizadas y redirige a inglés o español según la cookie de idioma o Accept-Language, sin redirección en el cliente.
- Tarjetas Open Graph
- Se generan en el build con Satori y Sharp a partir del título y la descripción de cada página: 1200×630, una por página e idioma.
Rendimiento
- Navegación
- ClientRouter de Astro con view transitions, y Speculation Rules que prerenderizan la página al pasar el mouse en Chromium, así que la mayoría de las navegaciones son instantáneas.
- Fuentes
- Newsreader y Hanken Grotesk, alojadas en el sitio como instancias parciales de las fuentes variables, solo con los rangos de ejes que se usan: cerca de la mitad del peso original.
- Medición
- Lighthouse CI audita las páginas principales en cada pull request; Cloudflare Web Analytics mide los Core Web Vitals de usuarios reales sin cookies.
Diseño y movimiento
- Tokens
- Dos estilos base, Cosmos (índigo frío) y Paper (editorial cálido), cada uno con sus neutros y paletas de acento en OKLCH; estilo, paleta y tema claro u oscuro se aplican antes del primer pintado.
- Movimiento
- CSS primero: animaciones por scroll para el timeline, view transitions entre páginas y unas pocas líneas de script para los contadores. Todo detrás de prefers-reduced-motion.
Flujo de trabajo
- Calidad
- TypeScript, ESLint, Prettier y el test runner de Node para la lógica del edge, en CI con un deploy de preview por rama.
Actividad
El último año en GitHub, generado en el build a partir de la API de GitHub y actualizado cada semana por un workflow programado: sin script en el cliente ni widgets de terceros.