Hace poco más de un año publiqué Victoria ha vuelto: La Metamorfosis de una Web Personal, donde contaba cómo había reordenado el menú, estrenado logotipo y devuelto a la vida a mi asistente de IA. Terminaba aquel artículo diciendo que “todavía quedan muchos detalles que mejorar”.

Pues bien: ha pasado un año, he vuelto a mirar la web con ojos críticos y resulta que seguían quedando detalles. Muchos. Así que aprovecho para institucionalizarlo y llamarlo revisión anual, que suena mucho mejor que “se me acumularon los arreglos pendientes”.

Esta vez el trabajo ha sido más profundo que el del año pasado, y creo que hay cosas que merece la pena contar, sobre todo las que salieron mal.

Por qué tocar una web que ya funcionaba

La web funcionaba. Cargaba rápido, tenía buenas puntuaciones en las auditorías, el chatbot respondía. Pero tenía un problema difícil de ver desde dentro: cada página parecía de un sitio distinto.

El motivo es histórico. La web nació sobre una plantilla comercial (Canvas), y cada vez que añadía una sección lo hacía con los componentes que la plantilla traía de serie. El resultado, acumulado durante años, era un mosaico: los proyectos en un formato, las conferencias en otro, los premios en tablas desnudas de Bootstrap, las publicaciones en cuatro tablas apiladas una detrás de otra, y las redes sociales en una rejilla con los filtros… en inglés. Show All, literalmente, en una web en español.

Ninguno de esos detalles rompía nada. Simplemente, todos juntos hacían que la web pareciera lo que era: capas de decisiones tomadas en momentos distintos.

El modo noche: la estrella y el mayor dolor de cabeza

La novedad más visible es el botón de Sol/Luna en la cabecera. Pulsas y toda la web cambia entre modo claro y modo oscuro. La preferencia se guarda en localStorage, así que la web te recuerda en tu siguiente visita, y hay un script que se ejecuta antes de pintar nada para evitar el temido destello blanco al navegar entre páginas (lo que se conoce como FOUC).

Suena sencillo. No lo fue.

Primer round: el tema que borraba mi configuración. Activaba el modo claro, empezaba a hacer scroll y de repente la página volvía a oscuro. Resulta que la plantilla Canvas tiene una función propia, setBSTheme(), que se dispara al desplazarse y elimina el atributo data-bs-theme que yo estaba usando. Solución: dejar de depender solo de ese atributo e inyectar además clases explícitas html.light / html.dark, que el tema no toca.

Segundo round: texto blanco sobre fondo blanco. En los testimonios de la página de servicios, las tarjetas usan la clase bg-light de Bootstrap, que las mantiene blancas pase lo que pase. Pero Bootstrap 5.3 cambia sus variables de color (--bs-body-color, --bs-secondary-color) cuando detecta modo oscuro, poniéndolas en tonos claros pensados para fondos oscuros. Resultado: tarjeta blanca + texto casi blanco = testimonios invisibles.

Tercer round: la banda gris. La franja del título en la página de servicios se quedaba de un gris cálido que chocaba brutalmente con el azul marino del resto. La causa era tonta: había una regla que forzaba el color de fondo correcto en el contenedor principal, el pie, el envoltorio… y me había dejado fuera precisamente esa franja.

Este último me costó tres intentos, porque las dos primeras veces diagnostiqué el elemento equivocado. Lección aprendida: cuando algo se ve mal, hay que abrir el inspector antes de tocar el CSS, no después.

Que quede dicho: retro-encajar un modo oscuro en una plantilla que no fue diseñada para tenerlo es bastante más trabajo del que parece desde fuera.

Una identidad con sello propio

El año pasado estrené logotipo “DBV”. Este año lo he llevado un paso más allá con un sello tridimensional en oro, en dos versiones —una para fondo claro y otra para fondo oscuro— que son precisamente las dos “monedas” que abren este artículo. Según el modo en que estés leyendo la web, en la cabecera verás una u otra.

El detalle del que estoy más satisfecho, sin embargo, es invisible para casi todo el mundo: el favicon. Tenía el sello circular completo, que a 16×16 píxeles —el tamaño real en la pestaña del navegador— se convertía en una manchita indistinguible. Lo regeneré usando solo la “D” facetada aislada, y ahora se reconoce de un vistazo entre veinte pestañas abiertas. Es un cambio de dos milímetros cuadrados que mejora el reconocimiento de marca más que muchas cosas grandes.

Diez páginas, un mismo idioma visual

