Cómo construí un sitio web que hace entrevistas por mí (y por qué deberías pensar en tu portafolio como un producto)
Voy a contar una historia que comenzó con frustración y terminó con un avatar mío respondiendo a reclutadores en 3 idiomas.
El problema
Todo profesional de tecnología ya pasó por esto: tienes 10 años de experiencia, trabajaste en proyectos reales con resultados concretos, pero tu currículum es un PDF estático que no cuenta ni el 5% de la historia. Los reclutadores mandan mensajes en LinkedIn con vacantes que no tienen nada que ver con tu perfil. Otros piden "30 minutos de tu tiempo" para entender si la vacante tiene sentido — y gastas 2 horas a la semana en llamadas que no llevan a nada.
Decidí resolver esto de la manera que sé: construyendo.
La idea
¿Y si mi portafolio no fuera solo un sitio bonito, sino un producto que trabaja por mí? Algo que:
- Reciba al reclutador o cliente
- Entienda lo que necesita
- Conecte con mi experiencia relevante
- Califique el lead automáticamente
- Y solo me llame cuando realmente valga la pena conversar
¿Suena ambicioso? Lo era. Pero fui haciéndolo por fases.
Fase 1: Lo básico que nadie hace bien
Comencé con lo que todo dev hace: armar el sitio. Pero con decisiones que me iban a ayudar después:
- Monorepo con Turborepo — frontend y backend en el mismo repo, tipos compartidos
- Next.js 15 con App Router — SSG para el blog, ISR para el contenido dinámico
- NestJS 11 en el backend — modular, testeable, Swagger automático
- Trilingüe desde el día 1 (en/pt/es) — porque mis clientes están en Brasil, EUA y LATAM
La diferencia aquí fue pensar en el portafolio como un SaaS de una sola persona. Cada sección viene de un CMS que yo controlo. ¿Quiero cambiar mi experiencia? Edito en el admin, el sitio se actualiza en 5 minutos.
Fase 2-5: El admin que yo quería
Aquí la cosa se puso interesante. Además del portafolio público, construí un dashboard admin completo:
- Blog CMS con generación de borrador por IA, traducción automática para 3 idiomas, y generación de post para LinkedIn
- Kanban con drag & drop y generación de cards por IA
- Google Calendar integrado (OAuth2, CRUD de eventos, vistas Mes/Semana/Día)
- Finance tracker con cuentas personales/empresariales, categorías, importación de CSV
- Analytics con dashboard GA4 (tendencias, páginas top, fuentes, dispositivos)
- News aggregator con 10+ feeds RSS y sumarización por IA
- AI Assistant con 37 herramientas — puedo gestionar todo por chat
El asistente es la pieza que junta todo. Yo digo "crea un card urgente en el kanban sobre optimizar el deploy" y él lo crea. "¿Cuál fue mi facturación este mes?" y él consulta las finanzas. "Traduce el último artículo al español" y lo hace.
Fase 6: Donde las cosas se volvieron locas
Aquí fue donde me emocioné — y el resultado quedó mejor de lo que imaginaba.
El sistema de entrevista por IA
Construí un sistema progresivo de entrevista:
Nivel 1: Chat texto — La IA responde como si fuera yo (usando mi perfil completo, mi experiencia, mis proyectos). Califica al lead silenciosamente, dando una nota de 0 a 100 en 4 dimensiones: presupuesto, cronograma, ajuste técnico y engagement.
Nivel 2: Voz — Cloné mi voz en ElevenLabs. El visitante graba audio, Deepgram transcribe, la IA responde, y ElevenLabs sintetiza la respuesta con mi voz. El reclutador literalmente "conversa" conmigo.
Nivel 3: Avatar — Integré SimliAI para lip-sync. Un avatar mío responde con movimiento labial sincronizado con la voz. Y todo corre en el navegador del visitante — sin servidor de video.
Nivel 4: Transfer en vivo — Cuando la conversación se pone buena, el visitante hace clic en "Talk to Real JV", el sistema crea una sala en Daily.co y me notifica. Entro en la llamada y el avatar desaparece, dando lugar a mi cámara real.
Los desafíos técnicos
Hacer que esto funcionara en móvil fue la parte más difícil:
- Safari no soporta audio/webm — tuve que detectar el MIME type y mandar como audio/mp4
- Móvil bloquea audio sin gesto del usuario — creé un elemento Audio persistente y reproduzco un buffer silencioso en el momento del tap
- Audio doble en modo avatar — el audio reproducía localmente Y en SimliAI. Lo resolví con una bandera dinámica basada en el estado real de la conexión del avatar
- Avatar no cargaba en la primera visita — race condition en socket.io. Cambié por una llamada REST para obtener la configuración
Cada uno de estos bugs llevó horas de debug con DevTools móvil. Pero el resultado es que funciona en Chrome, Safari y Firefox — desktop y móvil.
Los números
| Recurso | Métrica |
|---|---|
| Módulos backend | 15 |
| Endpoints REST | 130+ |
| Componentes React | 69 |
| Tools del AI Assistant | 37 |
| Tablas en la base de datos | 30+ |
| Idiomas | 3 |
| Schemas Zod | 40+ |
| Costo mensual estimado | ~$45 (5h de sesiones) |
El backend corre en una VM Oracle Cloud de 1GB de RAM. Sí, 1GB. El secreto: la VM solo orquesta — el audio pesado va directo a las APIs cloud (Deepgram, ElevenLabs, SimliAI). Build local + rsync del dist.
Lo que aprendí
- El portafolio es producto — Trátalo como tal. Versioná, monitoreá, iterá.
- IA no sustituye, amplifica — La IA no hace mi entrevista mejor que yo. Hace las 20 entrevistas que no tengo tiempo de hacer.
- Mobile first no es opcional — 60%+ de los visitantes vienen por móvil. Si el audio no funciona en Safari, perdiste al reclutador.
- Fallback en todo — ¿Claude se cae? OpenAI toma el control. ¿API del CMS falla? Los datos estáticos cargan. ¿Avatar no conecta? Voice mode continúa.
- El costo importa — Usé Deepgram en vez de Whisper ($0.007/min vs $0.006/min pero streaming nativo), SimliAI en vez de HeyGen (10x más barato), Daily.co free tier.
Stack final
| Capa | Tecnología |
|---|---|
| Frontend | Next.js 15, React 19, Tailwind v4, TypeScript |
| Backend | NestJS 11, Socket.io, TypeScript |
| Database | PostgreSQL (Supabase) con RLS |
| LLM | Claude Sonnet 4 + GPT-4o fallback |
| STT | Deepgram Nova-2 |
| TTS | ElevenLabs (voice clone) |
| Avatar | SimliAI (browser-side lip-sync) |
| Video | Daily.co (live transfer) |
| Deploy | Vercel (front) + Oracle Cloud VM (back) |
| CI/CD | GitHub Actions |
| Monitoring | Sentry |
Próximo paso
Ahora este sitio es un proyecto en mi portafolio. ¿Meta, no? El sitio que construí para mostrar mis proyectos se convirtió él mismo en uno de los proyectos más completos que jamás hice.
Si eres dev y tu portafolio aún es un HTML estático o un template de Vercel... piensa en lo siguiente: el mejor case study que puedes tener es tu propio sitio. Nadie va a cuestionar si el proyecto es real — porque está ahí, funcionando, accesible por cualquiera.
JV Martins — Lead Data Engineer @ Medtronic | Founder @ DadosNow Este artículo fue escrito por mí, humano. No por la IA. Irónico, ¿no?