Cómo se hizo este sitio

Un sitio personal también es un portafolio, así que aquí cuento las decisiones detrás de este y cómo uso la IA junto con la ingeniería que ya sabía. Lo diseñé, lo escribí y lo revisé todo yo.

Por qué tanto para un sitio sencillo: Para un sitio personal, esto es más de lo necesario, y es a propósito: muestra cómo trabajo en proyectos de verdad. En un proyecto de cliente, la primera decisión es cuánto rigor pide el problema. Las pruebas en varios navegadores, las auditorías y las revisiones cuestan tiempo y dinero, así que las dimensiono según el riesgo, el plazo y el presupuesto, y digo con claridad qué puede esperar.
Ingeniería con IA: La base es lo que ya sabía hacer: arquitectura, TypeScript, bases de datos, pruebas, seguridad y revisión de código. La IA entra como herramienta. Uso Claude Code con agentes guiados por checklists de especialistas. Muchas veces, varios proponen soluciones distintas para el mismo problema y las confrontan hasta llegar a la mejor, y revisores independientes prueban el resultado. Yo decido, reviso cada cambio y elijo qué se publica.
Los dibujos: Los dibujos son una sola pieza, hecha en SVG y canvas a partir de datos. Empieza en el globo, baja hasta Portugal, sube la escalera de la carrera y termina en el equipo de agentes, con un zoom en cada nivel mientras lees. El texto se desplaza y el dibujo lo acompaña sin cortes, para que la historia se lea como una sola. El recorrido guiado usa el mismo dibujo, y todo está traducido a los 4 idiomas, incluidos los textos dentro de los dibujos.
El vídeo: El vídeo de resumen se generó con código a partir de los mismos dibujos, tipografías y colores de la página, fotograma a fotograma en un navegador, con una skill de IA para vídeo. La música también está generada, en la menor, con un toque en cada peldaño de la escalera, y no hay voz sintética. Existe en los 4 idiomas.
Tecnologías: Next.js 16, React 19 y TypeScript, estilos en Tailwind CSS 4, base de datos Postgres en Supabase, alojamiento y CDN en Vercel, emails con Resend y la verificación anti-bots de Cloudflare.
Panel de administración: Detrás del sitio hay un panel propio: mensajes, contactos por etapa, visitas y su origen, solicitudes de currículum y un registro de seguridad. Se entra con un enlace de un solo uso enviado por email, con aviso en cada inicio de sesión. Está pensado para crecer: puede convertirse en el centro de otras herramientas y back-offices, con el mismo control de acceso.
Calidad: Cada cambio pasa por pruebas automáticas en 4 idiomas, en móvil y en ordenador, en Chrome, Safari y Firefox, accesibilidad incluida (WCAG 2.2 AA). La seguridad sigue OWASP, con validación en el servidor, verificación anti-bots, límites de envío, Row Level Security en la base de datos, HTTPS obligatorio y Content Security Policy, entre otras técnicas. En Lighthouse, de 96 a 100.
SEO y GEO: Cuatro idiomas enlazados entre sí, datos estructurados de schema.org, sitemap y un llms.txt: el sitio está hecho para aparecer en los buscadores y también para que los asistentes de IA lo encuentren y lo citen.
Privacidad: El sitio no usa cookies de seguimiento ni anuncios. La IP desaparece en 14 días, y los mensajes y las solicitudes de currículum se borran en un máximo de 24 meses. Los detalles están en la política de privacidad.
Currículum: El PDF sale del mismo contenido del sitio, en 4 idiomas, pensado para personas y para sistemas de reclutamiento: una columna, texto real, títulos estándar y enlaces clicables.