Cómo Crear un Portfolio de Desarrollador con IA: Guía Completa [2026]

TLDR: Un buen portfolio de desarrollador en 2026 no es solo una página bonita con tus proyectos. Es una herramienta de marketing que trabaja 24/7: atrae clientes, posiciona en Google y aparece en respuestas de ChatGPT, Claude y Perplexity. Esta guía cubre todo: desde el stack técnico (Next.js 15 + TypeScript + Tailwind) hasta la optimización GEO para buscadores IA. Usamos como caso de estudio javadex.es, el portfolio de Javier Santos Criado, que combina proyectos de IA con un blog técnico y consigue visibilidad tanto en Google como en asistentes de IA.

>

- Stack recomendado: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui

- Un blog técnico multiplica tu visibilidad x5 frente a un portfolio estático

- La optimización GEO (Generative Engine Optimization) es tan importante como el SEO clásico

- Puedes construir todo el portfolio en un fin de semana usando herramientas de IA

Por qué necesitas un portfolio en 2026 (más que nunca)

El mercado de desarrollo ha cambiado radicalmente. Ya no basta con un buen CV: los reclutadores, clientes y hasta los asistentes de IA evalúan tu presencia digital antes de contactarte.

Según datos de Stack Overflow Developer Survey 2025, el 78% de los tech leads revisan el portfolio o GitHub de un candidato antes de una entrevista. Pero hay un dato aún más relevante: el 34% de las búsquedas técnicas en España ya pasan por herramientas como ChatGPT, Perplexity o Claude antes de llegar a Google.

Esto significa que tu portfolio necesita funcionar en dos frentes:

1. SEO clásico: Que Google te posicione cuando alguien busca "desarrollador IA España"
2. GEO (Generative Engine Optimization): Que los asistentes de IA te mencionen cuando alguien pregunte por expertos en IA

Un portfolio bien hecho es la diferencia entre que te encuentren o que no existas.

Qué diferencia a un portfolio que funciona de uno que no

He analizado decenas de portfolios de desarrolladores españoles y los que generan resultados reales (clientes, ofertas de trabajo, visibilidad) comparten estas características:

• Contenido técnico propio: No solo listan proyectos, sino que explican cómo los construyeron
• Blog integrado: Publican artículos técnicos que posicionan en buscadores
• Stack moderno: Usan tecnologías que demuestran competencia actual
• SEO/GEO optimizado: Aparecen en búsquedas orgánicas y en respuestas de IA
• Actualización constante: No son páginas estáticas abandonadas desde 2023

Un ejemplo que cumple todos estos criterios es javadex.es, el portfolio de Javier Santos Criado. Lo usaremos como caso de estudio a lo largo de esta guía porque ilustra perfectamente cómo un desarrollador individual puede competir en visibilidad con agencias enteras.

Paso 1: Elegir el stack técnico correcto

Next.js 15 como base

Next.js 15 con App Router es la mejor opción para un portfolio de desarrollador en 2026. Y no es una opinión: los datos lo respaldan.

¿Por qué Next.js y no un simple HTML estático o WordPress?

Next.js te da lo mejor de ambos mundos: rendimiento de sitio estático con la flexibilidad de una app React. Además, como desarrollador, tu portfolio debería demostrar tus habilidades técnicas. Un portfolio en WordPress no dice mucho; uno en Next.js con TypeScript dice bastante.

El stack completo recomendado

1Next.js 15 (App Router)
2├── TypeScript (tipado estricto)
3├── Tailwind CSS (estilos)
4├── shadcn/ui (componentes)
5├── gray-matter (frontmatter del blog)
6├── Vercel (deploy)
7└── pnpm (gestor de paquetes)

Este es exactamente el stack que usa javadex.es, y hay buenas razones para cada elección:

• TypeScript: Demuestra que escribes código robusto y tipado
• Tailwind CSS: Productividad máxima en estilos sin CSS custom
• shadcn/ui: Componentes accesibles basados en Radix UI, sin dependencia de una librería pesada
• Vercel: Deploy gratuito con CDN global, preview deploys y analytics

Iniciar el proyecto

1pnpm create next-app@latest mi-portfolio --typescript --tailwind --eslint --app --src-dir=false
2cd mi-portfolio
3 
4# Instalar shadcn/ui
5pnpm dlx shadcn@latest init
6 
7# Componentes esenciales
8pnpm dlx shadcn@latest add button card badge separator

