Portfolio
La parte visual de este portfolio está inspirada en Bocanada, el disco de Gustavo Cerati de 1999: sus tonos, sus rombos y sus puntos rojos. Esta página explica esa inspiración, las reglas que salieron de ahí, y con qué tecnologías está hecho el sitio y por qué.
Bocanada
Bocanada es el disco que Gustavo Cerati publicó en 1999, el primero después de Soda Stereo. Es mi favorito de los suyos: acababa de salir de una banda enorme y el álbum que hizo es más lento, más raro y más suyo que todo lo anterior. Me pareció la referencia correcta para un sitio que una persona hace sola.
El sitio no reproduce el disco. Toma de él una paleta y unas pocas marcas, y la página de inicio alude a la portada.
- Los tonos. El azul cobalto, el humo y la tinta de la portada; el papel del libreto para las secciones claras.
- Los puntos rojos. El interior de la funda es piel azul con puntos rojos. Están detrás de la sección de Experiencia y derivan muy despacio detrás de la lista de Proyectos.
- El rombo rojo y la línea roja fina. Los únicos dos acentos que el sitio se permite: el rombo marca el índice y el elemento actual, la línea marca la lectura.
- La página de inicio es una alusión a la portada: el nombre partido alrededor de un retrato que se funde con el azul y el humo.
Las reglas
Una referencia solo sirve si se convierte en reglas que se pueden comprobar. Estas son las del sitio.
- Dos tonos. Tinta y papel, como una funda y un libreto. Cada componente se lee bien en ambos, porque los colores de rol se invierten con el fondo.
- El rojo es una marca, nunca texto. La línea roja significa lectura o sección: la regla bajo cada título, el filete de progreso arriba, el idioma activo. El rombo rojo significa índice o aquí y ahora: el kicker, los números de pista, el puesto actual. Todo lo estructural es gris.
- Una sola escala tipográfica. Seis secciones con seis layouts distintos, pero el título de un trabajo, de un proyecto y de una credencial miden lo mismo, y una fila, una tarjeta y un grupo respiran igual.
- Nada se mueve para siempre. El único movimiento perpetuo es la deriva de los puntos; todo lo demás ocurre una vez, al entrar, y después se queda quieto.
Con qué lo construí, y por qué
El stack es pequeño a propósito. Cada herramienta está aquí porque quitó algo en vez de añadirlo.
- El sitio es HTML estático sin JavaScript por defecto, así que carga antes de que corra cualquier script y se lee sin él. Astro también le da las rutas en inglés y español, fuentes autoalojadas con reservas de métricas iguales, imágenes AVIF y WebP responsivas desde un solo archivo y la view transition al cambiar de idioma.
- Los tokens de diseño viven en CSS, en un solo bloque de tema: colores muestreados de la portada, una escala tipográfica fluida y tres niveles de ritmo vertical. Cada rol de la escala tiene su utilidad, así que un componente nombra su rol en vez de sus números.
- ScrollTrigger y SplitText construyen cada sección cuando entra y dibujan los filetes con el scroll. Es una capa encima: sin JavaScript o con movimiento reducido, la página muestra su estado final y nada se mueve.
- Estricto en todas partes. El contenido es dato tipado, un archivo por sección, con los dos idiomas lado a lado para que una cadena nunca falte en uno de ellos.
- Una grotesca ligera para todo lo que se lee y un solo peso de mono para las microetiquetas, ambas servidas desde este dominio.
- Las dependencias esperan siete días desde su publicación antes de poder instalarse y nunca se degradan, y cada commit pasa por el linter, el formateador y Conventional Commits antes de entrar.
- Tres corridas móviles contra el sitio compilado, y el build falla por debajo de 90 en rendimiento y buenas prácticas o de 95 en accesibilidad y SEO.
- La piel azul y la cinta de humo son imágenes generadas con la funda del disco como referencia y comprimidas después a unos pocos kilobytes cada una. El retrato de la página de inicio soy yo, puesto en el campo de la portada.