Cómo está hecha esta web

Como comentaba en el artículo de bienvenida, este sitio nace con una idea simple: contenido en texto plano, sin bases de datos ni dependencias innecesarias. Desde que escribí la primera versión de este artículo el sitio ha cambiado bastante, así que lo actualizo para que siga contando la verdad de cómo está montado.

Astro como base

Elegí Astro porque está pensado exactamente para este caso de uso: sitios de contenido con partes estáticas (CV, listado de proyectos) y contenido en Markdown (los artículos). Genera HTML puro en build time, así que la web carga rápido y no depende de JavaScript en el cliente salvo que yo lo pida explícitamente.

Content Collections, ahora también bilingües

Los artículos y los proyectos viven como ficheros .md dentro de src/content/, organizados en subcarpetas es/ y en/. Astro deriva el idioma directamente de la ruta del fichero, así que no hay un campo lang que pueda desincronizarse de dónde vive realmente el contenido. El frontmatter de cada fichero se valida contra un esquema (con Zod) definido en src/content.config.ts, así que si me dejo un campo obligatorio o pongo una fecha mal formateada, me entero en build en vez de en producción.

const articles = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/articles' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

Un sistema de diseño con nombre: Swiss Grid

En algún punto dejé de conformarme con un sitio “correcto” y le puse una identidad visual real: retícula de 12 columnas visible, tipografía Archivo (variable, autoalojada) a escala de póster en la portada, un único rojo de acento, cero sombras y cero radios. La idea es que la propia ejecución del sitio sea parte de la prueba de que sé lo que hago, no solo el texto que cuenta mi CV. Lo documento con más detalle en DESIGN.md, en el repositorio.

Bilingüe: español por defecto, inglés en /en

El sitio usa el sistema de internacionalización nativo de Astro: defaultLocale: 'es' sin prefijo en la URL, e inglés bajo /en/... con los propios segmentos de ruta traducidos (/en/projects, no /en/proyectos). Un selector en la navegación salta a la traducción exacta de la página en la que estás; si un artículo concreto todavía no tiene su versión en inglés, cae de vuelta al índice en vez de a un enlace roto.

Tema claro/oscuro y movimiento

Hay un selector de tema de tres estados (claro, oscuro, sistema) que recuerda tu elección, y una paleta oscura pensada aparte —no es solo la clara invertida. El movimiento de la página también sigue una regla concreta: cada tipo de contenido se anima de forma distinta al entrar en pantalla, para no caer en el “todo aparece con el mismo fundido” que delata tantos sitios generados con IA.

Un CMS sin base de datos

Escribir artículos directamente en el editor de código funciona, pero tarde o temprano quiero poder hacerlo desde cualquier sitio sin abrir un IDE. Para eso está Decap CMS: un panel de edición en /admin que escribe directamente los mismos ficheros Markdown y hace commit al repositorio Git.

No hay base de datos ni backend propio que mantener. El contenido sigue siendo texto plano versionado, así que la “persistencia” de mis artículos es, literalmente, el historial de Git.

Lo que viene

Con el sistema de diseño, el bilingüismo y el movimiento ya montados, lo que queda pendiente es el contenido real: rellenar el CV con mis datos reales, documentar un proyecto de verdad en vez del de ejemplo y, con el tiempo, conectar Decap CMS a GitHub para poder publicar artículos desde el móvil.