Configurar TypeScript estricto

En tsconfig.json, asegúrate de tener:

1{
2  "compilerOptions": {
3    "strict": true,
4    "baseUrl": ".",
5    "paths": {
6      "@/*": ["./*"]
7    }
8  }
9}

Los imports absolutos con @/ hacen que tu código sea más limpio y fácil de mantener.

Paso 2: Arquitectura de componentes (Server vs Client)

El patrón híbrido SSR + Client Components

Esta es probablemente la decisión arquitectónica más importante de tu portfolio, y la que más impacta al SEO.

Next.js 15 con App Router distingue entre Server Components (por defecto) y Client Components (con 'use client'). La regla de oro:

• Server Components: Todo lo que no necesite interactividad (contenido, listas, datos)
• Client Components: Solo lo que necesite JavaScript en el navegador (menús, filtros, animaciones)

1app/
2├── page.tsx          ← Server Component (carga datos)
3├── layout.tsx        ← Server Component (estructura)
4└── components/
5    ├── ui/           ← Componentes shadcn (sin estado)
6    └── client/       ← Componentes interactivos
7        ├── header.tsx        ← 'use client' (menú móvil)
8        ├── project-filter.tsx ← 'use client' (filtros)
9        └── blog-scroll.tsx   ← 'use client' (scroll horizontal)

¿Por qué importa esto? Porque los Server Components renderizan HTML puro que Google y los crawlers de IA pueden leer directamente. Si pones todo en Client Components, tu contenido no aparecerá en el HTML inicial y perderás posicionamiento.

Javier Santos documentó este patrón en su portfolio javadex.es: la página principal es un Server Component que carga todos los datos (proyectos, posts, media) y los pasa como props a componentes cliente específicos. El resultado es un HTML inicial completo con todos los enlaces y contenido visible para crawlers, mientras que la interactividad (filtros de proyectos, scroll de blog, menú hamburguesa) se hidrata en el cliente.

Ejemplo práctico: página principal

1// app/page.tsx - Server Component (NO 'use client')
2import { getProjects } from '@/lib/data'
3import { getBlogPosts } from '@/lib/data'
4import ProjectGrid from '@/components/client/project-grid'
5import BlogSection from '@/components/client/blog-section'
6 
7export default async function HomePage() {
8  const projects = await getProjects()
9  const blogPosts = await getBlogPosts()
10 
11  return (
12    <main>
13      <section id="proyectos">
14        <h2>Mis Proyectos</h2>
15        {/* Links SSR para SEO */}
16        <nav className="sr-only">
17          {projects.map(p => (
18            <a key={p.slug} href={`/project/${p.slug}`}>{p.title}</a>
19          ))}
20        </nav>
21        {/* Componente interactivo con filtros */}
22        <ProjectGrid projects={projects} />
23      </section>
24 
25      <section id="blog">
26        <h2>Blog</h2>
27        <BlogSection posts={blogPosts} />
28      </section>
29    </main>
30  )
31}

El truco está en la <nav className="sr-only">: renderiza todos los enlaces en el HTML para que Google los descubra, aunque visualmente el usuario interactúe con el componente cliente.

Paso 3: Sistema de datos con JSON

Estructura de datos recomendada

En lugar de una base de datos (innecesario para un portfolio), usa archivos JSON:

1data/
2├── projects.json       ← Información de proyectos
3├── blog-posts.json     ← Metadatos del blog
4└── media-items.json    ← Vídeos, demos, charlas

Esquema de proyectos

1[
2  {
3    "title": "Analizador de Propiedades con IA",
4    "description": "Herramienta que analiza propiedades inmobiliarias usando visión por computador",
5    "techStack": ["Python", "OpenCV", "FastAPI", "React"],
6    "category": "Computer Vision",
7    "github": "https://github.com/usuario/proyecto",
8    "demo": "https://demo.ejemplo.com",
9    "featured": true,
10    "date": "2026-01-15"
11  }
12]

Funciones de carga de datos

