He hecho esta web en 3 días con inteligencia artificial (y te voy a contar EXACTAMENTE cómo)
Y sí: he hecho esta página web en 3 días con ayuda de inteligencia artificial.
No es clickbait, no es una landing a medias, ni un "en construcción". Es mi portfolio completo con:
No es perfecta, pero funciona. Y lo más importante: la he hecho yo, con mis manos, con mis herramientas, con mis errores y con un compañero de código muy inteligente.
¿Por qué en 3 días?
Porque me cansé de postergar.
Porque llevaba meses queriendo rehacer mi web.
Porque cuando trabajas para otros, tu proyecto siempre va el último de la lista.
Porque la IA ya me ayuda en mi día a día… y quería ver hasta dónde podía llegar si le pedía ayuda de verdad.
Y porque me apetecía. Ya está.
Pero sobre todo: porque quería demostrar que en 2025, con las herramientas adecuadas, hacer una web profesional ya no es cuestión de semanas o meses.
¿Qué usé? (Stack técnico real)
Frontend & Framework
Funcionalidades custom que desarrollamos
Herramientas de IA utilizadas
Deploy & Performance
¿Qué partes hice con IA? (Casos reales)
🤖 **Desarrollo de componentes complejos**
Yo: "Necesito un sistema de workload status que muestre mi disponibilidad"
IA: Me generó un componente con:
"syntax-keyword">const workloadLevels = {
available: {
color: 'green',
text: 'Disponible para nuevos proyectos',
emoji: '🟢'
},
busy: {
color: 'yellow',
text: 'Ocupado pero aceptando consultas',
emoji: '🟡'
},
full: {
color: 'red',
text: 'A tope, vuelve en unas semanas',
emoji: '🔴'
}
};
🎨 **Design system coherente**
Yo: "Quiero un dark mode nativo que no se sienta forzado"
Yo: "Quiero un dark mode nativo que no se sienta forzado"
IA: Me ayudó a crear una paleta de colores cohesiva:
:root {
--primary: #FF6B6B;
--secondary: #4ECDC4;
--accent: #45B7D1;
--fondo: #0A0A0A;
--gray-50: #F9FAFB;
--gray-900: #111827;
/* + 12 colores más para consistencia total */
}
📝 **Sistema de blog dinámico**
Yo: "Necesito un blog que no me dé pereza mantener"
IA: Desarrollamos:
🎯 **Optimización SEO avanzada**
IA me ayudó con:
💡 **Problemas técnicos resueltos en tiempo real**
Error típico: "Hydration mismatch en el layout"
IA: Identificó el problema en el className dinámico y lo solucionó en 30 segundos.
Error de build: "generateStaticParams missing en páginas dinámicas"
IA: Configuró automáticamente la generación estática para el export.
¿Cómo fue el proceso día a día?
**DÍA 1: Arquitectura y setup**
**DÍA 2: Componentes y funcionalidades**
**DÍA 3: Polish y optimización**
¿Cómo puedes hacerlo tú también? (Guía paso a paso)
**1. Define tu objetivo (30 min)**
¿Qué quieres conseguir con tu web?
**2. Elige tu stack tecnológico (30 min)**
Si sabes programar:
Si no sabes programar:
**3. Estructura tu contenido ANTES de tocar código (2 horas)**
Home: Hero con propuesta de valor + Skills principales + Proyectos destacados + CTA específico
About: Tu historia en 2-3 párrafos + Foto profesional + Timeline de experiencia + Personalidad
Projects: 5-8 proyectos máximo con problema, solución, tecnologías, resultado + Screenshots + Links
Blog: 1-3 posts para empezar + Categorías claras + Newsletter signup
**4. Desarrolla con ayuda de IA (16-24 horas)**
Prompt example para IA:
Actúa como senior developer. Necesito crear [componente]
que haga [funcionalidad] usando [tecnología].
Quiero que sea accessible, responsive y performant.
Incluye TypeScript types y mejores prácticas.
Lo que NO hagas:
Lo que SÍ hagas:
**5. Deploy temprano y itera (1 hora setup, mejoras constantes)**
Opciones de hosting:
¿Y si no sé programar?
Framer es tu mejor amigo. En serio.
Es como Figma pero exporta código Next.js real. Puedes:
Alternativas:
Errores que cometí (y cómo evitarlos)
**Error 1: Empezar por el diseño**
Perdí 3 horas eligiendo colores antes de tener contenido.
Solución: Contenido primero, diseño después.
**Error 2: Copiar código sin entender**
Me dio un error de hydration que tardé 2 horas en debuggear.
Solución: Siempre pide explicaciones a la IA.
**Error 3: No probar en móvil hasta el final**
Algunas cosas se veían mal en responsive.
Solución: Desarrolla mobile-first desde el principio.
**Error 4: Perfeccionismo paralizante**
Quería que cada componente fuera perfecto antes de avanzar.
Solución: Hazlo funcionar, luego hazlo bonito.
¿Qué aprendí?
**La IA es un multiplicador, no un reemplazo**
**El contenido sigue siendo lo más importante**
Puedes tener la web más bonita del mundo, pero si no sabes qué contar, no sirve de nada.
**Ship fast, iterate faster**
Es mejor tener una web online al 80% que un proyecto perfecto que nunca ve la luz.
**La tecnología está cambiando MUY rápido**
Next.js 15, TailwindCSS 4, IA cada vez más potente... Si esperas a dominar todo, nunca empezarás.
¿Qué viene después?
**Próximas mejoras (ya planificadas):**
**Experimentos que quiero probar:**
Conclusión (y reflexión personal)
No me esperaba hacer esto en 3 días. Pero lo hice.
Porque tenía claro lo que quería.
Porque me dejé ayudar por la tecnología.
Porque me quité la presión de que saliera perfecta.
Y porque la IA me permitió enfocarme en lo que realmente importa: el contenido y la experiencia de usuario.
¿Es perfecta? No.
¿Funciona? Perfectamente.
¿Me representa? Totalmente.
¿Aprendí en el proceso? Un montón.
**Para ti que estás leyendo esto:**
Si llevas meses (o años) pensando en hacer tu web, empieza mañana.
No necesitas ser developer.
No necesitas tener todo el contenido.
No necesitas el diseño perfecto.
Solo necesitas:
1. Una idea clara de para qué quieres la web
2. Ganas de aprender sobre la marcha
3. Un compañero de IA que te ayude con lo técnico
¿Quieres ayuda para hacer la tuya?
¿O simplemente tienes dudas existenciales sobre si poner o no tu foto en la home?
Escríbeme. No tengo todas las respuestas, pero seguro que algo se me ocurre.
Y si haces tu web inspirándote en este post, compártela conmigo. Me encanta ver lo que hace la gente.
—
Carlos Llamas Calvo ✌️
*PD: Si has llegado hasta aquí, ya sabes más sobre desarrollo web que el 90% de la gente que dice "yo es que no sé de tecnología". Ahora solo falta que lo hagas.*