Sitio personal
Este portafolio
Un sitio estático que se abre con una animación de mí en estilo anime, dibujada a partir de una captura de movimiento real.
En curso
15 dibujos, animados en código
18 páginas de tomo, plegadas en código
3 idiomas
0 frameworks, cookies o solicitudes a terceros
El sitio que está leyendo. La intro es un movimiento real: un gesto tomado de la base de captura de movimiento de la universidad Carnegie Mellon, redibujado en 15 imágenes con ChatGPT al estilo de un anime de acción y luego animado en código, sin video. El resto se lee como un manga: SAP Run como capítulo, Productos web como un tomo de 18 páginas que se hojea, una página dibujada por proyecto.
Herramientas: HTML, CSS, JavaScript, Node.js, ChatGPT para los dibujos, Claude Code.
La intro: atrapa la ventana de carga y la lanza fuera de la pantalla
La intro
- Un gesto elegido en una captura de movimiento real, ajustado imagen por imagen sobre un maniquí 3D.
- 15 dibujos a color, fieles a la misma hoja de personaje; la línea de carga sigue la carga real de las imágenes.
- Se reproduce una vez por carga de página, se puede saltar con el teclado y queda inmóvil si el dispositivo pide menos animaciones.
Los capítulos
- SAP Run: una noche de guardia en cinco viñetas, tres dibujos y dos pantallas en HTML.
- Productos web: un tomo de 18 páginas, una página dibujada por proyecto; la viñeta del proyecto se coloca sobre la viñeta vacía de la página, medida al píxel.
- Las páginas se pasan con el dedo, el mouse o el teclado: pliegue calculado en 2D y recortado con clip-path, sin librerías; giro en 3D si el dispositivo se esfuerza, cambio de página inmediato si pide menos animaciones.
- Las viñetas de SAP Run se entintan al entrar en pantalla; en el tomo, cada página se entinta viñeta tras viñeta al asentarse, la viñeta del proyecto cobra vida y luego se estampa su onomatopeya.
- Una lectura automática, opcional, pasa las páginas sola.
Bajo el capó
- HTML, CSS y JavaScript sin framework, generados por un script de Node a partir de los archivos de contenido del sitio y del CV, en francés, inglés y español.
- Dibujos en AVIF con WebP de respaldo, cargados dos páginas por adelantado en el tomo; las demás imágenes en WebP; fuentes alojadas en el sitio, reducidas a los caracteres usados.
- El contenido SAP viene del mismo archivo que el CV.