Welcome to website version 2.1! 🎨

Hello!

Although it may not look it, but things are slightly different here. Let’s dive in and take a look!

A new background colour

I’ve changed the background colour to be easier for the eyes when reading. Some of my posts that I put out are quite long so a warmer colour should help.

The RGB code for this is:

rgb(239, 233, 228);

An all new page - the Archive!

I have nearly 70 blog posts and that means the current blog page is really long. So I decided to change the current blog page to show the 5 most recent posts and the new archive page shows all the posts that I’ve written.

This has been achieved with the following GraphQL query

query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC } limit:5) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
            description
            image
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }

The key part of this query is the use of ‘limit’; now only the the 5 most recent blog posts will be displayed. The rest are stored in the archive.

Eventually, I’ll introduce pagination on the archive page to make things easier to manage.

Also, viewing the list of posts is now more compact on mobile devices.

An updated photo on the main page

I decided to switch from a circle to a square with rounded edges instead. The photo has now been edited with Pixelmator Pro (which is really good by the way).

Also, the sizing of the photo now looks better on mobile and tablet screens!

The work page, has been replaced with an about page

The work page is slightly crowded and somewhat messy. So I’ve revamped it to be an about page. With more information about myself, the work that I’ve done and some of the personal projects I’ve worked on.

You’ll also see a few photos (also edited in Pixelmator Pro) of myself on my most recent trip to Nashville, in front of Five Daughters Bakery (they sell some very good donuts) and a photo from my trip to Tokyo in 2018.

Speaking of the photos. You’ll notice that the text wraps around the photo itself. This has been achieved by using the CSS property called float.

A new font!

I’m now using Roboto Serif! This will be replacing Roboto Slab. You’ll see this used in headers. Vollkorn is still being used as the font for paragraph text.

I like the retro look of Roboto Serif. It stands out and it’s easy to read.

Small CSS changes

I’ve made some smaller changes to the CSS on this website. One being the animation for the footer has been changed as it didn’t work correctly on Safari.

Another change is that the list of blog posts now looks better where each entry now has the same height and width. The view on mobile devices has also been improved.

Wrap up

Looking through the commit history on GitHub for this project, I’ve been using this now for two years! 🎉 Huge thank you to everyone who has read my posts over the past two years!

Hope everyone enjoys the new changes and let me know what you think.

Thanks! 👏