Sitio Web Personal y Plataforma de Portafolio

Construí un sitio web personal moderno, performante y completamente internacionalizado usando Next.js 15 App Router, con un sistema unificado de contenido MDX, optimización SEO dinámica, consentimiento de cookies compatible con GDPR y pruebas E2E completas con Playwright.

Resumen

Esta plataforma de sitio web personal y portafolio representa un proyecto full-stack completo que muestra las mejores prácticas de desarrollo web moderno. Construido con Next.js 15 App Router, React 19 y TypeScript, la plataforma sirve tanto como portafolio profesional como blog técnico, demostrando experiencia en arquitectura frontend, internacionalización, optimización SEO y aseguramiento de calidad.

El proyecto cuenta con un sistema unificado de gestión de contenido usando MDX, soporte bilingüe completo (Inglés/Español), infraestructura SEO dinámica, consentimiento de cookies compatible con GDPR y pruebas end-to-end completas. Cada decisión arquitectónica se tomó pensando en escalabilidad, mantenibilidad y rendimiento.

Desafíos

El proyecto enfrentó varios desafíos críticos:

• Gestión Unificada de Contenido: Crear un sistema de contenido único que maneje tanto páginas estáticas (servicios, sobre mí) como publicaciones de blog dinámicas con formato consistente y reutilización de componentes
• Internacionalización Completa: Implementar soporte bilingüe perfecto (Inglés/Español) con etiquetas SEO hreflang adecuadas, enrutamiento de URL y localización de contenido
• Optimización SEO a Escala: Generar sitemaps dinámicos con enlaces de internacionalización adecuados, generación de imágenes OG y gestión de metadatos para todos los tipos de contenido
• Cumplimiento GDPR: Construir un sistema de consentimiento de cookies que se integre con analytics mientras respeta las preferencias de privacidad del usuario
• Experiencia de Desarrollador: Crear componentes MDX reutilizables que funcionen perfectamente tanto en contexto de página como de artículo
• Organización de Contenido: Gestionar publicaciones de blog en múltiples categorías con análisis adecuado de frontmatter y lectura del sistema de archivos
• Optimización de Rendimiento: Implementar estrategias de caché inteligentes y optimizar la entrega de activos estáticos
• Aseguramiento de Calidad: Establecer infraestructura completa de pruebas E2E con pruebas de regresión visual

Solución

Implementé una solución integral que abordó todos estos desafíos:

Arquitectura Next.js 15 App Router: Aproveché el último App Router de Next.js con React Server Components para construir una aplicación performante y amigable para SEO. La arquitectura separa responsabilidades con grupos de rutas (site) y (landing), permitiendo diferentes layouts para diferentes secciones mientras se mantiene la organización del código.

Sistema Unificado de Contenido MDX: Diseñé e implementé un sistema revolucionario unificado de gestión de contenido donde tanto las páginas estáticas como las publicaciones de blog usan el mismo formato MDX con componentes personalizados. El componente CustomMDX cambia inteligentemente entre layouts de "página" y "artículo", aplicando estilos y comportamientos de componentes apropiados según el contexto. Esto elimina la duplicación de contenido y asegura consistencia en todo el sitio.

Utilidades de Lectura de Contenido Dinámico: Creé utilidades sofisticadas de lectura del sistema de archivos (readContent.ts y readPost.ts) que escanean directorios recursivamente, analizan frontmatter y organizan contenido por idioma y categoría. El sistema maneja automáticamente categorías anidadas, archivos faltantes y proporciona contenido de respaldo, haciendo la gestión de contenido sin esfuerzo.

Internacionalización Completa con next-intl: Implementé soporte i18n completo usando next-intl con detección de locale basada en middleware y enrutamiento. El sistema soporta cambio de idioma perfecto, preserva la estructura de URL e incluye etiquetas SEO hreflang adecuadas en el sitemap. Todo el contenido, incluyendo publicaciones de blog, servicios y páginas estáticas, está completamente localizado.

Generación Dinámica de Sitemap con hreflang: Construí un generador inteligente de sitemap (app/sitemap.xml/route.ts) que descubre automáticamente todas las rutas (páginas estáticas, servicios y publicaciones de blog), genera XML adecuado con alternativas hreflang para cada idioma e incluye fechas de última modificación. El sistema asegura indexación SEO adecuada para ambos idiomas sin mantenimiento manual.

