Sitio Web de Portfolio

Resumen del Proyecto

Este es el sitio que estás viendo. Es un portfolio bilingüe que presenta mi trabajo en ciencia de datos, machine learning y desarrollo full-stack. El objetivo técnico era directo: construir un sitio donde agregar un proyecto nuevo signifique escribir un archivo MDX, no tocar código de aplicación.

Arquitectura de Contenido

Páginas de Proyecto Basadas en MDX

Cada proyecto existe como un par de archivos .mdx (uno por idioma) en el directorio content/projects/. El frontmatter se valida contra un esquema Zod en tiempo de build, así que los errores de tipos y campos faltantes se detectan antes del despliegue, no en producción.

El cuerpo MDX soporta formato enriquecido, bloques de código y componentes personalizados, dando a cada página de proyecto la flexibilidad de un post de blog con la estructura de un modelo de datos tipado.

Generación Automática de Rutas

Next.js App Router genera páginas de proyectos dinámicamente desde el directorio de contenido. Agregar un nuevo proyecto crea su ruta, lo agrega al listado de proyectos y lo hace disponible en ambos idiomas, todo desde el sistema de archivos.

Internacionalización

El sitio usa next-intl para localización con prefijos de ruta /en y /es. Un solo árbol de componentes sirve ambos idiomas. Las traducciones viven en archivos de mensajes JSON, y la traducción a nivel de contenido ocurre a través de los archivos MDX pareados. Los metadatos SEO (títulos, descripciones, tags Open Graph) se generan por locale con atributos hreflang apropiados.

Stack Técnico

Frontend

• Next.js 16 con App Router y Static Site Generation
• React 19 con features concurrentes y boundaries de Suspense
• TypeScript 5 en todo el codebase
• Tailwind CSS 4 con un sistema de diseño personalizado (spacing, colores, tipografía)

Capa Interactiva

• Framer Motion para transiciones de página, animaciones de scroll e interacciones hover
• Radix UI para primitivos accesibles (toggle de tema, menú de navegación, diálogos)
• Temas claro/oscuro con detección de preferencia del sistema y override manual

Pipeline de Contenido

• Procesamiento MDX con plugins personalizados
• Gray Matter para extracción de frontmatter
• Esquemas Zod para validación en build-time de metadatos de proyectos
• Enrutamiento basado en archivos para generación de páginas sin configuración

Despliegue

El sitio corre en Vercel con despliegues automáticos desde el repositorio GitHub. Static Site Generation significa que las páginas se pre-renderizan en tiempo de build, resultando en tiempos de carga rápidos y SEO fuerte sin un servidor en runtime.

Decisiones de Diseño

• Sin CMS: los archivos MDX en el repo son la fuente de contenido. Esto mantiene el stack simple y con control de versiones.
• Radix UI sobre componentes personalizados: la accesibilidad está incorporada desde el inicio, no añadida después.
• Tailwind sobre CSS Modules: el enfoque utility-first mantiene los estilos colocados y consistentes.
• SSG sobre SSR: el contenido del portfolio cambia poco, así que la generación estática es el tradeoff correcto.

Impacto

El sitio sirve como showcase profesional y demostración de prácticas modernas de desarrollo web. El sistema de contenido está diseñado para escalar: conforme se completan nuevos proyectos, se documentan y publican a través del mismo flujo MDX sin tocar el código de aplicación.