Mi portafolio anterior ya se me hacía muy sencillo. Quería algo más profesional, más atractivo y que reflejara el crecimiento que he tenido en los últimos años. También quería que quien entrara pudiera saber un poco más de mí, además de ver los proyectos.
La parte difícil fue traducir eso a una página. Decir «quiero que se vea mejor» alcanza para empezar una conversación, pero ayuda poco cuando toca elegir qué mostrar, qué mover y qué dejar en paz.
Esta es la primera entrada de ese proceso. Quiero aprovechar el journal para contar las decisiones que normalmente se quedan detrás de una captura: los ajustes, las dudas y las cosas que parecían buena idea hasta que las vi funcionando.
Que los proyectos tengan más espacio
Empecé por la portada. Quería que el trabajo tuviera más presencia desde el primer vistazo, así que el hero terminó con tres imágenes superpuestas: TARS, Radar Tlaxcala y HORRORVERSE.
Al ponerlas juntas apareció un problema bastante concreto: cada proyecto tiene su propia paleta. Las capturas llamaban la atención, pero también competían con el resto del sitio. Les di un tratamiento de color más cercano al fondo y al verde del portafolio.
En las tarjetas de proyectos, el color original aparece al pasar el cursor. En el hero preferí mantener el filtro. Ahí ya hay profundidad y movimiento; recuperar además todos los colores hacía que pasaran demasiadas cosas al mismo tiempo.
Fue uno de esos ajustes que parecen pequeños hasta que comparas la página completa.
El hover que tuve que bajar de intensidad
Quería que una imagen destacara un poco sobre las demás al pasar el cursor. La primera respuesta se sentía brusca: crecía demasiado y se sobreponía de una forma que no me terminaba de gustar.
Volví a ajustarla. Menos escala, una rotación leve y un movimiento más tranquilo. Después añadí un poco más de rotación, pero sin perder esa discreción.
Eso resume bastante bien cómo fue tomando forma el diseño. Algunas decisiones salieron de probar algo, verlo en contexto y decir: «sí, pero bájale un poco».
Por qué la nueva versión está en Astro
El sitio también iba a crecer por dentro. Además de las páginas de proyectos, quería empezar a escribir aquí. Eso cambió lo que necesitaba de la base.
En esta versión, Astro genera las páginas y los artículos como HTML durante la construcción del sitio. El título, el texto y los enlaces ya están en el documento que recibe el navegador. Después se añaden las interacciones que las necesitan.
Me gustó esa separación para este proyecto. Una ficha de trabajo o un artículo tiene mucho contenido para leer y una estructura bastante clara. El hero, el reloj y el clima tienen otras necesidades; pueden resolverse sin hacer que toda la página dependa de ellos.
El portafolio anterior estaba hecho en Angular. Lo conservé en una carpeta independiente y preparé su lugar en /anterior/, con un enlace desde el footer. Me interesa poder volver a esa versión y ver de dónde salió esta.
No hice una comparación de rendimiento entre ambos sitios en las mismas condiciones. La elección de Astro respondió a lo que quería construir ahora; esa comparación sigue pendiente.
Había detalles que quería conservar
La renovación tenía que seguir teniendo reloj, clima, cambio de idioma y modo claro y oscuro. Ya formaban parte del portafolio y quería darles un lugar en el nuevo diseño.
El reloj ganó segundos. El clima volvió al centro de la franja inferior y el mapa quedó a la derecha, con México resaltado y un indicador en Ciudad de México. Ese punto corresponde a la zona horaria del reloj; no muestra dónde está la persona que visita la página.
También hubo que ordenar la navegación. En escritorio sobraba tener las opciones visibles y, además, el menú hamburguesa. Dejé los enlaces a la vista y reservé el menú compacto para pantallas pequeñas. Agregué contacto en escritorio y un acceso a la portada llamado Órbita.
Son cosas fáciles de pasar por alto en una imagen del diseño. Al recorrer el sitio se notan mucho más.
Abrir este espacio
El journal es una de las partes que más sentido le dan a la renovación. Una ficha de proyecto permite enseñar el resultado, pero deja poco espacio para contar cómo llegué ahí.
Aquí quiero poder detenerme en una decisión: por qué una animación tuvo que bajar de intensidad, cómo organicé una interfaz o qué terminé cambiando después de probarla. Habrá código cuando ayude a explicarlo, imágenes cuando haga falta ver el detalle y diagramas cuando sea más fácil dibujarlo.
Para empezar elegí el propio portafolio porque todo ese recorrido está cerca. Todavía hay cosas por revisar y medir. Prefiero ir contándolas conforme las trabaje, con ejemplos que se puedan ver.
La siguiente entrada será sobre el movimiento del hero y cómo repartí el trabajo entre Three.js, GSAP y Motion. El ajuste del hover da para contar bastante más de lo que cabe aquí.
Mientras tanto, puedes recorrer los proyectos o pasar por sobre mí. Eso es lo que buscaba al empezar esta renovación: que el sitio diera más espacio para conocer mi trabajo y a la persona que lo hace.
UNA IDEA PARA COMPARTIR
