Episodio 015 — Buscando la densidad del command center
Serie: bitácora de ingeniería — caprini.dev
Enfoque: jerarquía visual en la Home y sensación de terminal con dos “paneles”.
Por qué el diseño anterior fallaba
En el hero previo, logo, título, imagen generada (latest.png) y párrafo explicativo competían en el mismo eje vertical centrado. La tarjeta PNG a ancho casi completo absorbía el foco antes de que el visitante asimilara el mensaje del sitio: qué es caprini.dev y por qué importa el Spec Driven Development. Eso es falta de jerarquía visual: todo tenía peso similar en pantalla, y el ojo se quedaba en el bloque grande sin un orden claro de lectura.
Además, mezclar la leyenda de “Última actividad” bajo la imagen reforzaba la idea de que el PNG era el protagonista, no un indicador del latido del repo.
Qué aporta el grid
Pasamos a un grid en md: con proporción ~3/5 + 2/5 (md:grid-cols-5, columnas 3 y 2):
- Columna izquierda (info): título, descripción y una línea de texto pequeña para última actividad — como salida de consola, no como tarjeta destacada.
- Columna derecha (visual):
latest.pngconmax-widthacotada (p. ej. 400px), envuelta en un marco que evoca un monitor secundario: bisel oscuro, borde cian en el “panel”, glow púrpura exterior.
Así la Home recupera la vibe de terminal / command center: un panel principal de texto (órdenes y contexto) y un display auxiliar con el snapshot del último commit, en lugar de un póster que domina la página.
Navegación
Se añade el enlace Blog en Header.astro junto a Proyectos y Specs, apuntando a /blog, para que el archivo de episodios sea alcanzable desde cualquier página.
Cierre de log
Si al escalar la tarjeta en el navegador el mensaje de commit dentro del PNG dejara de leerse cómodo, el siguiente ajuste natural sería subir tamaños de fuente en projects/001-progress-tracker/tracker.mjs (Satori), no solo el CSS del sitio.