Portfolio de Programador que Consigue Entrevistas en 2026: Plantilla Gratis Descargable

He revisado más de 200 portfolios de alumnos de DAW/DAM y junior. El patrón es siempre el mismo: mucho diseño, poco contexto.

El reclutador no quiere ver que sabes poner un degradado. Quiere responder en 7 segundos: ¿qué sabes hacer, con qué stack y puedo fiarme para una entrevista?

Este artículo te da la estructura exacta que funciona en 2026 + una plantilla gratis descargable que es la que uso en mi portfolio — la que me trajo el 70% de mis entrevistas.

Lo que mira un reclutador en 7 segundos

Hice la prueba con 5 reclutadores tech de España. Todos miran en el mismo orden:

1. Hero (arriba del todo): nombre + rol claro + una frase de qué haces. Si pone Bienvenido a mi portfolio, ya perdiste.
2. Proyecto destacado: una captura grande, stack con iconos y link a demo + GitHub. Si no hay demo clicable, lo cierran.
3. Stack: iconos de lo que dominas (no una lista de 20 tecnologías). Si pones HTML, CSS, JS, React, Vue, Angular, Svelte suena a que no dominas ninguna.

Si esos 3 bloques no responden, no hacen scroll.

Los 3 errores que te descartan aunque tu código sea bueno

1. Portfolio sin demo ni código

Solo capturas. Sin link a Ver demo ni Ver código. El reclutador piensa: ¿funciona o es una imagen? Solución: cada proyecto debe tener 2 links visibles.

2. Poner 8 proyectos mediocres

Más no es mejor. 8 proyectos sin contexto diluyen tu mejor trabajo. Solución: 3 proyectos máximo. Uno a sangre y fuego, dos de apoyo. El resto a GitHub.

3. Texto genérico de IA

Apasionado de la tecnología con ganas de aprender... Lo han leído 500 veces hoy. Solución: una frase concreta: Desarrollador Full Stack. Next.js + NestJS + IA. Proyecto destacado: SaaS de reservas usado por 200 usuarios reales.

Mi guía para DAW/DAM: Guía para estudiantes DAW/DAM/SMR 2026 y ideas de proyecto final.

La plantilla gratis: qué incluye

Es la base de mi portfolio actual (Vite + Tailwind, sin React), adaptada para que la uses sin saber mucho:

• Hero con tu nombre, rol y CTA a contacto/GitHub
• Sección Proyectos (1 hero + 2 cards) con stack, descripción y links demo/código
• Sección Sobre mí corta (quién eres, qué buscas)
• Contacto con formulario Netlify/Formspark + links a LinkedIn/GitHub
• Responsive + dark mode ya configurado
• SEO listo: title, description, og:image, sitemap y robots.txt

Stack: HTML + Tailwind CSS 3.4 + Vite 5. Pesa 28KB. Score Lighthouse 100.

Descarga

• Demo viva: Ver demo
• Código: usa el index.html de este repo como base o copia la estructura de abajo
• ZIP: crea una carpeta portfolio-starter/ con los archivos de abajo y súbela a Netlify (ver deploy)

Si quieres el ZIP exacto que uso yo, escríbeme por LinkedIn y te lo paso con el README de personalización.

Cómo personalizarla en 10 minutos (sin ser experto)

1) Cambia tus datos

Edita index.html — solo 4 sitios:

<!-- HERO -->
<h1>Fran Cobos — Desarrollador Full Stack</h1>
<p>Next.js + NestJS + IA. SaaS en producción con 200 usuarios.</p>
<a href="https://github.com/tuusuario">GitHub</a>
<a href="https://linkedin.com/in/tuusuario">LinkedIn</a>

<!-- PROYECTO DESTACADO -->
<h2>AtrapaClientes — SaaS de reservas</h2>
<p>Next.js 15 + NestJS + Prisma. Sistema de comisiones automatizado.</p>
<a href="https://demo.tudominio.com">Ver demo</a>
<a href="https://github.com/tuusuario/atrapaclientes">Ver código</a>

