Behind the scenes on the build of my new website

Like many other people the Coronavirus lockdown has lead to some downtime in my work schedule. So that has given me an opportunity to revisit my website and put in place some new design ideas that I have been rolling around in my head for a few months.

Now I am the first to admit that when it comes to the Designer / Developer divide my skillset is very much on the developer side of the boundary. However I occasionally make a foray across the border and stretch my creative side. Especially when it comes to my own brand and website.

Some of the key things I wanted to include in the new design were:-

  • incorporate my new branding
  • update and clarify the services that I provide
  • stick with the ‘single page’ style that has served me well in the past
  • make more use of GSAP (Greensock animation protocol)
  • utilise a fixed, animated, background
  • incorporate a new blog (moving away from the previous reliance on Twitter)
  • lay some foundations for some future services that I have in mind for the website

The animated background

The idea for the website background was to have a ‘fixed’ element that the rest of the content scrolling over the top of. This would have an abstract component that was constantly animating.

Because this was going to be a fixed element one of the challenges was ensuring that this would be suitable for screens of both desktop and mobile devices in landscape and portrait format. The abstract nature of the design helped with that as it doesn’t really matter if it gets stretched or contorted a little – it still gives the overall look that I was after.

The static element of the background consists of three layers. A solid colour, plus two gradient svg images layered over the top. Like this-

Static background layers
Layered background images

The animated elements of the background are three ‘blob’ like shapes. These are also svg files.

Each blob is animated separately on a path that rotates it a full 360 digress over the course of it’s journey, and returns to the same point where it started. The speed of each blob is slightly different, which gives the overall animation a less rigid feel.

I like to think of it as a cross between a lava lamp, and the video game Asteroids.

The use of GSAP for the animation gives it the silky smooth look that I was after.

The path of a blob element

The other effect that I implemented was a change to the colour of the blobs as each section of the Home Page comes into view. This is quite subtle, but I think really adds to the impact of the design.

This was achieved with the ScrollTrigger plugin for GSAP. I absolutely love this plugin and I have leaned on it heavily in the making of this website.

Colour change of animated blobs
The blob colours change as you scroll

Managing GSAP with WordPress

As part of my recent exploration of GSAP I recently built a WordPress plugin that enables me to manage which GSAP components are loaded by a WordPress theme. This proved invaluable when it came to the construction of this website.

Utilising this plugin I can quickly enable or disable GSAP components via the Dashboard.

GSAP loader plugin
GSAP loader plugin

I may well release this plugin at a future date after it has had a bit more polish. But I digress !

Other animations

I implemented a lot of extra little ‘entrance’ animations to further enhance the look and feel of the new site. Such as the icons dropping into the WordPress section and the reveal on the Portfolio images. Again this is all achieved with GSAP and the ScrollTrigger plugin.

Icons dropping in on scroll
Entrance animations enhance the design

Often with these it’s a case of experimenting to find a look that fits the content.

Admittedly I’ve gone to town a bit with the animations but as this website is also partly acting as a showcase then I think that’s justified ! But quite frankly GSAP takes this in its stride.

Managing content with WordPress and ACF

On the back-end of this website I built a number of new Block components with ACF (Advanced Custom Fields). These help me to deliver the specific custom layout that I needed.

ACF is something I’ve been using for a number of year and is an absolutely invaluable tool for building custom components for the websites that I create.

An example of this would be the Block that manages the content for the Portfolio section.

Custom ACF Block
Custom ACF Block

Future planning

The overall look of the new website gives me an unfussy base to build on with my future plans. I am planning on doing more blogging, and also possibly releasing some WordPress plugins and online training. So watch this space.