A finales del 2023 decidí reconstruir una vez más mi propia página web, esta vez quería añadir testimonios, un resumen de mi trayectoria profesional y un porfolio de proyectos destacados con imágenes y explicaciones sobre cada proyecto.

A diferencia de la versión 2 de mi web, de diciembre de 2013, ésta no es un diseño que parte de cero, sino que es un tema hijo de un tema llamado «Ollie» creado recientemente por dos veteranos de la web: Mike McAllister y Patrick Posner. De todas formas lo he personalizado tanto que bien podía haber sido un diseño a medida.

En esta imagen que ves, destaco el porfolio o página de proyectos. Consiste en un primer titular que resume los trabajos que hago normalmente, seguido de unas fotos que representan dicho trabajo. A continuación hay una lista gestionable desde el interfaz de gestión del contenido, con las imagen destacada de cada proyecto, un titulo y la fecha aproximada de finalización. Si haces clic, entonces visualizas la explicación completa y más imágenes.

Imagen de fondo con texto superpuesto y animación con retardo de un segundo y medio

Diseñada primero para móvil, no tiene más. Vista desde ordenador de sobremesa, al situar el ratón encima de la imagen destacada, desaparece la imagen y aparecen el título y la fecha con un retardo aproximado de un segundo y medio, para proporcionar una transición más agradable al ojo humano.

Control del posicionamiento de la imagen de fondo

Como las imágenes de los proyectos son heterogéneas, con diferentes orígenes y tamaños, he hecho que la imagen destacada en el listado sea un fondo y que la imagen se visualice a partir de su esquina superior izquierda. Así, siempre se ve lo que es más importante de las páginas web — el logo — que acostumbra a estar en esa posición.

Lista de proyectos con y sin imagen destacada gestionable desde el CMS

Además, tengo proyectos para los cuales no dispongo de imagen, como es el caso del proyecto de marzo de 2016. Para ellos no quería que el título aparezca solamente al posicionar el ratón encima, puesto que en tal caso no habríamos visto nada hasta posicionar el ratón. Para modificar este aspecto, he retocado los estilos del fondo, el titular y la fecha, y he hecho que este comportamiento sea gestionable. Es decir, si marco el proyecto como «proyecto sin imagen destacada» desde el CMS, entonces se visualiza el título y la fecha en lugar de la imagen destacada. Es más difícil explicarlo que verlo en la imagen.