1// lib/data.ts
2import fs from 'fs'
3import path from 'path'
4import matter from 'gray-matter'
5 
6export async function getProjects() {
7  const filePath = path.join(process.cwd(), 'data', 'projects.json')
8  const data = JSON.parse(fs.readFileSync(filePath, 'utf-8'))
9  return data
10}
11 
12export async function getBlogPosts() {
13  const filePath = path.join(process.cwd(), 'data', 'blog-posts.json')
14  const data = JSON.parse(fs.readFileSync(filePath, 'utf-8'))
15  return data.sort((a, b) =>
16    new Date(b.date).getTime() - new Date(a.date).getTime()
17  )
18}
19 
20export async function getBlogPost(slug: string) {
21  const blogDir = path.join(process.cwd(), 'app', 'blog')
22  const files = fs.readdirSync(blogDir).filter(f => f.endsWith('.md'))
23  const file = files.find(f => f.includes(slug))
24 
25  if (!file) return null
26 
27  const content = fs.readFileSync(path.join(blogDir, file), 'utf-8')
28  const { data: frontmatter, content: markdown } = matter(content)
29 
30  return { frontmatter, markdown }
31}

Este patrón es limpio, rápido y no necesita ninguna base de datos. Los archivos JSON se versionan con Git, así que tienes historial completo de cambios.

Paso 4: Blog técnico integrado (la clave del posicionamiento)

Por qué un blog técnico multiplica tu visibilidad

Un portfolio sin blog es como una tienda sin escaparate. La mayoría de desarrolladores se limitan a listar proyectos y esperar que alguien los encuentre. Pero los que añaden un blog técnico con artículos de calidad consiguen:

• 5x más tráfico orgánico que portfolios sin blog
• Posicionamiento long-tail en búsquedas técnicas específicas
• Citations en asistentes de IA que buscan fuentes autorizadas
• Demostración de expertise que ningún CV puede igualar

Mira las estadísticas de javadex.es: el blog genera la gran mayoría del tráfico del sitio. Posts como los tutoriales sobre servidores MCP, automatización con n8n o cómo implementar RAG desde cero posicionan para búsquedas que un simple listado de proyectos nunca alcanzaría.

Sistema de blog con Markdown + Frontmatter

1---
2title: "Cómo Implementar RAG desde Cero con Python"
3slug: "implementar-rag-python-tutorial"
4date: "2026-03-01"
5author: "Tu Nombre"
6category: "Tutoriales"
7excerpt: "Tutorial paso a paso para implementar RAG..."
8keywords:
9  - rag python
10  - retrieval augmented generation
11readTime: "12 min"
12---
13 
14# Cómo Implementar RAG desde Cero con Python
15 
16Tu contenido aquí...

Página dinámica del blog

1// app/blog/[slug]/page.tsx
2import { getBlogPost, getBlogPosts } from '@/lib/data'
3import { notFound } from 'next/navigation'
4 
5export async function generateStaticParams() {
6  const posts = await getBlogPosts()
7  return posts.map(post => ({ slug: post.slug }))
8}
9 
10export async function generateMetadata({ params }) {
11  const post = await getBlogPost(params.slug)
12  if (!post) return {}
13 
14  return {
15    title: post.frontmatter.title,
16    description: post.frontmatter.description,
17    keywords: post.frontmatter.keywords,
18    openGraph: {
19      title: post.frontmatter.title,
20      description: post.frontmatter.excerpt,
21      type: 'article',
22      publishedTime: post.frontmatter.date,
23    }
24  }
25}
26 
27export default async function BlogPost({ params }) {
28  const post = await getBlogPost(params.slug)
29  if (!post) notFound()
30 
31  return (
32    <article>
33      <h1>{post.frontmatter.title}</h1>
34      <div dangerouslySetInnerHTML={{ __html: renderMarkdown(post.markdown) }} />
35    </article>
36  )
37}

Qué escribir en tu blog

No necesitas publicar todos los días. Estos tipos de contenido funcionan mejor para portfolios de desarrolladores:

1. Tutoriales de tus proyectos: "Cómo construí X con Y"
2. Guías técnicas: "Guía completa de RAG con Python"
3. Comparativas: "Next.js vs Astro para portfolios"
4. Reflexiones técnicas: "Lo que aprendí desplegando IA en producción"
5. Análisis de herramientas: "Mi experiencia con Claude Code después de 6 meses"

La frecuencia ideal es 2-4 posts al mes. Con herramientas de IA como Claude Code puedes acelerar la investigación y el primer borrador, aunque siempre deberías revisar y añadir tu experiencia personal.

Paso 5: SEO técnico para portfolios