Sistema de Consentimiento de Cookies Compatible con GDPR: Desarrollé un sistema sofisticado de consentimiento de cookies que usa almacenamiento dual (cookies para acceso del lado del servidor y localStorage para scripts de analytics del lado del cliente). El sistema despacha eventos personalizados cuando cambia el consentimiento, permitiendo que Google Analytics reaccione dinámicamente. Los usuarios pueden aceptar todo, rechazar todo o personalizar preferencias, con todas las elecciones persistidas entre sesiones.

Utilidad de Mapeo de Tecnologías: Creé un sistema centralizado de mapeo de tecnologías (techMapping.ts) que normaliza nombres de tecnologías, los mapea a iconos y colores, y proporciona visualización consistente en todo el portafolio. Esto elimina inconsistencias y hace trivial agregar nuevas tecnologías.

Librería de Componentes MDX Personalizados: Construí una librería completa de componentes MDX reutilizables incluyendo <Quote>, <Highlight>, <IconCard>, <ProjectImages>, <LeftBannerService>, y más. Estos componentes funcionan perfectamente tanto en contexto de página como de artículo, proporcionando capacidades ricas de creación de contenido mientras mantienen consistencia de diseño.

Optimización de Rendimiento Basada en Middleware: Implementé caché inteligente en middleware (middleware.ts) que establece headers de caché agresivos para activos estáticos (1 año) mientras permite que el contenido dinámico esté fresco. El middleware también agrega headers personalizados para depuración y seguimiento de solicitudes.

Infraestructura Completa de Pruebas E2E: Establecí una configuración robusta de pruebas Playwright con pruebas de regresión visual, pruebas multi-locale y cobertura completa de flujos críticos de usuario. Las pruebas incluyen interacciones de consentimiento de cookies, cambio de idioma, envíos de formularios y validación de renderizado de página en viewports de escritorio y móvil.

Server Actions para Formulario de Contacto: Implementé un formulario de contacto usando Next.js Server Actions con integración Mailgun para entrega confiable de correo electrónico. El formulario incluye integración reCAPTCHA para protección contra spam y manejo adecuado de errores con retroalimentación al usuario.

Generación de Imágenes OG: Creé generación dinámica de imágenes OG (app/og/route.tsx) usando la API ImageResponse de Next.js, permitiendo compartir en redes sociales con imágenes de vista previa personalizadas para todas las páginas.

Cálculo de Tiempo de Lectura: Implementé cálculo de tiempo de lectura estilo Medium para publicaciones de blog, calculando automáticamente el tiempo de lectura basado en conteo de palabras (200 palabras por minuto) para mejorar la experiencia del usuario.

Capturas de Pantalla de la Plataforma

Ideas Ingeniosas

Varias decisiones arquitectónicas demuestran resolución innovadora de problemas:

Sistema Unificado de Contenido MDX: El aspecto más ingenioso es el sistema unificado de contenido donde el mismo formato MDX y componentes funcionan tanto para páginas estáticas como publicaciones de blog. El componente CustomMDX usa una prop layout para cambiar contextos, aplicando diferentes estilos y comportamientos. Esto elimina la necesidad de sistemas de contenido separados y asegura consistencia de diseño. El sistema maneja automáticamente resaltado de código con sugar-high, componentes de tabla personalizados y manejo inteligente de enlaces que preserva locale en URLs.

Consentimiento de Cookies con Almacenamiento Dual: El sistema de consentimiento de cookies usa ingeniosamente tanto cookies (para acceso del lado del servidor) como localStorage (para scripts de analytics del lado del cliente) con despacho de eventos. Cuando cambia el consentimiento, se despacha un evento personalizado, permitiendo que Google Analytics reaccione sin recarga de página. Esto proporciona integración perfecta mientras mantiene cumplimiento GDPR.

Sitemap Dinámico con Descubrimiento de Contenido: El generador de sitemap descubre automáticamente todo el contenido leyendo el sistema de archivos, analizando frontmatter y generando alternativas hreflang adecuadas. Maneja tanto rutas estáticas (definidas en constantes) como rutas dinámicas (publicaciones de blog), creando un sitemap unificado sin mantenimiento manual. El sistema agrupa rutas por path (sin locale) y genera alternativas para cada idioma.

