Cómo construí este sitio sin frameworks

Este sitio no usa React, ni Vue, ni un build de 300 MB de node_modules para mostrar cinco párrafos. Es HTML, CSS y un poco de JavaScript. Y fue una decisión, no una limitación.

Quería un sitio personal que cumpliera tres cosas: que cargara al instante, que tuviera personalidad propia, y que yo pudiera entender por completo abriendo el código fuente. Las tres apuntan en la misma dirección: menos capas entre la idea y lo que llega al navegador.

Cero frameworks, a propósito

La mayoría de sitios personales que veo cargan un framework entero para renderizar contenido que es, en esencia, estático. Es traer una grúa para colgar un cuadro.

Para una página que no cambia entre visitas, el HTML servido directamente es imbatible: nada que hidratar, nada que esperar, nada que se rompa entre versiones. El resultado se siente instantáneo porque lo es.

El framework más rápido es el que no cargas.

Eso no significa renunciar a herramientas. Para esta sección de notas uso un generador estático que convierte Markdown en HTML en tiempo de build — pero lo que se publica sigue siendo HTML plano, sin framework en el cliente. La comodidad de escribir en Markdown, sin el costo de runtime.

El héroe es mi propio dataLayer

El reto real no era técnico, era de identidad. Un fondo oscuro con degradados podría ser el portafolio de cualquiera. Yo me dedico a la analítica digital: taxonomías, planes de medición, gobernanza de datos. Mi oficio es la estructura.

Así que el héroe de la portada no es un titular con degradado. Es un esquema que me describe a mí, renderizado como el código que escribo todos los días:

const oscar = {
  rol:       "Ingeniería de Software · Analítica Digital",
  base:      "Costa Rica",
  principio: "estructura primero, flexibilidad cuando hace falta",
  midiendo: {
    construyo: "frameworks de analítica",
    proxima:   "ser_papá"   // la métrica que más importa
  }
}

Toda la audacia del diseño vive en esa sola pieza. Un único acento ámbar resalta la línea que de verdad importa, y el resto de la página se queda en silencio alrededor. Es la regla de Coco Chanel aplicada al diseño web: antes de salir, quítate un accesorio.

Lo que cuidé por debajo

La personalidad se ve; la calidad no debería notarse. Las cosas que cuidé sin anunciarlas:

• Rendimiento. Fuentes con display: swap, Google Analytics diferido 1,5 s para no bloquear el render, retícula de fondo en puro CSS (sin imágenes).
• Accesibilidad. Foco de teclado visible, prefers-reduced-motion respetado (la animación del esquema se desactiva), contraste cuidado.
• Responsive de verdad. En móvil, las líneas del esquema se envuelven en vez de provocar scroll horizontal — un detalle que solo se nota cuando falta.
• SEO con intención. Datos estructurados schema.org, hreflang para las versiones en español e inglés, imagen para previsualizaciones sociales.

Ninguna de esas decisiones necesitó un framework. Necesitaron criterio.

Estructura primero

Si tuviera que resumir cómo construí el sitio en una frase, sería la misma que uso para una implementación de analítica o para planear un viaje: define bien la base y lo demás fluye.

Cero frameworks no es nostalgia ni purismo. Es la misma idea que defiendo en mi trabajo: la mayoría de los problemas difíciles no se resuelven con más tecnología, sino con una mejor estructura. Este sitio es, en el fondo, ese argumento hecho página.