Portfolio Website

Project Overview

This is the site you’re looking at. It’s a bilingual portfolio that presents my work in data science, machine learning, and full-stack development. The technical goal was straightforward: build a site where adding a new project means writing an MDX file, not touching application code.

Content Architecture

MDX-Based Project Pages

Each project lives as a pair of .mdx files (one per language) in the content/projects/ directory. The frontmatter is validated against a Zod schema at build time, so type errors and missing fields are caught before deployment, not in production.

The MDX body supports rich formatting, code blocks, and custom components, giving each project page the flexibility of a blog post with the structure of a typed data model.

Automatic Route Generation

Next.js App Router generates project pages dynamically from the content directory. Adding a new project creates its route, adds it to the project listing, and makes it available in both languages, all from the file system.

Internationalization

The site uses next-intl for localization with /en and /es route prefixes. A single component tree serves both languages. Translations live in JSON message files, and content-level translation happens through the paired MDX files. SEO metadata (titles, descriptions, Open Graph tags) is generated per-locale with proper hreflang attributes.

Technical Stack

Frontend

• Next.js 16 with App Router and Static Site Generation
• React 19 with concurrent features and Suspense boundaries
• TypeScript 5 across the entire codebase
• Tailwind CSS 4 with a custom design system (spacing, colors, typography)

Interactive Layer

• Framer Motion for page transitions, scroll animations, and hover interactions
• Radix UI for accessible primitives (theme toggle, navigation menu, dialog)
• Dark/light theming with system preference detection and manual override

Content Pipeline

• MDX processing with custom plugins
• Gray Matter for frontmatter extraction
• Zod schemas for build-time validation of project metadata
• File-based routing for zero-configuration page generation

Deployment

The site runs on Vercel with automatic deployments from the GitHub repository. Static Site Generation means pages are pre-rendered at build time, resulting in fast load times and strong SEO without a runtime server.

Design Decisions

• No CMS: MDX files in the repo are the content source. This keeps the stack simple and version-controlled.
• Radix UI over custom components: accessibility is built-in rather than bolted on.
• Tailwind over CSS Modules: utility-first approach keeps styling colocated and consistent.
• SSG over SSR: portfolio content changes infrequently, so static generation is the right tradeoff.

Impact

The site serves as both a professional showcase and a demonstration of modern web development practices. The content system is designed to scale: as new projects are completed, they’re documented and published through the same MDX workflow without touching the application code.