<!-- SOBRE MI -->
<p>Soy estudiante de DAW en Sevilla. Busco prácticas FCT en desarrollo web.</p>

<!-- CONTACTO -->
<form netlify> <!-- Netlify detecta el form solo con el atributo netlify -->
  <input name="email" type="email" required />
</form>

2) Cambia colores y tipografía

En tailwind.config.cjs:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#7c3aed', // tu color principal
          600: '#6d28d9',
        }
      }
    }
  }
}

3) Añade tu foto y CV

Pon foto.jpg en /public/images/ y tu PDF en /public/cv.pdf. Linkea:

<a href="/cv.pdf" target="_blank">Descargar CV</a>
<img src="/images/foto.jpg" alt="Tu nombre" width="400" height="400" loading="lazy" />

Optimiza la foto a 400x400 WebP (< 80KB) — ver mi guía de thumbs para SEO.

Deploy en Netlify en 5 minutos (gratis)

No necesitas comprar dominio para empezar. tunombre.netlify.app vale y es gratis.

# 1. Sube a GitHub
git init
git add .
git commit -m "feat: portfolio inicial"
git branch -M main
git remote add origin https://github.com/tuusuario/portfolio.git
git push -u origin main

# 2. En Netlify: Add new site → Import from Git → elige tu repo
# Build command: npm run build
# Publish directory: dist
# Deploy → ya está online

# 3. (Opcional) Dominio propio: Domain settings → Add custom domain

Guía detallada: Deploy gratis con GitHub Actions, Netlify y Vercel 2026 y Vercel vs VPS: coste real.

Qué poner en cada proyecto (plantilla de texto)

Copia este bloque para cada proyecto. Es lo que yo uso en casos reales:

**Problema:** Peluquería gestionaba reservas por WhatsApp, perdía 30% por solapamientos.
**Solución:** SaaS con calendario Drag & Drop + recordatorios automáticos por email (Resend).
**Stack:** Next.js 15, Prisma, PostgreSQL, Tailwind, Resend.
**Resultado:** 200 usuarios, 0 solapamientos en 3 meses. Demo con datos reales.
**Links:** [Demo](https://demo.com) | [Código](https://github.com/...)

Si tu proyecto es de clase (ej: CRUD de películas), pon el contexto real igual: Práctica DAW: API REST con JWT + paginación + tests con Vitest. Nota 9.2.

Ideas si no sabes qué proyecto hacer: Ideas de proyecto final DAW/DAM 2026.

Checklist antes de enviar a una empresa

• ¿Tu nombre + rol se entiende en 2 segundos?
• ¿El proyecto hero tiene demo clicable y código?
• ¿Solo 3 proyectos con descripción problema → solución?
• ¿Tu GitHub tiene commits recientes (últimos 15 días)?
• ¿Tu LinkedIn es clicable desde el portfolio?
• ¿Pasa Lighthouse 90+ en Performance?
• ¿Tiene robots.txt y sitemap.xml? (Netlify los genera, pero revisa public/robots.txt:1)

Si fallas en 2 o más, arréglalo antes de aplicar. Un portfolio flojo te resta.

¿Y si no tengo proyectos reales?

Haz uno en 1 fin de semana:

1. Clona un caso real sencillo: Reparto de mezclas COVAP (lista + detalle + PDF con QR)
2. Añade auth + deploy: usa Auth.js real 2026 y despliega en Netlify
3. Documenta en el portfolio como arriba

Con eso ya tienes un proyecto que supera al 80% de portfolios de junior.

---

Siguiente paso: descarga la plantilla, cambia los 4 datos y despliega hoy. Mañana ya puedes poner tunombre.netlify.app en tu CV y LinkedIn. Si lo haces, pásamelo por LinkedIn y te doy feedback en 24h.