(Temporary) 2020 site update

Context

I've been putting off rebuilding my personal website for quite some time now. It's easy to get hit with a wave of inspiration after seeing a rad portfolio site on one of those curated lists of best looking sites that pop up on Twitter from time to time. I've been hit with that wave of inspiration a few times since the last time I made any major updates to my personal website, which was back in late 2017 (A time when CSS Grid wasn't widely supported). I consistently kept pushing back a site rebuild knowing my portfolio was fine the way it was.

Flash forward to mid 2018, when I decided I would finally rebuild my website using a modern tech stack, i.e., away from Wordpress. My tech stack of choice was Gatsby + React since I was learning a lot of React at the time. A couple months of Gatsby + React tutorials and development went by and I still had nothing to show for. I got bored with the rebuild, had some major life events come my way (engagement, wedding planning, and a new job), and was too lazy to figure out the best way to move the little content I had on Wordpress over to the static file system I had developed.

This current rebuild (the site in front of your eyes) didn't become a reality until the day (early 2020) I found out a certain cloud hosting company deleted my entire droplet after 2 months of unsuccessful charges on an expired credit card. Oh well! No blame on them. I failed to set up any automatic backups on my end. While I could of propped up another droplet with a relatively recent backup I had, I decided against it. I wanted a simpler set up and wanted to continue what I set out to finish on my first go-around in mid 2018.

Tech Stack

I decided to continue working on the tech stack I decided on in 2018, React + Gatsby. Some might argue that tech stack is overkill for a tiny portfolio site, I'd argue "It depends". I chose this tech stack because I want to continue applying new knowledge, creatively, in an environment where I'd like to grow as a stronger developer.

As noted above, I'm utilizing React + Gatsby as the core framework for building out this static site. From there, I'm loading data via GraphQL queries from Contentful's API and I'm hosting it all for FREE on Netlify! All styling is handled from built out components using Rebass + emotion.

The Future

I chose this stack and the simple design (As of May 2020) to enable myself to iterate through new ideas and features that I find interesting. Being able to drop a component in favor of something else is one of the reasons I love React--everything is built at the component level! No hunting down related bits of JS and CSS you brought in from separate parts of your codebase.

I'd like to implement theme-ui with Typescript before redesigning everything (I'm already planning v4). That way, I essentially have a more elegant solution than what I have built out now and can completely move away from the styled API and move towards a more consistent API for component creation via sx prop from theme-ui. Typescript is a must on this next iteration since I'll have access to the theme definition and will get autocomplete and intellisense which will speed up development when redesigning for v4.

I'm extremely interested in this tech stack right now (primarily Typescript + theme-ui + emotion). Do you know of any other apps/sites out in the wild using this stack? If so let me know in the comments my inbox. I'm always interested in seeing other people's implementations of technology I'm toying with.