Building My Portfolio with Next.js, MDX & Tailwind

A clean workspace representing creativity and engineering

Creating a personal website used to feel like a chore — setting up templates, fighting with CSS, and manually building blog pages.
But with Next.js App Router, MDX, and Tailwind CSS, the experience becomes clean, elegant, and honestly… fun.

This post walks through how I structured and built the foundation of this site.

Why I Built a New Portfolio

After years of school, research, creative projects, and industry work, I needed a place where all the pieces of my engineering + creative identity could live together:

💡 Data Science projects
🧠 Machine Learning research
🏗️ Full-stack engineering work
🎨 Fashion + creative tech experiments
✍️ A personal blog to reflect and share

My goal was to build something:

blazing fast ⚡
scalable
aesthetically modern
future-proof (2025 standards)
easy to write blog posts for

Next.js + MDX + Tailwind delivered perfectly.

Technology Stack

This site is powered by:

{
  framework: "Next.js 15 (App Router)",
  styling: "Tailwind CSS + Typography plugin",
  content: "MDX with React Components",
  deployment: "Vercel",
  enhancements: ["Shiki syntax highlighting", "OpenGraph images", "Responsive images"]
}