llamil.com
Este portafolio, en inglés y en español, sobre un fondo donde una caja se desarma mientras se lee.
- Rol
- Diseño e ingeniería
- Cliente
- Sitio personal
- Año
- 2026
- Tecnologías
- Astro, TypeScript, Tailwind CSS, WebGL 2, satori, sharp, Cloudflare
El encargo
Mi propio sitio, para dueños de negocios, agencias y reclutadores, en inglés y en español. La primera pantalla muestra una cifra de cada caso, y cada página termina con mi correo.
Cómo está construido
-
Escribir cada dato una vez.
Cada texto vive en un solo lugar, en los dos idiomas. Lo que aún falta queda marcado en los borradores y fuera del sitio publicado.
-
Ajustar la tipografía.
Los títulos grandes se calculan al compilar el sitio, para que cada uno ocupe sus columnas exactas en inglés y en español.
-
Un shader para el fondo.
Un solo shader WebGL pequeño dibuja el fondo en movimiento. Detrás del texto, solo usa tonos sobre los que el texto se lee bien.
-
Revisar lo compilado.
Cada compilación se revisa antes de poder publicarse: enlaces, los dos idiomas, tarjetas para redes, datos estructurados, cabeceras de seguridad y ningún pendiente en ninguna página.
Capacidades en la portada: la pieza de la caja que corresponde a la frase que se lee se ilumina y lleva su etiqueta.
- La parte de la frase que se lee, con su nota debajo.
- Cada pieza lleva su número, en una línea que sale de ella.
- Las placas de esta parte se llenan de luz y salen hacia ella.
- Las marcas del piso: cruces impresas en celdas enteras del tramado.
Por construcción
- 2 idiomas, cada página con sus propias direcciones y su propia tarjeta para redes
- 1 shader dibuja todo el fondo, sin bibliotecas 3D
- 0 cookies
Cuánto pesa
El módulo inicial de JavaScript ocupa menos de 4 KB comprimido.
La página más grande, comprimida, pesa menos de 30 KB de HTML con su CSS adentro. El shader del fondo se carga después de la página y solo dibuja mientras algo se mueve.
Sin WebGL, o con ahorro de datos o colores forzados, el fondo es una versión quieta hecha en CSS. Con movimiento reducido, no se mueve.
IA en este proyecto
Sí, como herramienta. Agentes de programación con IA propusieron diseños y escribieron buena parte del código; yo fijé la dirección y decidí qué se quedaba.