Iterando con Vibe Coding: Elevando Mi Sitio a Nuevas Alturas

No es magia, es método. Y sí, también algo de obsesión por los detalles 😅

En el primer post conté cómo, con ChatGPT como copiloto y Vercel V0 al volante, armé un prototipo funcional de mi sitio web personal en una tarde.
Pero eso fue solo el comienzo.

Después vino lo más interesante: iterar. Mejorar cada parte. Convertir ese primer boceto en algo que realmente me represente.
En este post te muestro cómo fui trabajando, sección por sección, para darle forma a mi sitio.

Caminaremos esos pasos por cada sección. No entraré en mucho detalle, solo el suficiente para que puedan llevarse mis aprendizajes y aplicarlos en sus propios proyectos.

---

🧪 TL;DR

En este post muestro cómo iteré sección por sección mi sitio personal: mejoré el About, sumé un carrusel con IA en la Home, organicé mis Proyectos, armé una Página de contacto funcional, una sección /uses y hasta una terminal interactiva.

Todo con prompts reales, ejemplos visuales y mucho vibe coding 🚀

---

🤙 Sección: About

La sección “About” fue la que más tiempo me llevó.

Quería que sea más que una bio genérica. Buscaba una presentación honesta, visual y bien estructurada.

Deseaba tener:

• Una descripción clara y cercana

• Una buena foto mía (no fue fácil elegirla)

• Links a LinkedIn, GitHub y demás redes

• Un timeline de experiencia laboral

• Una sección de educación, con una imagen que evoluciona desde mi infancia hasta hoy

• Lista de skills técnicas y blandas

• Y algunas curiosidades personales

Para lograr todo eso comencé con el siguiente chat en el proyecto de V0:

En base a la rama develop del repositorio, me gustaria agregar la page about, la misma me gustaria que tome informacion de mi linkedin <https://www.linkedin.com/in/fdegiovanni/> y de mi github <https://github.com/fdegiovanni>

inspirate en las webs:
 - <https://wesbos.com/about>
 - <https://www.lydiahallie.com/about>

Si necesitas informacion puedes preguntarme
También puedes darme ideas copadas y geeks para agregar

El resultado tenía gaps con lo que yo tenía en mente, pero era un excelente draft para comenzar.

Retruque al chat con lo siguiente:

Me gusta, sin embargo:
1. 1. quitaría Open source y projects dado que van a estar en otra page
2. me gusta el cafe pero no tanto, prefiero el mate incluso tengo mas de 5 mates: calabaza, vidrio, ceramico, madera, metalico e incluso electrico
3. no tengo teclados, pero soy fan de los stickers y me cuesta mucho pegarlos por lo que los tengo en una caja en mi ropero
4. no soy fanático de jugar, pero me gusta leer y soy fanático de El Señor de los Anillos, Harry Potter y La Rueda del Tiempo
5. no contribuyo en open source
6. me gusta mucho la astronomia y fui colaborador en el observatorio astronomico de la UTN de San Francisco
7. me encantan los museos, siempre que voy a una ciudad voy a un museo
8. usa mi cv virtual para obtener datos de experiencia, educacion y skills <https://fluorescent-success-de2.notion.site/Degiovanni-Federico-Alberto-ac32be4a82834f8c8fa88ff7c99e4789?pvs=74>
9. el texto debe estar en español
10. por cada skill me gustaria luego linkear a mi pagina de /blog con un param como filttro para que obtenga los posts de ese tema

Con ese prompt visualmente me acerque mucho a lo que queria. Sin embargo siempre quise un timeline de mi educacion… pensado como podia hacer algo interesante (mr burns meme), tire este prompt

