Inicio / Artículos / Un portfolio de desarrollador en un fin de semana con Gemini 3.8 Flash High

Un portfolio de desarrollador en un fin de semana con Gemini 3.8 Flash High

Cómo dirigir a un agente de código con IA hasta publicar un portfolio en Next.js: prompts, contenido inventado, iconos, pruebas responsive y seguridad antes del despliegue.

1436 palabras

Muchos desarrolladores con experiencia comparten una costumbre algo embarazosa: años de JavaScript, TypeScript, React, Next.js, Node.js, Java, Python y cloud, y un portfolio personal que nunca se termina. Rara vez es un problema técnico. Es la trampa clásica del «luego, cuando tenga tiempo», y ese tiempo nunca llega.

Una salida es cambiar de método. En vez de pasarse días diseñando componentes y tecleando cada línea, se le puede dejar la primera pasada a un agente de código con IA. Aquí la configuración fue Antigravity con Gemini 3.8 Flash High, una tarde de fin de semana. El objetivo no era otra plantilla genérica de IA, sino un sitio que se sintiera personal, y el resultado superó las expectativas.

Un encargo deliberadamente corto

El portfolio tenía que decir tres cosas rápido: ingeniero full-stack, constructor de arquitecturas web modernas y cada vez más centrado en IA, agentes y tecnologías emergentes para desarrolladores.

También tenía que huir de la plantilla de siempre: hero, 47 insignias de habilidades, 12 tarjetas de proyectos, un currículum gigante, un saludo de «desarrollador apasionado», formulario de contacto y footer. La estructura final quedó mucho más ligera:

  • Hero a pantalla completa
  • Llamada a suscribirse a la newsletter
  • Trabajos seleccionados
  • Tecnologías principales
  • Artículos y publicaciones
  • Experiencia
  • Footer mínimo

Nada de volcar el currículum, ni carruseles infinitos, ni secciones de relleno.

Primero el diseño

La dirección visual quedó fijada antes de que Gemini escribiera nada: oscura, cinematográfica, moderna, pensada para desarrolladores, minimalista, espaciosa y personal.

Lo más importante era el hero. Una ilustración de stock de un desarrollador quedaba descartada. La idea era mostrar a la persona real en su puesto de trabajo, así que el hero final es una escena oscura y cinematográfica con un retrato integrado. Ocupa todo el viewport, algo que parece menor y cambia mucho, porque la primera pantalla se lee como una presentación y no como una cabecera. Un pequeño indicador de scroll abajo en el centro deja claro que hay más contenido debajo.

Darle a Gemini la visión completa

Aquí fue donde se puso interesante. Gemini no recibió peticiones paso a paso como «crea la navbar», luego «ahora el hero» y luego «ahora las tarjetas de proyectos». Recibió toda la visión del producto de una vez. El stack era sencillo: Next.js y Tailwind CSS.

El prompt incluía:

  • trayectoria
  • stack tecnológico
  • proyectos
  • artículos
  • experiencia
  • dirección visual
  • branding
  • requisitos responsive
  • jerarquía de contenidos

Con eso, Gemini generó la primera implementación.

La primera versión nunca iba a ser perfecta

Y no tiene por qué serlo. Algunos iconos eran provisionales, algunos logotipos de marcas eran aproximaciones y varias entradas de artículos hubo que cambiarlas por las reales.

Aquí es donde tiene que cambiar la mentalidad sobre programar con IA. La expectativa no es «la IA generó código perfecto», sino «la IA produjo una primera implementación sólida que una persona puede revisar, dirigir y pulir». Son afirmaciones muy distintas.

No dejes que el modelo se invente quién eres

La exactitud del contenido fue una de las lecciones más claras. En un portfolio, el contenido inventado hace daño de verdad. Una descripción de proyecto inventada puede parecer inofensiva, pero un artículo falso, un enlace de GitHub equivocado o una trayectoria laboral inventada no lo son en absoluto.

Por eso los enlaces y el contenido reales se pusieron a mano. Deja que la IA genere la implementación, pero no que se invente tu identidad.

Iconos reales en la sección de tecnologías

La primera versión de la sección de tecnologías usaba iconos provisionales, y eso no bastaba. Si la página menciona JavaScript, TypeScript, React, Next.js, Docker, PostgreSQL y GitHub, debería mostrar los logotipos reales. Así que a Gemini se le indicó explícitamente qué fuentes usar: Devicon para tecnologías de desarrollo y React Simple Icons para iconos de marcas en general. Un logotipo auténtico es mejor que una aproximación hecha por IA.

El responsive fue una grata sorpresa

Tras el despliegue, el sitio se revisó en escritorio y luego en móvil, y ambos se veían bien. La tablet salió mejor de lo esperado, y la tablet suele ser el breakpoint incómodo. Los layouts de escritorio se encogen, los de móvil se estiran, y el tamaño intermedio deja al descubierto las malas suposiciones. Este aguantó en los tres.

