This website

All development

  • web
  • front-end
  • back-end
  • devops
  • design
  • ES6
  • cssnext
  • JSX
  • Gatsby
  • Markdown
  • React
  • GraphQL
  • static
  • AWS
  • personal

This is a rehash of an ancient design.

This time I went for hexagons rather than squares, and draw them with an SVG pattern rather than a server-generated tiling bitmap image.

The colour-changing remains, this time with the colour chosen via a hash of the current path, but still with the link colour chosen to have a hue opposite from the grid’s. The grid colours are chosen randomly within some bounds, and two nearby hues are used as centres rather than just one. I’m using the excellent chroma.js library to choose colours from a perceptual space instead of HSL (in the latter of which the same “lightness” will seem darker or lighter depending on the hue).

The main goal with this rebuild was to make the site static and serverless, with all content still managed in the version control repository. I also wanted to add some discussion about the projects I’ve worked on in particular cases, rather than just having a list.

The previous iteration of the site was built in Node.js and hosted on an AWS EC2 instance, alongside some other Node tools I’d built. Each of those tools has since moved to Heroku or become obsolete, and it seemed silly to run and maintain a server just for a single Node application, especially this one, which is essentially a static website. Static hosting makes much more sense, and can be cheaper and faster too.

Gatsby was the perfect choice of framework for this project.

Pages such as this one are written in Markdown with data such as the tags, date, path, and title in YAML frontmatter. Gatsby then generates a static page for each one I’ve marked as “featured”, and also provides a GraphQL API I can use to query the results to use on index pages. Meanwhile, I write the templates in Javascript with JSX and ES6 transformations, and have the full power of React to play with.