JUST EAT

In May 2015, I started work as part of the International Platform Improvements team at JUST EAT.

My role is to help improve the front-end architecture and process across all of JUST EAT’s international websites.

Activision – Skylanders

For the launch of Skylanders Trap Team, TMW worked to create a launch experience that would connect across social channels and engage with those at the event.

We created a Twitter controlled baseball bat, that hit a Pinata – shaped like a bad guy from the game – every time someone tweeted with the event hashtag.

I worked on the interface and message passing between the tweets and the Arduino controlled bat.

The event was a great success with thousands of tweets recieved during the 3 hour event and the live stream coverage watched by hundreds online.

Lynx Peace

I led the development for the launch of the Lynx Peace campaign website.

A 3 month development project, I worked closely with the design team to create a site that is dynamic and visual, while working across a wide range of devices.

Visit site

BBC GoodFood

I was the lead front-end developer on the BBC GoodFood responsive redesign.

Lasting around 10 months, I worked closely with the team at BBC Worldwide to create a beautiful new experience that works across devices.

I have subsequently talked at events about the project including Front-end London, The Digital Barn and AKQA Anoraks (now Tech Insight).

Visit site

Lynx Mass Debates

Starting out as a labs project, Lynx Mass Debates is a site driven by Twitter data sent through in realtime.

The site uses Node.js, connected up to the Twitter streaming API, to watch and display details of what people are talking about, visually displaying the results on screen.

Uncharted 3

I was lead front-end developer working on an advertising piece for the launch of Uncharted 3; an interactive JavaScript/Flash Facebook takeover game.

This was launched via an extension or bookmarklet downloaded by the user, dependent on the users browser, which then launched a game that overlaid their Facebook profile page.

Ford Interactive Showcase

In late 2012, I worked on an internal Ford project, creating an interactive infographic using CSS3 and Javascript.

The site used Raphael and CSS3 animations, fired by Javascript on user interaction and scrolling to bring the varying visuals to life.

Trinity Laban

In late 2010, I worked with Trinity Laban to create their first online digital Prospectus.

The site delivered a customisable experience unique for each user, utilising SVG, HTML5 geolocation and JavaScript to create an immersive, visual prospectus.

The Pensions Regulator

While working at Precedent, I worked on the rebuild of the Pensions Regulator website, which detailed the changes in pensions regulations for individuals and companies.

The site required a very modular and scalable approach to deliver a site that could be managed externally on handover, while designing for a site that holds a vast amount of content.

Visit site

RSPCA

During my time at Precedent, I was the lead front-end developer across all of the RSPCA's UK Political Animal websites, as well as being involved in work for RSPCA Australia.

This culminated in working on their 2010 General Election website, working closely with designer Luke Fry.

During my time working with the RSPCA, we successfullty evolved their brand, building a website very different from the conventional RSPCA offering, while keeping the identity of the charity at the heart of the project.

Visit Political Animal Site

Toyota AYGO

I was lucky enough to be involved in the UK Trainer Launch of the Toyota AYGO, creating digital learning materials and activities for dealerships to engage with over the week long event.

Kickoff

Developed in partnership with Zander Martineau, Kickoff is a lightweight, flexible and robust front-end framework that is a great starting point for any web site.

Kickoff aims to help devs get up and running as quickly as possible without adding the bloat that other frameworks can lead to.

The framework includes a Sass-based CSS framework, a responsive grid system, beautiful typographic styles, JavaScript helpers, utilities and a great set of boilerplates for a number of eventualities.

View documentation

Statix

Developed in partnership with Zander Martineau, Statix makes creating and working with static HTML templates quick and easy.

Statix is built on top of Assemble, Kickoff and Grunt with the aim of harnessing the power of all three to give developers a solid starting point when building static sites or templating designs.

View documentation

Creative toggle button examples

A collection of creative toggle button demos created using CSS3.

Inspired by a whole host of images on dribbble (see the demo details for links).

See the demo

A collection of CSS text-shadow and pattern effects

Wanting to explore the simple text-shadow, I created a number of visual effects that could be created by layering text-shadows.

For more info, see the associated blog post.

See the demo

Christmas Tracker

A personal project I setup for Christmas 2014.

The site tracks a number of words related to Christmas on Twitter and displays the results in realtime each day.

For more info, see the associated blog post.

See the site

2D and 3D Loaders

A selection of 2D and 3D loaders all based around a row of 6 blocks.

The example uses CSS3 animation and transforms to create a variety of subtle loading effects.

Inspired by the loading animation on the PSN mobile site (which uses the Flip Delay Up example for their loader).

For more info, see the associated blog post.

See the demo

CSS Animals

A collection of animals made purely with CSS3.

This was a bit of an experiment playing around with making animals out of as few elements as I could using only CSS.

Inspired by Matt Scribner's drawings on Dribbble.

See the demo

Media Query Mario

A demo created for the MDN Dev Derby, back in October 2012

Built using a mix of CSS and JavaScript, it‘s aim was to show how media queries could be used in new and inventive ways

The demo subsequently trended on Hacker News and Reddit, leading me to write an article about the making of the demo for MDN.

I recently added the demo to CodePen in mid–2014, since which time it has been viewed over 50,000 times

See the demo