Tech

Building My Personal Website with Next.js, Tailwind CSS v4, Shadcn/ui, MDX

24 Jun 2025

3 min read

After many years having thought about building my own personal website, I finally did it. At first, I was looking for a template I can use, thinking of the design, and the tech stack. But then, I decided to build it from scratch. I think I can learn a lot while building it.


Why I Built It from Scratch

There are many great templates and website builders out there, but I decided not to use them. I have searched and looked at many of them. They are really cool! But, maybe it's just me or maybe it's my overthinking. I don't know what to put or even don't know what to write. I want to just build the website first, not knowing what to put. So, I just started building it.

Building it from scratch gives me full flexibility and control over the layout, design, interactions, and even how the content is rendered. Using a pre-built theme often means spending more time undoing things than building what I really want.

I started with Next.js, Tailwind CSS v4, Shadcn/ui, and MDX.


Tech Stack Overview

Here's what I used to build it:

  • Next.js v15: My go-to framework for React apps—easy routing, built-in SEO features, and great performance out of the box.
  • React v19: The latest version of React.
  • TypeScript v5: The latest version of TypeScript.
  • Tailwind CSS v4: The new version made styling easier.
  • shadcn/ui: Accessible and customizable UI components.
  • MDX: To write blog content using Markdown + JSX.

Everything is deployed on Vercel. It makes deployment fast and painless. Just need minimum configuration and it's done.


Challenges

1. Designing the website

At first, I was looking for templates and designs. I thought that it would be easy to find one that I like. And maybee... create something similar. But, I realized that it's not that easy and I don't even find one that I like.

Thankfully, I got help from my friend, Diputra R. He is a designer and he helped me design the website. I really appreciate it. And the result is great. Happy with it.

2. Writing content

I have never written a blog before. I have written some articles on Medium, but just that. I think writing is not my strength, but I wanted to try. And not only writing blogs, even write about my experience, it's hard. I won't lie, I asked AI to perfect it, not all of course, but I asked it.

I am hoping with this, I can write more and more.

3. Wanting to make it perfect

This is the hardest part. I want to make it perfect. I want to make it look good. I want to make it look professional. And it caused me spending a lot of time just to think about it and reiterate everything before ship it.

I told this to my boss, "I want to make it perfect". He said, "You don't have to make it perfect, just ship it!". I think it's true. So I think I should just ship it.

Final thoughts

I am happy with the result. I learned a lot while building it.

Thank you for reading!


Tech