Mazen Alsenih
Home
Skills
Blog
Projects
Products
Contact

Mazen Alsenih

Senior Full Stack Developer crafting exceptional digital experiences with modern technologies and best practices.

Remote · Germany
Let's Work Together

Quick Links

  • Home
  • Skills
  • Blog
  • Contact

Connect

LinkedIn
Connect professionally
GitHub
View my code
Xing
Professional network
X (Twitter)
Follow my thoughts
© 2026 Mazen Alsenih•Made with and lots of ☕
Site actively maintained
Built withNext.js•TypeScript•Tailwind CSS•MDX
Building a Modern Portfolio with Next.js 14

Building a Modern Portfolio with Next.js 14

March 15, 2024

Why I Rebuilt My Portfolio

After years of maintaining a Sanity-backed portfolio, I decided to simplify the stack. The goal was to reduce external dependencies, cut build times, and own my content as plain text files in git.

The result? A blazing fast portfolio where adding a new blog post is just creating an .mdx file.

The Stack

  • Next.js 14 (App Router)
  • TypeScript for type safety across the board
  • Tailwind CSS for utility-first styling
  • MDX for rich content with embedded React components
  • gray-matter for frontmatter parsing

Setting Up the MDX Pipeline

The MDX pipeline with @next/mdx is straightforward. Here's the next.config.mjs:

Reading Blog Posts

Instead of a CMS query, we read files directly from the filesystem at build time:

The Result

Build times dropped from ~8 seconds (Sanity fetch + compile) to ~2 seconds. Zero network requests at build time. Content lives in git alongside the code — PRs, diffs, rollbacks all work naturally.


This is the first post in the new system. More content coming soon.

Mazen Alsenih

Written by

Mazen Alsenih

Back to blog posts
#Next.js#TypeScript#Tailwind CSS#Portfolio