Portfolio of Front-end Web Developer Nigel O Toole

I love to make great things for the web, developed using best practices with excellent usability, accessibility and performance. My aim is to always provide seamless functionality and an engaging user experience, with subtle visual flourishes and animation.

Quality of code is very important to me, so I plan my projects diligently and write code that is clear, modular and scalable. Following the latest in web development and continually updating my skills keeps my work interesting. Creating plugins helps to refine my skills while learning new ones and contributing to the web community.

I have worked in web development since 2004 and have developed everthing from microsites to web apps for clients such as Cadbury, O2, Kia, and the Dorchester collection.

Techniques: Responsive Design, Mobile First Design, Website Performance, Progressive Enhancement, Accessibility

Languages: HTML, CSS, JavaScript(ES2015+), Sass, Vue

Workflow: Git, NPM, Gulp, VS Code, Terminal, Mac OS

Work

Cadbury Worldwide Hide

A virtual Easter egg hunt using a customised version of Google maps. Hiders hide an egg and send a clue to their loved one. The seeker can find the egg using the clue, hints to narrow the search area and an eggometer showing the distance from their egg. Once found they can then receive a real egg in the post.

Kia Sorento

To launch the All-New Sorento range a showcase page was built with scrolling animations, parallax imagery and 360 viewer.

Cadbury Secret Santa

Send a free bar of Cadbury chocolate secretly to someone you love. Users sign up, chat live to a postal service worker and record a message using the augmented reality Secret Santa mask.

VCCP

VCCP is a challenger agency creating innovative and exciting advertising that transforms the fortunes of brands. Rebuilding their online presence with new design and branding across eight regional offices was a huge undertaking. It was built with a brand new modern tech stack that would work at this scale. Emphasizing the use of large imagery and video, the new design makes their work the centre of attention.

O2 Parents vs Kids

O2 and NSPCC teamed up to create a new quiz game to pit parents against kids in a battle of digital wits. The aim is to get families talking about the exciting possibilities of the internet, as well as the risks to look out for by testing both sides' knowledge of the online world.

Myo

Myo provides customised serviced offices in multiple London locations. The offices and facilities are showcased with large imagery and scroll animations. The surrounding areas are also given a lot of attention with a focus on local amenities and transport connections.

CSM

CSM is an agency dedicated to creating great experiences in sport and entertainment. Their website needed to showcase their work and capabilities in an engaging way.

O2 Price Slash

O2 is slashing price for its 2019 Black Friday sales event. This game gives users 30 seconds to slash as many prices as possible while avoiding the bubbles. When the user completes the game they can enter a daily prize draw and see all of O2's Black Friday offers.

Plugins

Tiny UI Toggle

Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Direction Reveal

A JavaScript plugin that detects the direction a user enters or leaves an element allowing content to be revealed or hidden based on this direction. This allows for interesting direction based animations.

A grid of images with content overlaid on the first item.

Priority Nav Scroller

A JavaScript plugin for for the priority+ navigation pattern. When navigation items don’t fit on screen they are hidden and can be scrolled into view manually or using controls.

Progress Tracker

A HTML component to illustrate the steps in a multi step process e.g. a multi step form, timeline or quiz. It has multiple layouts which are easy to customize and style.

Responsive Video Poster

A Javascript plugin to add responsive poster images to videos which improve performance and allow full styling control of video placeholders.

A mountain and a lake with a play button overlaid on top.

Pixel borders

A Sass mixin to add pixelated borders to elements, which can be customized for different sizes, styles and colour themes.

Angled Edges

A Sass mixin to add a consistent angled edge to full width elements.