Cómo monté mi portfolio con Next.js y Tailwind CSS

Siempre quise tener un portfolio propio, pero entre el trabajo y los side projects nunca encontraba el momento. Este fin de semana me senté y lo saqué. Aquí va un repaso rápido de las decisiones que tomé y por qué.

El stack

Quería algo rápido de montar pero que quedase profesional. Al final me decidí por:

• Next.js 16 con App Router — SSR, optimización de imágenes y rutas basadas en archivos
• Tailwind CSS 4 — la nueva versión con @theme y configuración en CSS
• shadcn/ui — componentes accesibles y bien diseñados que puedes copiar y modificar
• Vercel — despliegue en un click con preview deployments

Estructura del proyecto

El portfolio es una single-page con secciones, así que la estructura es bastante directa:

app/
  layout.tsx
  page.tsx
  blog/
    page.tsx
    [slug]/page.tsx
components/
  sections/
    hero.tsx
    about.tsx
    experience.tsx
    skills.tsx
    education.tsx
    contact.tsx
content/
  blog/
    mi-primer-post.mdx

Cada sección es un componente independiente que se importa en page.tsx. Fácil de mantener y de reordenar.

Animaciones con CSS puro

No quise meter Framer Motion ni ninguna librería pesada. Todas las animaciones son CSS:

.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

Con un IntersectionObserver en un componente wrapper, cada sección aparece suavemente cuando entras en su viewport. Rendimiento perfecto, cero dependencias extra.

El blog con MDX

Para el blog elegí archivos .mdx con gray-matter para el frontmatter y next-mdx-remote para renderizar. Para publicar un nuevo post solo tengo que:

1. Crear un archivo .mdx en content/blog/
2. Escribir el frontmatter con título, descripción y tags
3. Escribir el contenido en Markdown
4. Hacer deploy

Sin base de datos, sin CMS, sin complicaciones. Git es mi CMS.

SEO

Le dediqué tiempo al SEO porque de nada sirve un portfolio que nadie encuentra:

• Open Graph y Twitter Cards para que se vea bien al compartir
• JSON-LD con schema Person para que Google entienda quién soy
• Sitemap XML generado dinámicamente
• robots.txt permitiendo todos los crawlers
• Canonical URLs para evitar contenido duplicado

Lo que aprendí

Montar un portfolio desde cero te obliga a tomar decisiones de diseño que normalmente delegas. Desde la paleta de colores hasta la microinteracción del hover en un botón, cada detalle cuenta cuando el producto eres tú.

El código está disponible en mi GitHub por si te sirve de inspiración.