A new coat of paint

Published: 01 Feb 2019
Reading time: 2 min

This design overhaul has been mostly complete for a few weeks now, sitting in my staging branch on Github. Most of it came together really quickly, but implementing the alpha for React Image v1 was a bit of a pain. There is an issue with server-side-rendering, that ended up having a pretty easy fix.

Add the following to your gatsby-node.js file, and things should start working.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
      module: {
        rules: [
            test: /react-images/,
            use: loaders.null(),

Old homepage

Screenshot 2019-02-01 17.29.05

New homepage

Screenshot 2019-02-01 17.33.16

Old gallery

Screenshot 2019-02-01 17.30.26

New gallery

Screenshot 2019-02-01 17.33.55

Old blog

Screenshot 2019-02-01 17.29.11

New blog

Screenshot 2019-02-01 17.33.23

Old contact

Screenshot 2019-02-01 17.29.16

New contact

Screenshot 2019-02-01 17.33.29

It's just all cleaner. The code is simpler. And it's easier to extend the components. Overall, I am really happy with how this has all come together.

One last thing

When I first started building my website on my own, doing away with platforms like Wordpress and paid themes, I made the decision early on to keep my source-code open. I learned by studying, copying, breaking, and fixing code that others had freely shared, and I wanted to be sure that my work—no matter how elementary it may have been at the time—could help someone. It was a nice realization over the last few weeks that I have finally crossed that milestone. The repo for my site has started collecting some stars and forks. It was also, briefly, one of Gatsby's featured sites. Screenshot 2019-02-01 17.58.48

But why bring this up? Specifically the part about my code helping someone?

Well. forks

JP Valery and Lutando Ngqakaza both forked the codebase, and put their own spin on the design. It's been cool watching them push updates and work my original project into something of their own.