Portfolio

Over 3 years ago — 2 min read

My old markdown oriented portfolio website

Code on Github

Tools Used: Gatsby, PostCSS

What I learned

  • Brushed up on React, Hooks & Gatsby after having not used it for a while due to having a Vue job

  • How to use CSS vars to create a dynamic light/dark theme

  • Some niche gatsby tricks

  • Re-learned some GraphQL

The homepage

homepage

The homepage uses Anime.js for animations, the squares are simply <div>s styled in a few different ways, overlayed on top of each other and with varying skews and rotations. The animation itself is also random, so every time you get a slighttly different experience. The background uses SVGs which change depending on the theme being used.

Light/Dark theme

The light/dark theme switcher is quite simple, most of the code can be found here on github. It simply checks if the user has a preferred theme set on the OS level and uses that. When changing theme it stores the preference to localStorage and that will then take priority.

One interesting issue with Gatsby is that it didn’t want to play nicely with having a theme load in, I had an issue where no matter what I tried the page would always begin with the light theme, then toggle over to the dark (because the data-theme was set by default to light, same issue would happen but backwards otherwise.)

Apparently Dan Abramov used this method by editing the default Gatsby html.js file. It fixes the issue by running the function before anything else happens, causing the initial render to show the correct theme.

Markdown files

The markdown files turn into blog/project posts. They are styled using a lightly customized version of HiQ.

HiQ is a pretty barebones “No class” type CSS framework, so it’s perfect for markdown where I don’t want to manually style all the different HTML elements.

I’m using CSS variables to change the colours depending on the chosen light or dark theme, together with the syntax theme of any code used using Prism.js.

You can see how little effort I have to make to create the custom themes in a single file, thankfully HiQ even has a theme builder so all I need to do is provide the colours.