la sección de educación podríamos generarla como si fuera una línea de tiempo con scroll, con un toque humorístico al estilo de *The Big Bang Theory*: nacimiento, primaria, secundaria, universidad, aprendizaje continuo (Udemy, O'Reilly, YouTube, eventos)
la linea del tiempo quiero que arriba tenga la imagen adjunta y que al scrollear se vaya apareciendo y resaltando los elementos similares,
las cards de las experiencias deberian ser con scroll cuando el texto sobrepasa al tamaño de la card
la sección experiencia me gustaría que la card de frente tenga título o rol, desde-hasta, empresa y una breve descripción; y en el dorso muestre las responsabilidades y logros importantes.

Con esos prompts pude generar visualmente lo que queria. Para pasarlo a mi repositorio lo que hice fue:

1. Crear una branch nueva

2. Copiar los archivos que se crearon en V0

3. Pushear los cambios

4. Hacer un PR

5. Pedirle a copilot que haga PR review y ver si lo que me proponia como cambios era interesante como para aplicarlo…

6. Mergear las ramas

No voy a mentir, tuve mucho de vibe coding para que esta page funcionara bien. Aun tiene issues. Pero seran problema para el Fede del futuro.

Los pasos 1 al 6 es el mood de como incorporar una feature, eso lo hice en cada sección, si van al repositorio verán que tengo casi un PR por sección.

🏡 Sección: Home

En la home tenía sumado un poco sobre mí y un preview de la CLI… le faltaba algo de personalidad…

Así que trabajé en un carrusel de imágenes generadas con IA, cada una representando una faceta de mi identidad como ciclista, con toques de cultura pop y humor.

Este carrusel merece un post propio (¡próximamente!), porque fue toda una experiencia en sí.

En base a la rama develop del repositorio, me gustaria agregar en la pagina inicio debajo del resumen sobre mi un carrousel con las imagenes adjuntas y con un mensaje que cuente sobre que son imagenes creadas con IA creando mi avatar de mi mismo como un personaje de star wars, recorriendo en mi bici/speeder distos accidentes geograficos de argentina (cataratas del iguazu, bañado la estrella, esteros del ibera, glaciar perito moreno, patagonia)...proximamente del mundo

Por supuesto que adjunte las imagenes ya que las cree con ChatGPT.

🏗️ Sección: Proyectos - mostrar lo que hago, no solo contarlo

La sección de proyectos no podía faltar. Soy de hacer muchas cosas… tengo un sticker en mi compu que dice “All my shit's online” sin embargo casi nadie sabe lo que tengo… necesitaba un lugar donde pueda mostrar lo que hago.

en base a la rama develop del repositorio, me gustaria poder trabajar en la page proyectos donde se vea un listado y luego se pueda ver con mas detalle

tengo estos proyectos por ahora:
- esta misma web personal, creada con vibe coding con V0 https://github.com/fdegiovanni/landing
- un mini curso de desarrollar un videojuego que di en nerdearla:  https://fluorescent-success-de2.notion.site/Tutorial-Irresponsible-Ninja-13ccf4f484f347e4abff5a833d25b542?pvs=74 https://github.com/fdegiovanni/phaser3-get-started
- un mini curso de python para principiantes (en construccion)  https://fluorescent-success-de2.notion.site/Python-101-1db32f0451ae486485f6aab933eff118
- un sistema compuesto por un frontend y un backend para permitir la localizacion. es una herramienta que permite gestionar claves y traducciones asignando a un proyecto y una API que permite descargar las traducciones online a un proyecto (pensado para permitir localizacion a los estudiantes de Programacion2 de la licenciatura en produccion de videojuegos y entretenimiento digital

☎️ Sección: Contacto - simple, seguro y con onda

No me gustaba la idea de un simple "mandame un DM".

Así que armé una página de contacto con:

• Formulario conectado a Supabase

• Validación básica anti-spam

• Links a mis redes

• Y sí, un link a mi Cafecito ☕

en base a la rama develop del repositorio, me gustaria poder trabajar en la seccion contacto. necesito recomendaciones sobre si el mensaje es para abrir un mail o puedo usar un servicio para procesar esos mensajes. necesito en ambos casos incorporar seguridad

Aca V0 me dio las siguientes opciones con sus pro y contras:

• Email-Based Contact Form

• Service-Based Processing (Supabase)

Escogi ir por usar con Supabase, alli la tool me permitio hacer la integracion de una forma super simple y paso a paso.

🎱 Sección: /uses - las herramientas y config que me acompañan

Siempre me gusto que Wes Bos compartiera info de como tiene configurado su IDE y su terminal, ademas de su oficina. Ademas creo la web https://uses.tech/ que compila un monton de personas que quieren compartir su setup.

La idea: compartir lo que a mí me sirve, por si a otro también.

quiero agregar una page /uses para que se liste en <https://uses.tech/>
algunas de las cosas que puedo citar:
setup:
standing desk manual
silla ergonomica corsair t3 rush
teclado pop logitech
mouse pop logitech
monito dell 27
monitor asus portatil
monitor light bar xiaomi

ordenador de trabajo: mac pro M3
ordenador personal: mac pro intel

celular: motorola edge 40

mate electrico

smartwatch xiaomi

auriculares sony xmh 5000
auriculares samsung galaxy bud pro

Me dio una page agradable… Debo trabajar en completarla con más ítems que puedan servir. Pero para eso ya habrá tiempo.

💻 Terminal interactiva: para lxs que amamos el CLI

Un toque nerd que me divierte mucho.

• Simula una consola con comandos que muestran info sobre mí

• Incluye arte ASCII con fdegiovanni (generator )

Esta sección la trabaje iterando con GitHub Copilot, dado que queria hacerlo más a mano, pero lo que había generado inicialmente V0 funcionaba de 10.

🚧 Lo que viene

Esto no termina acá. Sigo mejorando el sitio y probando cosas nuevas.
En el próximo post voy a contar cómo usé IA generativa para crear imágenes personalizadas, como las del carrusel.

🙌 CTA

¿Vos también estás armando tu sitio personal?
¿Hay alguna sección que querés sumar y no sabés por dónde arrancar?

Contame en comentarios o en redes 👇

👉 Seguime en LinkedIn, X, Instagram y dejale una ⭐ al repo en GitHub.

¿Te sirvió? Invitame un ☕ en Cafecito.