Eso apunta a algo más que generar código más rápido: con requisitos bien planteados, la IA puede producir un sistema responsive razonable en la primera pasada. Eso no elimina las pruebas. Las hace más valiosas.

Seguridad antes de desplegar

El sitio no se publicó enseguida. Antes del despliegue se revisó:

  • vulnerabilidades conocidas en las dependencias
  • claves, tokens y contraseñas escritos en el código
  • variables de entorno y claves privadas
  • números de teléfono, direcciones de correo y URL internas
  • cualquier otro secreto colado por accidente
  • datos sensibles que siguieran en el historial de Git

Ten en cuenta una distinción. Un portfolio público puede incluir a propósito tu nombre, GitHub, LinkedIn, enlaces a artículos y datos profesionales, y eso no es un problema de seguridad. Publicar por accidente algo como esto es otra historia:

API_KEY=...
DATABASE_PASSWORD=...
PRIVATE_KEY=...

Las apps generadas por IA siguen necesitando la disciplina de ingeniería de siempre.

A producción

La app terminada se publicó en Vercel. Ahí fue cuando el experimento se volvió real. Lo importante no es que Gemini generara algo de código, sino que alguien describió un producto, iteró sobre él, lo validó y lo publicó, que es una forma mucho más útil de pensar en el desarrollo asistido por IA.

¿Cuánta cuota consumió?

Gemini 3.8 Flash High se encargó de todo el flujo en Antigravity. Después, el panel de uso mostraba que quedaba el 90% del límite semanal y el 37% del límite de cinco horas. No es un benchmark científico, y otros prompts, tamaños de contexto, modelos, comportamientos del agente y proyectos darán cifras muy distintas. Aun así, como dato personal es interesante: el camino fue de cero a un portfolio diseñado, una implementación responsive, correcciones iterativas, una revisión de seguridad y un despliegue en producción, todo en un fin de semana y sin agotar la cuota semanal.

Lo que enseñó el fin de semana

La conclusión no es que Gemini sepa hacer webs, eso ya se sabe. Es cómo usarlo.

  1. Tu prompt forma parte de la arquitectura. Un prompt vago da un sitio genérico. Uno que detalla restricciones de diseño, contenido, arquitectura, tecnologías, comportamiento responsive y límites te acerca mucho más a lo que quieres.
  2. La IA es buena implementando y no tiene autoridad. Gemini puede decidir cómo construir una tarjeta. No debería decidir tu trayectoria profesional, qué proyectos hiciste, qué artículos son tuyos ni qué enlaces te pertenecen. Esas son preguntas de fuente de verdad.
  3. Iterar es mejor que buscar la perfección. El flujo no fue «prompt y luego sitio perfecto». Fue prompt, implementar, revisar, corregir, pulir, validar y desplegar, algo mucho más cercano a la ingeniería real.
  4. No toques lo que funciona. En cuanto el portfolio quedó bien, se acabaron las peticiones de «mejóralo». Los agentes son geniales cambiando cosas, pero eso no significa que haya que cambiarlo todo.

¿Funcionaría con cualquier proyecto?

Para una web de marketing, un portfolio, una landing page, un prototipo o una app basada en contenido, este enfoque puede ser muy productivo. En sistemas de producción con pagos, autenticación, datos sensibles, lógica de negocio compleja o sistemas distribuidos, la IA debería usarse de forma muy distinta, con un control más firme de la arquitectura y muchas más pruebas, modelado de amenazas, revisión por personas y verificación manual. Cuanto más está en juego, menos sentido tiene darle las llaves al agente.

Lo que de verdad puso a prueba el experimento

El portfolio era solo el vehículo. Lo que se puso a prueba fue un flujo de trabajo. El tiempo se fue menos en teclear componentes y más en estas preguntas: qué debe existir, por qué, cómo debe verse, qué no puede cambiar y qué información es la fuente fiable. El agente se encargó de buena parte de la implementación.

Para los ingenieros es un cambio real: de escribir cada línea a dirigir, revisar, validar y publicar sistemas. Eso no le quita importancia a la ingeniería. Le da más importancia al criterio de ingeniería.

Lo interesante no fue la velocidad. Lo que llamó la atención fue cuánto esfuerzo pasó de las pulsaciones de teclado a las decisiones. El desarrollo asistido por IA convence cuando alguien puede describir una idea con claridad, guiar a un agente durante la construcción, detectar sus errores, proteger las restricciones clave y seguir siendo responsable de lo que se publica, no cuando un modelo escribe 10.000 líneas. La IA no construyó el portfolio sola. Una persona la dirigió, la revisó, la corrigió y publicó el resultado, y para un experimento de fin de semana es un buen desenlace.