El CV y Portafolio OA tiene dos capas. Arriba, papel: cada imagen va impresa a dos tintas. Debajo, un fondo oscuro donde esas mismas imágenes están a color. Entre una y otra hay tres caminos, y el sitio se lee entero sin tomar ninguno.
- Tipo de proyecto
- CV y portafolio
- Estructura
- Dos capas, un solo canvas
- Tamaño
- 32 páginas en dos idiomas
- Tecnología
- Next.js, three.js y GSAP
La misma página existe dos veces: impresa en papel y encendida debajo.
No son dos diseños ni dos juegos de imágenes. El navegador maqueta una sola página y un único canvas, fijo detrás, pinta cada imagen de las dos maneras. Dónde se abre el papel lo decide quien la recorre.
Tres caminos entre las capas.
El puntero deja una estela que se comporta como tinta en agua: una simulación de fluidos estables abre el papel por donde pasa y lo cierra al momento. Un anillo en la barra extiende la otra capa por toda la página desde el propio botón, en 1,7 segundos. Y la primera carga se espera debajo, hasta que el papel sube como una sola hoja de borde recto.
Una columna arriba, una rueda debajo.
En escritorio, el índice no hace scroll. La rueda del mouse, las flechas o un arrastre giran un carrete sin fin de once portadas, que se detiene con una en el centro. Sobre el papel es una columna recta; debajo, las mismas portadas cuelgan de una rueda vista de canto, cada una un doceavo de vuelta más allá. Esa rueda de portadas solo existe en el shader: en el DOM, las cajas siguen en su columna.
El navegador maqueta, el canvas pinta.
Cada imagen es una imagen corriente dentro de su caja, con su texto alternativo y su foco. Un único canvas lee esas cajas en cada fotograma y pinta dentro la versión impresa o la de color; las dos tintas no son otro archivo, se calculan a partir de la misma imagen. El texto es blanco y se funde por diferencia con lo que tiene detrás, así que siempre sale invertido, incluso con media letra en cada capa.
Apagado, sigue diciéndolo todo.
Sin WebGL, con movimiento reducido o en un teléfono, ningún canvas pinta las imágenes: queda una página corriente, con imágenes nativas y todo su contenido. Añadir ?still a cualquier dirección la deja así en escritorio. En el teléfono el cambio de capa se conserva: sigue extendiéndose desde el botón, sobre un fondo que solo se carga con el primer toque.
Dos tintas calculadas en el shader, sin segundo archivo
Texto invertido por modo de fusión, sin script
Cinco tokens neutros para todos los componentes
Presupuesto de 3,6 millones de píxeles para el canvas
El canvas deja de dibujar si nada se mueve
Títulos pegados al margen por tinta medida
La compilación falla si los dos idiomas divergen
Monograma construido a partir de cinco números