Accenture - Grabber

Dual screen experience using NodeJS to connect a mobile device to an arduino board controlling a prize grabbing claw

Users would use their phone to direct the grabber claw and win a prize.

Sony - The Last of Us

HTML5, CSS3 and JS build.

Animations work across mobile, tablet and desktop.

Facebook API utilised to personalise the experience. Profile pictures are obtained from the users friends and placed into canvas elements.

Uses RequestAnimationFrame to help performance by keeping in sync with the refresh rate and css3 animations with hardware acceleration to stop janking.

English Heritage

HTML5, CSS3 and JS build on the Foundation framework

Penguin - My Independent Bookshop

Technically lead and nurtured client through the process

HTML5, CSS3 and JS responsive build

PHP codeigniter framework as the backend, front end is a custom responsive grid, uses the JQuery framework for JS work, Modernizr for feature detection and a selection of polyfills to cover HTML5 functionality in older browsers such as Drag and Drop and SVG support.

Most of the animations are done in CSS3.

Sony - Infamous Second Son

Dual screen experience using NodeJS to connect a mobile device to your browser using websockets

Users would pick a power and swipe in a direction to destroy models in a video scene. Latency and performance were important and I was able to make the experience near instantaneous.

Honda - Honda Hands

HTML5, CSS3 and JS responsive build.

On desktop and tablet the video will play through and utlising the YouTube API will prompt users to interact with the video at various timing points. Due to need to support IE8, animation pieces were created in flash, for tablet and above IE8 the animations were converted to HTML5 using swiffy which proved extremely useful and flexible.

Uses RequestAnimationFrame for performance.

EA - FIFA Goals of the Week

Facebook Canvas app that allows users to submit a URL from youtube or the EA goals site to enter a goals of the week competition.

Goals from the EA site had to be collected by a cross domain script that run upon goal submission.

Users were able to vote for their favourite goals which were passed to an admin area where you could pick out goals to be voted on per week and upload a highlights reel.

Honda - CRV-SE

Simple page for CRV-SE, youtube video at the top that scales, car colour changer written in JS and a pie chart that works from stats that are picked up from youtube views to decide which car is most popular, black or white.

Pie chart is drawn as a canvas element.

BBC - College of Production

College of Production is built on the BBC Forge platform.

The site sits on a Zend platform and pulls data from the BBC Java CMS iSite

The COP site hooks into various BBC libraries such as iPlayer and programme information.

Honda - Do More New

Honda piece for CR-V, interacts with Google Maps API to show locations around you for you to explore on a random trip to one of 12 locations.

Google Maps supplies the distance from your location and then your fuel saving is worked out.

Weather comes from a weather api feed and your individual information could be saved into a PDF to print (PDF and weather feed appear down).

LOCOG - Olympics 2012

Competitive Tweeting. #SupportYourTeam was a country vs. country race for Olympic Twitter supremacy. People were encouraged - whether at the Games or watching on TV on the other side of the world - to use the #SupportYourTeam hashtag to tweet support for their nations and athletes. These tweets were then aggregated and displayed around the London 2012 site as animated infographic races.

Database and Infrastructure was built to deal with an immense amount of traffic in which we processed over 15m tweets.

Go On UK - Main site

Responsive template build on top of a Wordpress install.

Uses Custom fields plugin to allow admin users to customise more of the site.

Muller - Muller Dairy

Drupal based website which I built as part of a team and then solely maintained due to departures.

Hyundai - i40

Build and deployment of this XHTML/CSS site for the Hyundai i40, using JQuery for interactive elements that degrade gracefully.

Tax calculator built using JQuery and XML as a data storage to compile tax benefits for business purchase of the latest Hyundai car model.

360 car model is also Javascript based rather than a typical Flash 360 model.

Hyundai - Hyundai Thinking

Build and deployment of this XHTML/CSS site for the Hyundai Thinking campaign.

Navigation of site is done with JQuery where the X and Y coordinates of each screen are looked up and then animated to.