Portfolio Personal
Portfolio moderno con React 19, Vite 7 y SEO completo
Portfolio moderno con diseño fluorescente neón, migrado desde Reflex a React 19 + Vite 7 + TypeScript. Incluye lazy loading y code-splitting por ruta, formulario de contacto con API Serverless (Resend), 124 tests con Vitest + Testing Library, y blog con Markdown (react-markdown + remark-gfm). SEO completo: Open Graph + Twitter Cards, JSON-LD estructurado (BlogPosting, CreativeWork, CollectionPage), imágenes responsivas con srcSet WebP/AVIF vía sharp, sitemap con extensiones de imagen, y robots meta configurable. Desplegado en Vercel con headers de seguridad y CI/CD con lint + typecheck + test + build. Bundle visualizer con rollup-plugin-visualizer. Tema claro/oscuro con variables SCSS. 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