Personal Website

Personal Website project which has been currently built with NextJS and Sanity.

What did I do?

I wanted to learn more about JavaScript frameworks, so I started to build my personal website on one.

In the summer of 2019 I chose GatsbyJS as the framework and for managing the content I chose to create markdown files and save them in the repo. Not long after I published the first version of the website I started to tweak stuff here and there. First one being converting the codebase to use TypeScript. Next was adding MDX support to content. As in markdown files with React component support. And of course you can't forget syntax highlighting with prismjs with prism-react-renderer!

As the content amount grew, my local environment building got slower and slower. That demotitaved me to develop the site further. After some time I got motivation to do something about it. I chose to change the framework to NextJS and migrate my content onto Sanity in late 2021.

Migrating the site from GatsbyJS to NextJS was shockingly a breeze. Only minor headache was to learn Sanity and how to get it working with NextJS properly, but that was a small learning curve. And in the end it worked out nicely!

Design iterations

The website has changed drastically since 2019. I can't be happy with one iteration for long until I tweak it again.

When eyeing the first design and comparing it to the latest one, it quite nicely shows how my design language has evolved. It gets more simple and clean every iteration it goes through. Which is a good thing. The less clutter or "eye-candy" the better it is. It does keep some aspect of older designs, but just tweaked a lot.

2019

A screenshot of my previous personal website frontpage

2020

A screenshot of my previous personal website frontpage

2021

A screenshot of my previous personal website frontpage

2022

A screenshot of my previous personal website frontpage

Tech stack used in this project

  • NextJS
  • Sanity
  • TailwindCSS
  • TypeScript
  • ReactJS
  • JavaScript
Visit sourceVisit website