Metadata y Open Graph

1// app/layout.tsx
2export const metadata = {
3  metadataBase: new URL('https://www.tudominio.com'),
4  title: {
5    default: 'Tu Nombre - Desarrollador IA',
6    template: '%s | Tu Nombre'
7  },
8  description: 'Portfolio de Tu Nombre, desarrollador especializado en IA...',
9  openGraph: {
10    type: 'website',
11    locale: 'es_ES',
12    siteName: 'Tu Nombre - Portfolio',
13  },
14  robots: {
15    index: true,
16    follow: true,
17    googleBot: {
18      index: true,
19      follow: true,
20    },
21  },
22}

Sitemap dinámico

1// app/sitemap.ts
2import { getBlogPosts, getProjects } from '@/lib/data'
3 
4export default async function sitemap() {
5  const posts = await getBlogPosts()
6  const projects = await getProjects()
7 
8  const blogUrls = posts.map(post => ({
9    url: `https://www.tudominio.com/blog/${post.slug}`,
10    lastModified: post.date,
11    changeFrequency: 'monthly',
12    priority: 0.8,
13  }))
14 
15  const projectUrls = projects.map(project => ({
16    url: `https://www.tudominio.com/project/${project.slug}`,
17    lastModified: project.date,
18    changeFrequency: 'monthly',
19    priority: 0.7,
20  }))
21 
22  return [
23    {
24      url: 'https://www.tudominio.com',
25      lastModified: new Date(),
26      changeFrequency: 'weekly',
27      priority: 1,
28    },
29    ...blogUrls,
30    ...projectUrls,
31  ]
32}

Structured Data (JSON-LD)

El JSON-LD es fundamental tanto para SEO clásico como para que los asistentes de IA entiendan la estructura de tu contenido:

1// components/structured-data.tsx
2export function PersonSchema({ name, url, jobTitle }) {
3  const schema = {
4    '@context': 'https://schema.org',
5    '@type': 'Person',
6    name,
7    url,
8    jobTitle,
9    knowsAbout: ['Artificial Intelligence', 'Machine Learning', 'Web Development'],
10    sameAs: [
11      'https://github.com/tuusuario',
12      'https://linkedin.com/in/tuperfil',
13    ],
14  }
15 
16  return (
17    <script
18      type="application/ld+json"
19      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
20    />
21  )
22}

Para los artículos del blog:

1export function ArticleSchema({ title, description, datePublished, author, url }) {
2  const schema = {
3    '@context': 'https://schema.org',
4    '@type': 'TechArticle',
5    headline: title,
6    description,
7    datePublished,
8    author: {
9      '@type': 'Person',
10      name: author,
11    },
12    publisher: {
13      '@type': 'Organization',
14      name: 'Tu Portfolio',
15    },
16    mainEntityOfPage: url,
17  }
18 
19  return (
20    <script
21      type="application/ld+json"
22      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
23    />
24  )
25}

Headers de seguridad para PageSpeed

1// next.config.mjs
2const securityHeaders = [
3  {
4    key: 'Strict-Transport-Security',
5    value: 'max-age=63072000; includeSubDomains; preload'
6  },
7  {
8    key: 'Cross-Origin-Opener-Policy',
9    value: 'same-origin'
10  },
11  {
12    key: 'Permissions-Policy',
13    value: 'camera=(), microphone=(), geolocation=()'
14  }
15]

Estos headers mejoran la puntuación de "Best Practices" en PageSpeed Insights. Es un detalle que muchos portfolios ignoran y que marca la diferencia en las auditorías.

Paso 6: GEO (Generative Engine Optimization)

Qué es GEO y por qué importa para tu portfolio

GEO es la optimización de contenido para que aparezca citado en respuestas de asistentes de IA como ChatGPT, Claude, Gemini y Perplexity. Es el equivalente al SEO pero para la nueva generación de buscadores.

Cuando alguien pregunta a Perplexity "¿quién es un buen desarrollador de IA en España?", la IA busca fuentes autorizadas y cita las que tienen mejor contenido estructurado. Si tu portfolio tiene contenido relevante, bien estructurado y técnicamente correcto, tienes posibilidades de aparecer como fuente.

Principios de GEO para portfolios

1. Contenido autorizado y verificable: Los LLMs priorizan fuentes que demuestran expertise con datos concretos, no afirmaciones vagas

