DEV Community

Cover image for A Deep Dive into the Tech Stack of My Personal Website
Levi Schouten
Levi Schouten

Posted on

A Deep Dive into the Tech Stack of My Personal Website

I'm excited to announce the launch of my personal website, and for my first blog post, I want to walk you through the technology stack that I used to build it.

The main purpose of my website is to publish content, primarily blogs at the moment. To ensure good SEO and performance, I needed a framework that could handle static site generation. After some research, I chose Next.js, a React-based framework, due to its excellent features, good documentation, and easy integration with Vercel, my hosting platform of choice.

For styling, I used Tailwind, which comes with a great design system out of the box, along with a utility first approach which I really like. Plus, it's great for performance since it compiles to vanilla CSS.

To add animations to my website, I used Framer Motion. Although my current animations are straightforward, I plan to implement more ambitious ones in the future and want to get comfortable using Framer Motion.

All of my content is written in Markdown, which is more than enough since this project is not handed off to a non-technical person. To simplify the process of creating new blogs, I wrote a bash script.

Finally, I deployed the entire project to Vercel with just a few clicks, thanks to the integration with Next.js. I've been enjoying Vercel because it's easy to set up and provides pipelines, analytics, insights, and logs with minimal configuration.

Overall, I'm thrilled with the technology stack I chose for my personal website. It provides me with the flexibility and features I need to publish content efficiently and effectively. I look forward to using these technologies and tools more in the future to improve my website even further.

I plan on sharing more blogs about my experiences working with these and other technologies so be sure to follow my profile or checkout my socials.

The source code can be found on Github.

Take a look at the live result here: https://www.levischouten.net/

Top comments (0)