Normalización de Mapeo de Tecnologías: La utilidad de mapeo de tecnologías maneja varias convenciones de nombres (ej., "Next.js", "nextjs", "next") y las normaliza a un solo icono y color. Esto previene inconsistencias cuando diferentes miembros del equipo o fuentes de contenido usan diferentes nombres para la misma tecnología.

Lectura de Contenido con Respaldos: Las utilidades de lectura de contenido manejan elegantemente archivos faltantes, frontmatter inválido y proporcionan valores predeterminados sensatos. Esto hace el sistema resiliente a errores de contenido y asegura que el sitio nunca se rompa debido a archivos de contenido malformados.

Estrategia de Caché Basada en Middleware: En lugar de configurar caché en múltiples lugares, el middleware centraliza la lógica de control de caché. Identifica inteligentemente activos estáticos por patrones de URL y aplica caché agresivo, mientras las rutas dinámicas permanecen frescas. Este enfoque simplifica la gestión de caché y mejora el rendimiento.

Pruebas de Regresión Visual: La configuración de Playwright incluye pruebas de comparación de capturas de pantalla, permitiendo detección de regresión visual. Esto detecta cambios de UI no intencionados que podrían no ser capturados por pruebas funcionales, asegurando consistencia de diseño en actualizaciones.

Arquitectura Técnica

Stack Frontend:

• Next.js 15.2.4 con App Router
• React 19.1.0 con Server Components
• TypeScript 5.3.3 para seguridad de tipos
• Tailwind CSS 4.1.3 para estilos
• Framer Motion para animaciones

Internacionalización:

• next-intl 3.26.5 para i18n
• Detección de locale basada en middleware
• Enrutamiento dinámico con preservación de locale

Gestión de Contenido:

• next-mdx-remote 5.0.0 para renderizado MDX
• sugar-high 0.6.0 para resaltado de sintaxis
• Librería de componentes MDX personalizados

Pruebas:

• Playwright 1.51.0 para pruebas E2E
• Pruebas de regresión visual
• Cobertura de pruebas multi-locale

Infraestructura:

• Vercel para despliegue
• Mailgun para entrega de correo electrónico
• Google Analytics con gestión de consentimiento

Resultados

El proyecto logró un éxito significativo:

• Soporte Bilingüe Completo: Implementé exitosamente soporte perfecto Inglés/Español con etiquetas SEO hreflang adecuadas, permitiendo al sitio servir ambos mercados efectivamente
• Sistema Unificado de Contenido: Creé un sistema único basado en MDX que maneja tanto páginas como publicaciones de blog, reduciendo sobrecarga de mantenimiento y asegurando consistencia
• Infraestructura SEO Dinámica: Implementé generación automática de sitemap con alternativas hreflang, mejorando puntuaciones SEO y asegurando indexación adecuada para ambos idiomas
• Cumplimiento GDPR: Construí un sistema completo de consentimiento de cookies que respeta la privacidad del usuario mientras permite integración de analytics
• Pruebas Completas: Establecí infraestructura robusta de pruebas E2E con pruebas de regresión visual, asegurando calidad y previniendo regresiones
• Optimización de Rendimiento: Logré excelentes puntuaciones de rendimiento a través de caché inteligente, renderizado del lado del servidor y entrega optimizada de activos
• Experiencia de Desarrollador: Creé componentes y utilidades reutilizables que hacen la creación de contenido y mantenimiento del sitio sin esfuerzo
• Arquitectura Escalable: Construí una base que puede acomodar fácilmente nuevos tipos de contenido, idiomas y características sin cambios arquitectónicos

Métricas Clave

• Idiomas Soportados: 2 (Inglés, Español)
• Tipos de Contenido: Páginas, Servicios, Publicaciones de Blog, Proyectos
• Categorías de Blog: 4+ (React, Node.js, Python, Engineering)
• Cobertura de Pruebas E2E: Flujos críticos de usuario en ambos locales
• Rendimiento: Excelentes puntuaciones Lighthouse en todas las métricas
• SEO: Implementación adecuada de hreflang para SEO internacional