Selected Works

Originally created for a training session I delivered to the web team at my place of work, this app runs through some of the most useful and exciting new features to have dropped in CSS over the last few years.

It also begins with an overview of where CSS is at right now, and the backstory of how it got there.

I built it in Next.js, and naturally, it makes heavy use of many of the new CSS features it covers, such as scroll driven animation and view transitions.

The sequel to my original side-project which I sold for a five-figure sum, messivsronaldo.app began as a learning exercise and developed into a real passion project.

Built with Gatsby, this site was my gateway into React, and I can't understate how much I learnt during both the initial build and the never-ending feature additions. It was a constant work in progress for the best part of 2 years, and it was fantastic to have a project that really energised me in the way that this did.

The original iteration of this side-project which I previously alluded to (messivsronaldo.net), I created in 2012 and sold in 2016 with an average daily user count of around 15,000, and a firm grip of the top spots in Google for the most relevant search terms.

This new version was initially a learning exercise primarily, but soon began to show some promise in terms of organic performance. In a little over a year it had toppled its predecessor, and went on to achieve some dizzying numbers, despite zero financial investment on marketing.

In the year from October 2022 to September 2023, the site had 11.7 million users, an average of 32,000 per day. It has also surpassed 100k users in a single day on 8 occasions, including twice breaking the 200k barrier! The all time high was 226,323 on Monday 19th December 2022, the day after Lionel Messi's World Cup triumph.

Top Scorers Club is another recently launched side project with a simple purpose; an at-a-glance, quick-reference resource showing the top scorers and assisters in football's biggest competitions.

The site was built with Astro, and I have to say it was an immensely enjoyable build, with the Astro developer experience probably my overall favourite at the moment.

Without going into too much detail about the data side, the site makes creative use of the Google Sheets API, auto-updates and costs nothing to run.

Quite early on in my career, I was very lucky to be approached by global publishers Wiley to write an extensive book on advanced CSS3.

I was an earnest blogger at the time, posting many tips, tutorials and experimental demos on CSS and particularly all of the fancy new features that came under the umbrella of "CSS3".

It was this activity that caught the attention of Wiley, and I was thrilled to be given the opportunity. After several months of very hard work and very late nights (which also happened to coincide with moving from the UK to New Zealand), CSS3 Pushing the Limits - totalling 384 pages - was published in late 2013.

The book received favourable reviews, and despite its age would still hold some weight today due to the cutting edge nature of the material, with the likes of Grid, Flexbox, Keyframe Animation and CSS Variables covered in detail.

I've never been so hungry at work before! But seriously a doughnut website is always going to be a fun project to work on and this one didn't disappoint.

I'm used to designing primarily for lead-generation, but the Doughnotts design was more about letting the brand sing and getting the tone of the visuals right.

It's still geared towards getting hungry shoppers to buy tasty doughnuts, but it was also an opportunity to let the creative juices flow somewhat.

The site is hand-coded in WordPress (using Timber and Twig for templating) and I used Barba JS and GSAP for smooth page transitions, creating a seamless browsing experience. The site also integrates with Slerp which is an external platform that specialises in food purchases and delivery.

Woolfox is a newly developed exclusive members club in Rutland. They wanted a website with a bit of edge and a tone that would appeal to its high-end target market.

I produced a design that is clean and minimal, letting the text and abundance of imagery do the talking in an intentionally understated fashion.

It's not my favourite style, but it demonstrates my versatility from a creative perspective.

The client is delighted with the site and it's been very successful for them in their opening year.

The team at Ducklings wanted to step away from the safe, almost corporate look of their previous website and those of their competitors. They sought a fresh and fun new look, with almost a story book feel.

So I was able to let the shackles off a little creatively, and the client was thrilled with the designs I put forward. The build featured a lot of SVG, Barba JS with GSAP for seamless page transitions, and some creative use of position:sticky to enhance the story-book feel as you scroll through the sections.

The team at Artificial Lawn Supply are a lovely bunch and the project was very rewarding to work on to boot, with lots of little complexities allowing me to put my JavaScript credentials to the test.

The design is clean and simple, putting a real focus on the content and products, and my years of marketing agency experience ensure its finely tuned to convert, with the right USPs and calls-to-action in the right places.

Built on top of WooCommerce, the front-end is very bespoke, using Twig to template completely custom shop pages. I also built a custom price calculator, which instantly displays the price based on the user's width/length inputs, and calculates the shipping costs based on these measurements as well. It then carries the data through to the cart and checkout, where it does some more custom calculations to ensure the correct overall shipping and cart fees are applied.

Moot 4x4 is a brand new venture for a UK outfit focused on selling 4x4 car parts.

The site has hundreds of categories and complex filtering systems to show products specific to the user's chosen vehicle. I designed the UI to simplify those complexities as much as possible, with the vast amount of categories and sub-categories condensed into a simple, slimline header area.

The vehicle input flow has also been carefully designed to ensure the user has visibility of this option at all times, and understands its relationship with the products that are visible to them.

As with the majority of my projects, I crafted the full product, from initial designs right through to the fully-functional e-commerce build.