I've always wanted to start blogging, but platforms like dev.to and Medium felt too locked down. While they’re great for sharing content, I couldn't add my own unique look and feel. I was amazed by sites like brittanychiang.com and kentcdodds.com, and that inspired me to create my own blog—one that would allow me full control over both design and content. Here’s how I made it happen.

I decided to use Next.js 14 App Router for the core of my blog. Next.js is known for its powerful routing system, and the new App Router simplifies how pages are structured and rendered. This allowed me to easily create routes for each section of my blog, manage dynamic content, and optimize for performance with server-side rendering (SSR) and static site generation (SSG).

With Next.js, I could also use TypeScript, ensuring that my code was strongly typed and more reliable. TypeScript's features made it easier to catch potential issues early, which is always a plus when maintaining a growing codebase.

For styling, I went with Tailwind CSS. Tailwind’s utility-first approach makes it incredibly easy to apply styles directly within the HTML, reducing the need for bulky stylesheets.

<div className="flex items-center md:items-start">...</div>

I loved how Tailwind allowed me to quickly iterate on the design, making tweaks as I went without the usual overhead of traditional CSS.

Additionally, Tailwind's responsive classes made the site mobile-friendly from the start, ensuring a seamless experience for users on any device.

Content management was another key consideration, and for that, I used Velite to handle MDX blog posts. MDX allows me to combine Markdown with JSX, giving me flexibility when writing posts. I can include interactive components like custom buttons or embedded media directly within my posts, making the content richer and more dynamic. Velite simplifies this process, letting me manage my posts with ease.

Since I often share code snippets, it was important for them to look clean and readable. I added Shiki to highlight code at compile time, ensuring beautifully styled code blocks without sacrificing performance. It offers a wide range of themes and languages, making it easy to customize the look and feel of my code snippets.

I've also included some Remark plugins like rehype-pretty-code which adds line numbers, line and word highlighting to code blocks:

interface Book {
  title: string;
  published: string;
}
 
const book: Book = {
  title: "Pride and Prejudice",
  published: "1813",
};

One thing I was really excited about was creating an experience that felt smooth and enjoyable to navigate. For this, I integrated Framer Motion to handle page transitions. Rather than jumping instantly from one page to the next, I wanted the transitions to feel natural and seamless.

With Framer Motion, I was able to create animations that made the site feel alive. For example, when a user navigates between blog posts, I added subtle fade-ins and slide animations that give the sense of continuity. This adds a layer of polish to the site and keeps users engaged as they explore different sections.

The library is highly customizable, so I could tailor each transition to match the style of the blog. Whether it's a quick fade or a gentle slide, Framer Motion made it easy to create professional-looking animations without a steep learning curve.

Building my blog has been more than just a technical achievement; it’s a creative outlet that reflects my personal style and preferences. By choosing tools like Next.js, Tailwind CSS, Velite, and Framer Motion, I’ve crafted a space that’s entirely my own, both in function and aesthetics. The journey allowed me to experiment, learn, and grow, and now I have a platform where I can not only share my thoughts but also continue refining my skills. As my blog evolves, it will remain a dynamic and personal extension of my development journey, always open to change and growth.