Building a Modern Portfolio with Next.js 15 and Tailwind v4

I recently rebuilt my portfolio from scratch. My goal was simple: create a site that feels fast, looks premium, and is easy to maintain.

The Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Content: MDX (Markdown + JSX)
• Deployment: Vercel

Why Next.js 15?

The new App Router allows for granular control over what runs on the server vs. the client. For a portfolio, mostly everything is static.

SEO & Metadata

I leveraged the new Metadata API to generate dynamic OG images and JSON-LD structured data purely on the server.

export const metadata: Metadata = {
  title: "Nguyen Tong Loc | Senior Web Engineer",
  openGraph: {
    images: ["/og-image.jpg"],
  },
};

Adding a Blog with MDX

One of the key requirements was a blog where I could write in Markdown but embed React components (like the code block above!).

I used next-mdx-remote to decoupled the content from the build process, allowing for faster builds and flexible rendering.

What's Next?

I plan to add more interactive case studies and potentially integrate a 3D experience using Three.js for the Hero section.

Stay tuned!