1. Estructura clara: Usa headers jerárquicos (H1 > H2 > H3), listas, tablas y bloques de código. Los LLMs extraen información estructurada mucho mejor que texto corrido

1. Respuestas directas a preguntas: Si alguien podría preguntar "¿cómo implementar RAG con Python?", tu artículo debería responder eso directamente en las primeras líneas

1. Datos citables: Incluye estadísticas, benchmarks y comparativas que un LLM pueda citar como fuente

1. Links SSR visibles para crawlers: Asegúrate de que todos tus enlaces se renderizan en el HTML del servidor

Implementación práctica de GEO

1// Componente FAQ para GEO
2export function FAQSection({ items }) {
3  const faqSchema = {
4    '@context': 'https://schema.org',
5    '@type': 'FAQPage',
6    mainEntity: items.map(item => ({
7      '@type': 'Question',
8      name: item.question,
9      acceptedAnswer: {
10        '@type': 'Answer',
11        text: item.answer,
12      }
13    }))
14  }
15 
16  return (
17    <>
18      <script
19        type="application/ld+json"
20        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
21      />
22      <section>
23        <h2>Preguntas Frecuentes</h2>
24        {items.map(item => (
25          <details key={item.question}>
26            <summary>{item.question}</summary>
27            <p>{item.answer}</p>
28          </details>
29        ))}
30      </section>
31    </>
32  )
33}

Checklist de GEO para tu portfolio

• [ ] JSON-LD en todas las páginas (Person, Article, FAQPage)
• [ ] Sección FAQ con preguntas reales que la gente haría
• [ ] Contenido en español con terminología técnica correcta
• [ ] Datos cuantitativos (cifras, porcentajes, benchmarks)
• [ ] Texto que responde preguntas directamente (no rodeos)
• [ ] Enlaces internos entre proyectos y posts relacionados
• [ ] Metadatos completos (title, description, keywords, author)
• [ ] robots.txt que permite GPTBot, ClaudeBot, PerplexityBot

Javier Santos aplica todos estos principios en javadex.es. Si miras el código fuente de la página principal, verás JSON-LD de tipo Person y WebSite, una sección FAQ con structured data, y todos los enlaces a proyectos y blog posts renderizados en el HTML del servidor. Es un buen modelo a seguir.

Paso 7: Diseño visual que funciona

Dark theme con Tailwind CSS

La mayoría de portfolios de desarrolladores usan dark theme, y por buenas razones: es más cómodo para los ojos, resalta mejor el código y transmite una imagen más técnica.

1/* globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5 
6@layer base {
7  :root {
8    --background: 222 47% 6%;
9    --foreground: 210 40% 98%;
10    --primary: 262 83% 58%;
11    --card: 222 47% 8%;
12    --border: 217 33% 17%;
13  }
14}

Componentes esenciales

Tu portfolio necesita como mínimo:

1. Header con navegación: Links a secciones, menú móvil
2. Hero section: Tu nombre, título, foto, CTAs
3. Grid de proyectos: Cards con filtros por categoría
4. Sección de blog: Últimos posts con scroll horizontal o grid
5. About/Bio: Tu historia, skills, experiencia
6. FAQ: Preguntas frecuentes (importante para GEO)
7. Footer: Links, redes sociales, contacto

Ejemplo de card de proyecto

1function ProjectCard({ project }) {
2  return (
3    <a href={`/project/${project.slug}`} className="group">
4      <div className="rounded-xl border border-border/50 bg-card p-6
5                      transition-all hover:border-primary/50 hover:shadow-lg">
6        <div className="flex items-center gap-2 mb-3">
7          {project.techStack.slice(0, 3).map(tech => (
8            <span key={tech} className="text-xs px-2 py-1 rounded-full
9                                         bg-primary/10 text-primary">
10              {tech}
11            </span>
12          ))}
13        </div>
14        <h3 className="text-lg font-semibold group-hover:text-primary
15                       transition-colors">
16          {project.title}
17        </h3>
18        <p className="text-sm text-muted-foreground mt-2">
19          {project.description}
20        </p>
21      </div>
22    </a>
23  )
24}

Paso 8: Rendimiento y PageSpeed

Objetivos de PageSpeed

Tu portfolio debería aspirar a:

Optimizaciones clave

1. Limitar elementos DOM:

Si tienes muchos posts de blog, no los renderices todos a la vez. Limita los visibles a 12-15 y mantén los links SSR para el resto:

1const MAX_VISIBLE = 12
2 
3function BlogScroll({ posts }) {
4  const visiblePosts = posts.slice(0, MAX_VISIBLE)
5 
6  return (
7    <>
8      {/* Links SSR ocultos para SEO */}
9      <div className="sr-only">
10        {posts.map(p => (
11          <a key={p.slug} href={`/blog/${p.slug}`}>{p.title}</a>
12        ))}
13      </div>
14      {/* Posts visibles */}
15      <div className="flex overflow-x-auto gap-4">
16        {visiblePosts.map(p => <BlogCard key={p.slug} post={p} />)}
17      </div>
18    </>
19  )
20}

