Portfolio Personal
Portfolio moderno con Next.js 15, TypeScript y SEO completo
Portfolio moderno con diseño fluorescente neón, construido con Next.js 15 App Router + TypeScript. Incluye blog con Markdown (react-markdown + remark-gfm), formulario de contacto serverless (Resend), 135 tests con Vitest + Testing Library + axe-core, y tema claro/oscuro con variables SCSS. SEO completo: Open Graph + Twitter Cards, JSON-LD estructurado (BlogPosting, CreativeWork, CollectionPage), imágenes responsivas WebP/AVIF, sitemap dinámico. CSP estricta sin unsafe-inline, HSTS, bloqueo de bots IA. Desarrollo asistido por agentes IA con SDD (Spec-Driven Development).
Métricas
- 124 tests — Cobertura con Vitest: Suite de tests para SEO, componentes críticos, formulario, imágenes y esquemas JSON-LD
- 103 criterios — SEO completo verificado: 13 requisitos SEO con 103 criterios de aceptación: metadatos, datos estructurados, imágenes responsivas, sitemap
- SDD workflow — Spec-Driven Development: Ciclo completo de desarrollo con proposal → spec → design → tasks → apply → verify → archive
Decisiones clave
Migración Reflex → React 19 + Vite 7
Portfolio original en stack distinto (Python/Reflex) sin control granular sobre el output HTML ni SEO.
Enfoque: Reescritura completa con Vite 7, React 19 y Next.js para SEO y contenido estático en TypeScript.
SEO integral desde cero
Un portfolio sin metadatos, sin datos estructurados y sin imágenes optimizadas pierde visibilidad orgánica.
Enfoque: Implementación de 13 requisitos SEO en 3 fases: metadatos (OG, Twitter), datos estructurados (JSON-LD), imágenes responsivas (WebP/AVIF con srcSet), sitemap con imágenes, y bundle analyzer. Verificado con 103 criterios de aceptación.
Base técnica
Next.js 14 App Router + TypeScript. SEO gestionado por Next.js. Blog con Markdown (react-markdown + remark-gfm). API Serverless en Vercel para formulario de contacto (Resend). Imágenes optimizadas con sharp (WebP/AVIF). Bundle analyzer con rollup-plugin-visualizer. Tema claro/oscuro con variables SCSS.
Aprendizajes aplicables
- React 19 y Vite 7 en producción
- SEO completo: Open Graph, Twitter Cards, JSON-LD, sitemap con imágenes
- Imágenes responsivas con srcSet, WebP y AVIF usando sharp
- Spec-Driven Development con agentes IA: proposal → spec → design → tasks → apply → verify → archive
- Resend para emails serverless y headers de seguridad en Vercel