Building SunnyGolovine.com - Part 1

Earlier this year I had decided to rebuild my personal website. Over the years I’ve added more and more to my existing site, from a blog to an online resume. The way I added these modules was to create a new React project, publish it to Netlify, and point a subdomain under glvn.co to the new project.

This worked well for a time but keeping up with all the projects and keeping them up to date was becoming more and more of a chore. So about 2 weeks ago I decided to rebuild all of these various projects into one site.

Decision Time

When I set out to build the site, my initial plan was to use a new technology in my stack that I’ve not previously used. Usually my decisions fall into two categories when starting new projects, either try out a new technology or stick with tried and true tech that’s worked for projects in the past.

For this project I decided to try something new, and that new thing was snowpack. My initial impressions of snowpack were very positive, here’s a build tool that is seriously fast and not a nightmare to configure like Webpack. However as time went on I started to encounter issues. My dealbreaker issue though was spotty support for babel aliases. I had setup babel aliases like ~/, @media and @data. These worked for me before in the past when using Webpack so I thought nothing of bringing them in. For some reason though it just refused to work.

This wasn’t a huge issue on its own, but this also wasn’t the first issue I had configuring Snowpack and I made the decision to move to something more battle-tested: NextJS. It’s been a while since I had used NextJS for a project but I knew their latest release included a bunch of new features so I wanted to give them a go.

For the UI I went with TailwindCSS. Last year I fell in love with TailwindCSS after using it on a project and have since incorporated it into more and more projects that I work on. TailwindCSS is great because I’m not a designer and the UIs I’m able to crank out with TailwindCSS look top notch without the downside of all looking the same (something you encounter if you use Bootstrap).

When it came to the blog I decided to keep things simple and copy the example the NextJS devs provide in their blog starter. And used tailwindCSS typography to style the content generated by remark.

What’s Next.

So far I’ve only thought of things for the initial build, after which I will likely be retrofitting the site with more upgrades. In Part 2 I will talk about building the site and some of the issues I had to overcome in the process.