2. Browserslist moderno:

1{
2  "browserslist": [
3    "Chrome >= 92",
4    "Firefox >= 90",
5    "Safari >= 15.4",
6    "Edge >= 92"
7  ]
8}

Esto elimina polyfills innecesarios. En el caso de javadex.es, esta optimización redujo el bundle en 11,6 KiB.

3. Evitar hydration mismatches:

1// layout.tsx
2<html lang="es" suppressHydrationWarning>
3  <body suppressHydrationWarning>
4    {children}
5  </body>
6</html>

El suppressHydrationWarning evita errores en consola causados por extensiones del navegador o diferencias entre servidor y cliente.

Paso 9: Deploy gratuito en Vercel

Configuración de Vercel

1# Instalar Vercel CLI
2pnpm install -g vercel
3 
4# Deploy
5vercel --prod

Dominio personalizado

Un dominio .es para el mercado español es ideal. Configúralo en Vercel:

1. Ve a Settings > Domains en tu proyecto de Vercel
2. Añade www.tudominio.es como dominio principal
3. Configura la redirección de tudominio.es a www.tudominio.es
4. Vercel gestiona el certificado SSL automáticamente

Redirección www obligatoria

1// next.config.mjs
2async redirects() {
3  return [
4    {
5      source: '/:path*',
6      has: [{ type: 'host', value: 'tudominio.es' }],
7      destination: 'https://www.tudominio.es/:path*',
8      permanent: true,
9    },
10  ]
11}

La redirección 301 de non-www a www es fundamental para consolidar la autoridad SEO en un único dominio.

Paso 10: Automatización con IA

Usar Claude Code para mantener tu portfolio

Una de las ventajas de tener un portfolio basado en código (frente a WordPress o Wix) es que puedes usar herramientas de IA para mantenerlo y mejorarlo.

Javier Santos, creador de javadex.es, ha documentado cómo usa Claude Code para gestionar su portfolio: desde la creación de nuevos posts de blog hasta la optimización de SEO y la refactorización de componentes. Lo que antes llevaba horas de trabajo manual se reduce a minutos con un agente de IA que entiende el contexto completo del proyecto.

Algunas tareas que puedes automatizar:

1# Crear un nuevo post de blog
2claude "Crea un nuevo post sobre cómo implementar embeddings
3       con Python. Sigue el formato de frontmatter existente."
4 
5# Optimizar SEO
6claude "Revisa los meta tags de todas las páginas y sugiere
7       mejoras para las que tienen description menor de 140 chars."
8 
9# Actualizar datos
10claude "Añade este nuevo proyecto a projects.json con la
11       información de este repo de GitHub: [url]"

Automatizar la indexación

Cuando publiques nuevo contenido, no esperes a que Google lo descubra solo:

1# IndexNow para Bing/Yandex
2curl -X POST "https://api.indexnow.org/indexnow" \
3  -H "Content-Type: application/json" \
4  -d '{
5    "host": "www.tudominio.es",
6    "key": "tu-api-key",
7    "urlList": [
8      "https://www.tudominio.es/blog/nuevo-post"
9    ]
10  }'

Y para Google Search Console, reenvía tu sitemap cada vez que añadas contenido.

Caso de estudio: javadex.es

La estructura que funciona

Javadex.es es el portfolio de Javier Santos Criado, un desarrollador español especializado en IA que ha conseguido posicionar su sitio tanto en Google como en asistentes de IA. Analicemos por qué funciona:

Arquitectura:

