How I Built This Website

Building something from scratch is one of the best ways to learn new skills and refine the ones you already have. This website is a side project I use to explore new technologies. Over time, it has gone through multiple versions with different stacks, and I'm constantly rebuilding and updating it to experiment with new frameworks and tools.

Technology stack

For this iteration, I incorporated technologies I wanted to try but hadn't had the opportunity to use before. I also discovered and adopted some tools along the way. Here are the most notable ones:

• React + Typescript: A combination I've been using for a while and continue to enjoy.
• Next.js: A React framework I had never worked with before but always heard good things about. My experience with it was excellent.
• Tailwind CSS: A utility-first CSS framework. In my previous projects, I used Styled Components, but this time, I wanted to try something different. Even though I had to learn the class names on the go, I found Tailwind easy and efficient to work with.
• ESLint + Prettier: These are among the first tools I configure in any project to enforce code quality and consistent styling.
• Husky: Helps run tests, lints, and formatters using pre-commit hooks, allowing me to catch errors as early as possible.
• Framer Motion: A React animation library I stumbled upon by accident. I was impressed by the range of effects it enables. So far, I'm using it to add fade-in/out transitions during page navigation.
• Jest + React Testing Library: My go-to tools for unit testing.
• Unified: The blog posts are written in markdown and I use Unified along with plugins to convert them into HTML at build time.
• Prismjs: A syntax highlighter for code blocks.

And here are the services I'm using:

• Github: Where I host my personal projects.
• Vercel: Provides easy and seamless deployments with GitHub integration.

Design

The design and layout inspiration came from the websites of other developers like (Kent C Dodds, Zeno Rocha, and Dan Abramov). For now, I'm using Tailwind default color palette, which looks great out of the box. The site also supports a light/dark theme that automatically adjusts based on the system's settings.

Conclusion

I learned a lot while working on this project, and I plan to continue experimenting with it to explore new ideas and technologies. If you've never built something from scratch, I highly recommend giving it a try. You'll be surprised by how much you learn along the way.

If you're interested, you can check out this website's source code on Github.