Albert Font · AI Software Engineer

Web personal de Albert Font — AI Software Engineer, automatización con IA e ingeniería de procesos de negocio. "Construyo software que automatiza procesos de negocio reales."

Diseño

"Murmuración": la página es un día entero — el cielo cambia con el scroll de alba a noche, con una murmuración de golondrinas viva de fondo (canvas 2D con flocking que huye del cursor). Juego escondido: doble clic en el cielo crea un cable donde se posan las golondrinas.

La portada es un resumen para clientes (qué hago, proyectos, cómo trabajo, experiencia breve): la trayectoria completa vive en LinkedIn.

Páginas

• / — la portada (index.html → src/App.jsx)
• /train-movement/ — el caso de estudio de Train Movement (train-movement/index.html → src/CaseTrainMovement.jsx), enlazado desde la postal del proyecto

Las dos comparten marco (cielo, murmuración, menú y pie) en src/components/SiteShell.jsx, y cada una es una entrada del build (rollupOptions.input en vite.config.js), así que son HTML de verdad en dist/, no rutas de un router.

Stack

• React 19 + Vite 7, sin más dependencias de ejecución
• Prerender en el build — scripts/prerender.js inserta cada página ya renderizada (castellano) en su HTML de dist/ con react-dom/server, y el cliente la hidrata: el contenido llega en el HTML (primer pintado sin esperar al JS, texto visible para buscadores). Si el visitante eligió inglés, React la pinta de cero en inglés
• Tailwind CSS (tokens de diseño en tailwind.config.js)
• CSS + IntersectionObserver (un único observer compartido) para las apariciones — sin librería de animación; las animaciones solo usan opacity/transform, se pausan fuera de pantalla y respetan prefers-reduced-motion
• Canvas 2D — murmuración de golondrinas (sin librerías 3D), dibujada por lotes
• Bilingüe ES/EN — castellano por defecto, inglés con el selector del menú. Todo el contenido vive en src/data/content.js; los componentes solo leen content[lang]
• Imágenes en WebP a la medida con JPEG de reserva y carga diferida

Desarrollo

npm install
npm run dev      # servidor de desarrollo (sin prerender)
npm run build    # build de producción en dist/ + prerender
npm run preview  # previsualizar el build

Despliegue

Cada push a main lanza el workflow de GitHub Actions que hace el build y publica en GitHub Pages automáticamente.