Revamp my personal website

Introduction

I completed my first personal website around 2021, right after I learned the basics of HTML, CSS, and JavaScript. At that time, I was preparing to switch career from merchandiser to web developer, and the main purpose of the website was to showcase some small projects I built with JavaScript to help me find a full-time job.

Why I revamp my personal website

After successfully making the career transition, I became busier with work and learning, and the website was no longer updated. Over the past few years, I’ve continued to learn many new technologies and tools, but I realized that it’s easy to forget what I’ve learned over time. To organize and record my learning journey more systematically, I decided to redesign my personal website.

This site is not only a platform for my study notes, but also a record of my professional growth. In the future, I’ll be sharing new discoveries, technical insights, and personal development experiences from my journey in web development. I hope to connect with others, exchange ideas, and grow together.

How I do it

Next.js

There are many ways to build a personal website today, I am using Next.js to create my new personal website because it provides features like static site generation (SSG) and server-side rendering (SSR), which make websites load very quickly and deliver a smooth user experience.

Sanity CMS

As I need a platform to organize my notes, I need a convenient CMS to manage the content of my website. I use Sanity because their visual editor is very user friendly for creating new post. Also, the Live Content API from them is a real-time API that enables applications to receive instant updates whenever content changes in your Sanity dataset.

Shadcn and Tailwind CSS

For the layout of my website, I am using Shadcn and Tailwind CSS. First of all, Shadcn components are styled using Tailwind CSS classes, so there’s no conflict between styling systems. You can easily extend or override styles using the same utility classes you already know. Also, Shadcn provides a collection of high-quality, accessible, and customizable UI components that save me from writing common UI elements from scratch (like button and card).

Conclusion

Web development can easily become overwhelming. With the rapid development in recent years, new web development tools keep emerging—from JavaScript to React, as well as Vue, Angular, Astro, Nuxt.js, Next.js, and more. However, the sense of satisfaction from building a fast and user-friendly website is also very rewarding. Recently, I also tried another headless CMS called Payload, and it feels like a good choice as well.

I am very happy to see my personal website change from this one to the current one you are visiting. I hope you all like it and I wish everyone continued progress — keep on coding!