bcerron.com
Mi portfolio, construido como un producto completo: diseño, código, datos y despliegue, con un equipo de agentes de IA
Desliza para leer el caso
Descripción
La idea visual es un túnel de viento que se recorre en horizontal. Las líneas de corriente se calculan de verdad: rodean cada bloque de texto sin cruzarlo, y una sola corriente de color cobalto lleva hasta el contacto. Empecé con prototipos en HTML generados por scripts, comparé tres direcciones visuales y me quedé con esta. Después porté el cálculo a Angular y lo verifiqué contra el prototipo: las mismas líneas, con un margen de una unidad.
Todo el contenido sale de Supabase y se edita desde un panel propio: casos, experiencia, skills, trayectoria, textos legales y hasta la paleta de colores. Nada está escrito en el código y nada necesita redesplegar.
Lo construí con Claude Code organizado como un equipo. Hay agentes especializados en datos, web pública, panel, motion, SEO, seguridad y tests, y un director que divide cada tarea y la reparte. Yo decido la dirección, reviso cada entrega y apruebo lo que se publica. Al cerrar cada bloque pasan una revisión de código, una auditoría de seguridad y la batería completa de pruebas de extremo a extremo.
Problema
Mi trabajo más importante está dentro de una empresa y no se puede enseñar. Necesitaba una web que hiciera dos cosas a la vez: que en quince segundos quedara claro quién soy, y que la propia web sirviera de prueba de lo que sé hacer. No quería un CV online ni una plantilla de WordPress. Quería un producto real, con base de datos, panel de administración, autenticación, correo, bilingüe y desplegado, y hecho con el mismo proceso con IA que defiendo en mi perfil.
Qué hice
- DiseñoTres direcciones visuales prototipadas en HTML, sistema de tokens con contraste AA en modo claro y oscuro, y un prototipo completo del panel antes de escribir código.
- MotionUn campo de flujo calculado que se adapta al texto real y se regenera en menos de 2 ms, transiciones entre páginas y un logotipo animado. Todo respeta la preferencia de movimiento reducido.
- FrontendAngular con renderizado en servidor sobre Cloudflare Workers, rutas en español e inglés y SEO técnico completo.
- Datos / Seguridad23 migraciones en PostgreSQL con políticas de acceso por fila, almacenamiento de imágenes y 680 comprobaciones automáticas de la base de datos.
- Panel AdministrativoUn CMS propio con borradores, vista previa, galerías, mensajes en tiempo real, textos legales y editor de paleta
- AutomatizaciónFormulario de contacto con antispam y respuesta automática bilingüe, un CV en PDF que se regenera solo cuando cambian los datos, y analítica sin cookies.
- IAUn equipo de agentes de Claude Code con roles, un director de tareas y revisiones por bloque. Yo dirijo, reviso y decido.
Resultado
La web está en producción en bcerron.com. En Lighthouse para móvil, la Home saca 95 en rendimiento, 100 en accesibilidad y 100 en SEO. Detrás hay unas 100 suites de pruebas unitarias, 25 de extremo a extremo y una integración continua que valida la app, la base de datos y las funciones en cada cambio.
Lo que me llevo:
- Que un test pase no significa que se vea bien. Las comprobaciones de geometría daban verde con líneas que estaban feas. Ahora miro cada captura antes de dar algo por bueno.
- Más agentes no siempre es más rápido. Con más de cuatro en paralelo, la máquina se saturaba y las pruebas fallaban por tiempo. Ahora el trabajo pesado va en serie.
- Los datos de prueba no llegan a producción. Una sección salió vacía tras un despliegue. Desde entonces, los valores por defecto viajan dentro de las migraciones.
Tecnologías
Angular · Supabase · Typescript
Galería