El grueso del trabajo ha sido rediseñar página por página con un sistema de diseño común, en lugar de ir maquetando cada una a su aire:

• Tipografía: Space Grotesk para titulares, IBM Plex Sans para el cuerpo y JetBrains Mono para etiquetas y metadatos.
• Color: paleta definida en oklch, con variantes coherentes para día y noche.
• Patrones repetidos: cabecera con contadores calculados en tiempo real, filtros en forma de pastilla, tarjetas con borde sutil que se ilumina al pasar el ratón.

Con ese vocabulario común han pasado por el taller la portada, el blog (que además ahora admite varias categorías por artículo), las fichas de proyecto, el catálogo de proyectos, conferencias, formación, la galería de imágenes, redes, experiencia, premios y publicaciones. También estrené una página de preguntas frecuentes con buscador en tiempo real.

Algunos cambios concretos que me gustan especialmente:

• Los premios pasaron de tablas de Bootstrap a una línea de tiempo vertical filtrable por etapa. Son 40 reconocimientos repartidos en tres épocas, y en tabla resultaban absolutamente ilegibles.
• Las publicaciones pasaron de cuatro tablas apiladas a pestañas. Son 55 referencias; apiladas obligaban a un scroll interminable.
• La experiencia dejó atrás una lista donde todos los elementos tenían el mismo icono de check genérico, y ahora distingue visualmente entre puestos y titulaciones.
• Las conferencias tienen filtro por año y, cuando no hay ninguna programada, un mensaje cuidado en lugar de un hueco vacío.
• La galería es una rejilla tipo mosaico con filtro por época, cubriendo desde 2014.

El contenido manda: todo sale de ficheros de datos

Hay una decisión de fondo que no se ve pero que me ahorra tiempo cada semana: el contenido vive en ficheros de datos, no en el HTML.

Las conferencias, los cursos, los premios, las publicaciones, las redes, las fotos de la galería y las preguntas frecuentes están en ficheros YAML o en colecciones de Jekyll. Añadir una conferencia nueva es escribir seis líneas en un fichero de texto; la web se encarga sola de colocarla en su sitio, recalcular los contadores de la cabecera, añadir su año al filtro y actualizar el listado.

Antes, añadir cualquier cosa significaba duplicar un bloque de HTML y rezar por no romper la maquetación. Es la diferencia entre una web que mantienes y una web que te mantiene ocupado.

Dos bugs que me hicieron gracia

Como creo que de los errores se aprende más que de los aciertos, me quedo con dos:

El mes en inglés. Las fechas de las conferencias salían como “07 de March de 2026”. El filtro date de Liquid con el formato %B devuelve el nombre del mes en el idioma del sistema, no en el del sitio. Al final lo resolví con una lista de los doce meses en español y un índice. Poco elegante, perfectamente funcional.

Las insignias rebeldes. En el pie de página tengo nueve insignias de validación (accesibilidad, seguridad, rendimiento…). Se empeñaban en salir en tres filas. Las fusioné en un solo contenedor: seguían en tres. El problema no era cómo estaban agrupadas, sino que compartían fila con los iconos de redes sociales y solo disponían de dos tercios del ancho. Sacándolas a su propia fila, encajaron en dos. A veces el problema no está donde estás mirando.

Lo que queda

No todo está terminado, y prefiero decirlo:

• La página de aficiones sigue teniendo solo un vídeo de cabecera y nada debajo. Tengo la estructura pensada —una tarjeta por afición— pero antes de maquetar nada necesito decidir qué contar. Prefiero una página vacía a una página rellena de paja.
• Quedan por revisar algunas páginas secundarias heredadas de la plantilla original.
• Y seguro que aparecen detalles nuevos, porque siempre aparecen.

La reflexión de rigor

Una web personal no se termina nunca; se cuida. El año pasado toqué la estructura y la inteligencia (el menú, el chatbot). Este año ha tocado la coherencia visual y la mantenibilidad. El año que viene tocará otra cosa.

Y si algo he confirmado en este repaso es que la deuda técnica en una web se acumula igual que en cualquier otro proyecto de software: no en grandes catástrofes, sino en decenas de decisiones pequeñas y razonables tomadas en momentos distintos, que un día miras juntas y no se parecen en nada entre sí.

Te invito a darte una vuelta y, si te apetece, a probar el botón de la Luna. Y si ves algo raro —que lo habrá—, cuéntamelo: el año pasado varias de las mejoras salieron de sugerencias de quienes leyeron aquel artículo.