Cómo construí este portafolio

Quería un portafolio que se sintiera vivo: animado, pero sin exagerar. Que no fuera otra plantilla con tarjetas y degradados, sino algo que se construyera frente a ti. Así nació la idea de una página hecha de bloques, armada en tiempo real por unos gatitos constructores.

Primero la arquitectura, después el diseño

Antes de pensar en colores o tipografías, planeé el stack y la estructura: Next.js con TypeScript, y un motor propio en Canvas 2D para todo lo que se dibuja con bloques. La regla más importante fue que ese motor viviera aislado en su propia carpeta y no supiera nada de React. Así puedo cambiar cualquier sección sin tocar la maquinaria.

Algunas decisiones que valieron la pena:

• Animación basada en tiempo, no en cuadros. La velocidad se mide en bloques por segundo, así que la página se ve igual en una pantalla de 60 Hz que en una de 120 Hz.
• Colores por índice de paleta. Cada bloque guarda un número, no un color. Cambiar la paleta completa no requiere volver a calcular nada.
• El agente es el cursor. Los bloques aparecen donde está el gatito. Si la animación pasara por su cuenta y el gato solo caminara encima, se notaría falso.

Trabajar con un agente de IA

Construí casi todo con Antigravity. Lo que más me ayudó no fue el agente en sí, sino el sistema alrededor de él:

• Un AGENTS.md con las reglas duras del proyecto: no hacer deploy sin permiso, no inventar decisiones de diseño, no importar React dentro del motor.
• Un MEMORY.md que el agente lee al empezar cada sesión y actualiza al terminar, para no perder el contexto.
• Decisiones importantes registradas como ADRs, para que el "por qué" no se pierda.

La otra lección: leer cada reporte con lupa. Un agente puede decir que todo pasó al 100% y aun así haber resuelto el problema equivocado. Pedir evidencia (archivo y línea) cambió por completo la calidad del resultado.

Los bugs, que fueron lo mejor

Algunos de mis favoritos:

• Los bloques fantasma. La línea del hero no aparecía. El motor se creaba con un tamaño por defecto, encolaba los bloques en la fila 65 y, un instante después, el canvas se ajustaba a su tamaño real de 10 filas. Los bloques se estaban dibujando 55 filas fuera de la pantalla. La solución fue no crear el motor hasta tener la primera medición real.
• El gatito que caminaba de reversa. Un dato en los metadatos del sprite decía que miraba a la derecha, cuando en realidad miraba a la izquierda. Resultado: un moonwalk perfecto.
• Coahuila es Tamaulipas. En la MacBook, al dar clic en Coahuila se seleccionaba Tamaulipas. El canvas se mostraba a un tamaño distinto del que el motor creía, y el clic se corría varias celdas a la derecha. Ahora toda conversión de coordenadas pasa por una sola función.
• Los commits que no existían. Durante días el agente reportó commits exitosos. Cuando quise subir el proyecto a GitHub descubrí que Git ni siquiera estaba instalado en esa computadora. No había historial de nada.
• El globo sin gato. En la primera visita, el globo de "Construyendo" subía hasta 100% flotando solo, porque el gatito aún no estaba en escena. Ahora los sprites se precargan antes de empezar y el globo solo aparece si hay un gato debajo.

Los gatitos

Los personajes los generé con ChatGPT, pero lo que genera no es pixel art real: son imágenes grandes con estilo pixel, y cada cuadro sale un poco distinto. Hubo que reducir cada uno a su cuadrícula verdadera, limpiar los colores y armar los cuadros de animación para que el gato no cambiara de tamaño al caminar. A los gatos negros les agregué un contorno sutil, porque sobre el fondo oscuro del sitio simplemente desaparecían.

Mi retrato de la sección "Sobre mí" pasó por lo mismo, más un detalle: parpadea, mira de reojo y levanta las cejas cuando pasas el cursor. Y en el camino le quité un bigote que yo no tengo.

Un mapa con mi historia

En lugar de un contador de visitas, quise un mapa de México en bloques que contara algo mío: nací en Chihuahua y vivo en Veracruz. Los estados salen de datos de Natural Earth, proyectados y convertidos a una cuadrícula. Tuve que excluir islas lejanas como Revillagigedo, que aparecían como bloques sueltos en medio del océano.

Lo que me llevo

Planear antes de construir, documentar las reglas para que el agente las respete y revisar todo lo que reporta. La IA aceleró muchísimo el trabajo, pero las decisiones, y la mayoría de los bugs, siguieron necesitando ojos humanos.

Si encuentras algún bug, la terminal de contacto está abierta.