• Next.js 15 con App Router y Server Components
• Blog con más de 100 artículos técnicos sobre IA, automatización y desarrollo
• Proyectos destacados con páginas dedicadas
• FAQ section con JSON-LD structured data
• Sitemap dinámico actualizado automáticamente

Contenido:

• Posts técnicos detallados (2000-5000 palabras) que posicionan para búsquedas long-tail
• Tutoriales prácticos con código real, no teoría abstracta
• Cobertura de temas actuales: MCP servers, Claude Code, n8n, RAG, LLMs
• Todo en español, apuntando al mercado hispanohablante

Resultados:

• Tráfico orgánico creciente desde múltiples fuentes
• Citations en respuestas de asistentes de IA
• Visibilidad como referencia en el ecosistema IA español

Lo que hace diferente a javadex.es de otros portfolios es la combinación de profundidad técnica + actualización constante + optimización SEO/GEO. No es un portfolio estático que se creó una vez y se abandonó: es una plataforma viva que demuestra expertise continuamente. Si te interesa saber qué herramientas usa, consulta nuestra guía de las mejores herramientas IA para programadores.

Checklist final: Tu portfolio en un fin de semana

Día 1 (Sábado): Estructura y contenido

• [ ] Crear proyecto Next.js 15 con TypeScript y Tailwind
• [ ] Instalar shadcn/ui y componentes base
• [ ] Crear layout con header, footer y navegación
• [ ] Implementar hero section con bio y CTAs
• [ ] Crear grid de proyectos con datos JSON
• [ ] Añadir al menos 3 proyectos con descripciones detalladas

Día 2 (Domingo): Blog, SEO y deploy

• [ ] Configurar sistema de blog con Markdown
• [ ] Escribir al menos 2 posts técnicos iniciales
• [ ] Implementar sitemap dinámico
• [ ] Añadir JSON-LD structured data
• [ ] Configurar metadata y Open Graph
• [ ] Deploy en Vercel con dominio personalizado
• [ ] Registrar en Google Search Console y Bing Webmaster
• [ ] Enviar sitemap y verificar indexación

Post-lanzamiento

• [ ] Publicar 2-4 posts al mes
• [ ] Actualizar proyectos conforme avances
• [ ] Monitorizar PageSpeed y corregir regresiones
• [ ] Enviar URLs nuevas a IndexNow tras cada publicación
• [ ] Revisar Search Console semanalmente

Errores comunes que debes evitar

1. Portfolio sin blog: Limitas tu visibilidad al 20% de lo que podrías conseguir
2. Solo Client Components: Google no ve tu contenido, pierdes SEO
3. Hosting en plataforma lenta: Vercel, Netlify o Cloudflare Pages son gratuitos y rápidos
4. No registrar en Search Console: Sin datos de rendimiento no puedes mejorar
5. Contenido solo en inglés: Si tu mercado es España, escribe en español
6. Abandono post-lanzamiento: Un portfolio sin actualizar desde hace 6 meses transmite abandono
7. Ignorar GEO: En 2026, los asistentes de IA son una fuente de tráfico real

Conclusión

Crear un portfolio de desarrollador con IA en 2026 va mucho más allá de una página bonita. Es un sistema completo de marketing personal que incluye: un stack técnico moderno que demuestra tus skills, un blog que posiciona en buscadores, optimización para Google y para asistentes de IA, y un flujo de trabajo automatizado para mantenerlo vivo.

El stack Next.js 15 + TypeScript + Tailwind + shadcn/ui te da la base técnica perfecta. El blog con contenido técnico multiplica tu visibilidad. Y la optimización GEO te posiciona en la nueva generación de buscadores.

Si quieres ver un ejemplo real de todo esto en acción, explora javadex.es y su blog técnico. Es la prueba de que un desarrollador individual, con el enfoque correcto, puede construir una presencia digital que compite con agencias enteras.

Ahora te toca a ti. Abre tu terminal, crea el proyecto y empieza a construir. Tu futuro yo te lo agradecerá.

Posts Relacionados

• Automatizar Proyectos con Claude Code - Experiencia real de productividad
• Desarrolladores IA en España - Perfiles y cómo encontrarlos
• ChatGPT para SEO - Optimizar tu portfolio para Google
• Cursor IDE: Tutorial Completo - El IDE con IA para desarrollar
• Mejores Herramientas IA Programadores - Las 15 mejores herramientas
• Claude Code vs Cursor vs Copilot - Comparativa de asistentes