The last time I made a makeover of my website was just before the covid pandemic hit, early 2020. It was mainly a blog made with Gatsby, not great, not terrible. See the screenshot below.
But after almost 3 years (that felt like an eternity) I just felt that it didn't represent me anymore. Also, I've been looking for excuses to try some new technologies for a while, and revamping my personal website seemed the perfect start.
The starting point was to pick the new technologies I want to work with. So I picked Vue 3 (because I use Vue 2 at my workplace), Typescript, Nuxt, Pinia (because I use Vuex at my workplace), and Bulma for CSS productivity.
To keep everything neat and organized I wrote down in my notes app every to-do item that I will have to solve to finish the website. You can get a glimpse of my planning in the screenshot below:
I start the building process by playing with NuxtJs, but it turned out to be not stable enough for a project that won't stay just a project, but will be pushed into production. So, I gave up on NuxtJs and just used Vite to help me set up my project environment with Vue 3.
I used the typescript option and Vite took care of everything to be typescript-first. I installed Pinia (which is an improved Vuex and has typescript support), and Vue Router 4.
Next thing on the list: Bulma, a CSS framework. I wanted to use it, so I can increase my productivity and finish the styling much faster than coding it from scratch. I quickly gave it a try, but it just didn't feel right. I didn't like it. Sorry, Bulma, nothing personal there.
The second option on the list was TailwindCSS (the new hot thing in CSS that Twitter won't stop talking about it) which is a utility-first CSS framework. It just clicked. I love their docs. It's so easy to find anything that you need and the design is modern and minimalist. It was love at first sight. As a bonus, I ended up using heroicons and some UI components also from TailwindCSS.
Now that the tech stack was set, I had to think of a design for my personal website. I browsed a ton of Figma designs and "Best designed personal websites" type of blog posts which led to a shortlist of websites. In the end, I just took one aspect that inspired me from each of the websites on the shortlist and made it my own, which reminds me of one quote from the great Pablo Picasso: "Good artists copy, great artists steal."
Tech stack, check. Design, check. All that's left is to start coding and that's what I did. During the next 21 days, I coded here and there, nights and weekends until all to-do list items were checked.
The final step is to deploy it on a server and change the DNS nameservers of my domain. It was piece of cake and it blew my mind how easy it is nowadays to store your code in the cloud, push changes to it and deploy it, everything for FREE.
How did I do it? I used Vercel for hosting and it took care of everything. All I had to do was to connect my Github account to my Vercel account and pick the repository I want to deploy.
After that, Vercel makes all the hard work for you: it makes the build and the deployment on their servers. Voila, your app is up in the cloud. You can easily connect your domain to Vercel servers by copying and pasting Vercel nameservers into your domain provider dashboard (I use Namecheap). Every time you push some changes to your repository, Vercel takes care to make an up-to-date build of your app and deploy it, automatically. You don't have to lift a finger.
That was pretty much the story behind the makeover of my personal website. My main takeaways are:
1. I loved Vue 3, Composition API, and Vite. Can't wait to use them again in other side projects.
2. I can't go back to Javascript after using TypeScript.
3. I didn't get to use so much Pinia in this project, but it feels much cleaner and simpler than Vuex, but the docs could use an improvement.
4. I didn't see so many differences between Vue Router 3 and Vue Router 4.
5. TailwindCSS is a massive productivity gain. You can easily make a website responsive and implement light mode / dark mode in a couple of hours. I will use it again in the next side project.
6. Vercel is hands down the easiest and fastest path from code on your local environment to production when it comes to frontend-only apps.
I am going to rest for the following days and then get back to the drawing board with another side project.
Happy Coding!