Design of kunalnain.com

Published: 7/10/2025

The goal of this article is to share the different technologies used in the building of this website. I want to cover the reasons for using these technologies, issues I ran into and future planned enhancements.

We will discuss the design of the website in separate high level sections of deployment, backend, and frontend.

Deployment

I wanted the deployment overhead of this website to be very low. Although, we can deploy this website in multiple regions, add CDN caching and use K8 there is no real benefit in doing that at this time. Also, the chosen deployment service is able to do a lot of these things under the hood without any extra needed configuration from our side.

AWS Amplify

I am using AWS Amplify to host this website. The setup of Amplify is very easy using the AWS management console. It is able to retrieve the code from my GitHub repo and with a very simple yaml config file I am able to configure CI/CD.

One honorable mention goes to Vercel which is a very solid choice for deploying a Next.js application. I chose AWS because my DNS is already setup in Route53 and and I might venture out to play with other AWS services.

Backend

This website is a very simple frontend application that talks about my background and some personal projects. There is no need for a dedicated backend as there is no service or API to host. However, I always wanted to have a blog and turns out a headless CMS is a good integration to have.

Sanity CMS

Sanity is used as a headless CMS to provide content for the blog. Although, the content for the blog can be directly committed to the React components there is a lot of benefit in decoupling the content from React component. This article that you are reading is actually fetched from the Sanity CMS.

The largest benefit of using a CMS is that it allows me to independently scale the blog without actually updating the source code. Can you imagine having 5 different React components for 5 blogs and then trying to scale that source code?

There are a lot of other benefits offered by the CMS but this decoupling is the biggest one.

Frontend

We will definitely need a frontend for this website. I am using React functional components for the layout. There is no CSS template used for styling of the frontend as everything is pure HTML with CSS in JS.

Next.js

Next.js is the React application framework for this website. It offers a lot of cool benefits like built-in optimizations, hot reloading, route handling etc. I will not go through the benefits of using a react application framework here but it is one of the most popular React frameworks for a reason.

Tailwind CSS

Finally, I am using Tailwind to style the boring React components. I have worked with frontend applications for a long time and large monolithic CSS files is one of the things that I hated most. Even if you are not using Tailwind for your next project I highly recommend everyone to look into CSS in JS.

Colocation of styles with the component itself without worrying about custom class names and ids is awesome. The showcase of websites built with Tailwind is a testament to its importance.

Closing

I hope you enjoyed read this short article. I skipped over a lot of details in this article to keep it contained in size and to keep it readable. Maybe I can dive into more details into some of these tools in the future.

See you next time!!