The previous version of this portfolio was built in plain React during my training as a Web Developer. Although functional, I felt the need to make a technical leap forward.

I wanted a project that wasn't just a static showcase but a real playground for experimenting with more advanced technologies. I approached Next.js attracted by its intuitive routing system and the ability to handle backend logic within the same environment as the frontend, features that were missing from my previous Single Page Application (SPA).

1. Architecture and Tech Stack

I rebuilt the site from scratch with a strong focus on performance and maintainability:

• Next.js & SSG: Since the content rarely changes, I opted for Static Site Generation. This ensures near-instant load times by serving pre-rendered HTML.
• Multilingual Management: Internationalization is handled through next-intl. I implemented a hybrid structure: I use the library's native functions for UI strings (menu, footer) and locale parameters in routing to serve dynamic content (like this article) in the correct language.

// /app/[locale]/layout.tsx
// SSG statically generates a base layout for each locale.

import { routing } from "@/i18n/routing";

export function generateStaticParams() {
    return routing.locales.map((locale) => ({ locale }));
}


// /app/[locale]/projects/[project]/page.tsx
// SSG hydrates the dynamic [project] routes with the actual portfolio slugs.

export function generateStaticParams() {
    return (portfolio as PortfolioProject[]).map((p) => ({ project: p.slug }));
}

2. Content Management with MDX

The key feature of this update is the integration of MDX.

The Problem: In a standard portfolio, every project page follows the same rigid structure (Title, Image, Text).

My Solution: With MDX, I turned every project page into a flexible canvas. I can alternate simple descriptions with fully structured Case Studies, insert interactive React components directly into the text, and customize the layout based on the story I want to tell for that specific project.

3. UI/UX and Performance

The design goal was "invisible but intuitive." I worked extensively on semantic tags and ARIA attributes to ensure the site is accessible to anyone, regardless of device or assistive technology. The PageSpeed Insights results confirm the performance benefits of combining SSG with clean code:

PageSpeed Insights Results

4. Challenges and What I Learned

The biggest challenge was technical: integrating MDX with the multilingual routing system of Next.js. The official documentation on advanced use cases was limited, and I was coming off a break from coding.

Overcoming this obstacle taught me to dig into library source code and not rely solely on tutorials. The biggest lesson? Next.js is the framework that aligns with the way I think: structured yet flexible, perfect for scaling from a simple static site to a complex application.