Nick Watton

03.2024 - 10.2024

Wolfson Brands own multiple Shopify stores, with European and global markets. I have been working across their range, introducing new features and maintaining existing ones.

I developed my role in the squad to include elements of team support both for the squad manager and team colleagues, covering elements of backlog refinement and sprint planning, general team support and code reviews, in addition to my front end development.

JS, Shopify Liquid, CSS, Tailwind CSS

Wolfson Brands

11.2025 - 03.2025

Zonal are the market leaders in point of sale services for the hospitality industry.

They have an established client side offering, but are in the process of moving their services to the the cloud. CSL stepped in to help crunch on some backend and frontend processes in their admin interface.

React, TypeScript, Jest testing

As this is an admin interface, and currently still in development, there are no links I can share.

03.2024 - 07.2024

Building on a long-term understanding of Scot.Gov requirements, Storm undertook a project to use AI to auto-generate forms from a variety of sources.

As the lead front end developer my primary role was to ensure a coherent front end design, and provide any DOM manipulation JavaScript. In addition, throughout the project daily stand-ups provided the space for me to reflect on the UI, UX and accessibility directions the (backend driven) build was taking, and keeping it honest!

A small UX discussion about visual representaions of a user's journey through a complex chart led to me implimenting the Mermaid charting library which swiftly become a central pillar of the projects UI.

JS, Mermaid, CSS, .Net Razor template integration

Implementations are not currently public.

Mermaid prototype on CodePen

03.2022

A large scale Scot.Gov project to review the existing online planning permission process.

As the lead front end developer on the project I implementated the Scot.Gov design system, integrated with Storm's own design agnostic scaffold. I was responsible for ensuring that during the process of .Net implementation WCAG 2.2 accessibility standards were maintained, and providing any DOM manipulation or forms related JavaScript as required.

One such custom element was a tool for accurately mapping the boundaries of a property. For this we used the OpenSystemsLab geo-data mapping API, and you can see a test implementation via the link below.

The project is not yet live, but the Scot.Gov Digital Planning team intends to take the alpha service prototypes forward to beta and live, in line with its digital strategy.

JSX, JS, CSS, .Net Razor template integration

Implementations are not currently public.

OpenSystemsLab API prototype on CodePen

08.2023

Following the Glasgow Life transformation, Storm was tasked with a similar overhaul of the sister site, Glasgow Club.

Glasgow Club has a distinct design language from other sites in the group, so whilst the underlying scaffold is largely shared across the estate, as lead front end developer on the project, I needed to take care that all details of their design were implemented correctly.

Whilst many of the challanges from Glasgow Life had been solved for this build, the scale of tablular data presented for venues and activities proved an issue. Smaller tables (opening times) maintained visual structure and only changed width responsively. Larger tables required a visual collapsing of <td> elements, whilst maintaining DOM structure and coherance for keyboard users.

JS, CSS, .Net Razor template integration

Visit Glasgow Club

04.2022

Storm took Glasgow Life through a complete digital transformation programme, redeveloping their main web portal, and dedicated venue and event sites.

As the lead front end developer on the project I ensured the design was faithfully implimented, and ensured accessibility standards were maintained.

Interesting challanges included the map view for the venue finder, bespoke Swiper carousel conflicts, and much longer than expected horizontal in-page navigations. However, working closely with the design, UX, and testing teams, all issues were resolved to the client's satisfaction.

JS, CSS, .Net Razor template integration

Visit Glasgow Life

05.2023 - 11.2023

The Historic Environment Scotland (HES) estate comprises some 30+ separately maintained websites, build over many years with multiple technologies. And they all needed to have their cookie banner updated and WCAG 2.2 compliant.

My role was to adapt their existing cookie banner code for compliance (specifically ensuring no interactive elements are obscured), to be standardised for all sites, with configuration options, but without the need for an implementing developer to customise the JavaScript.

Final delivery was with a .umd JavaScript bundle with a configuration object in a <script> tag. I provided extensive documentation for HES developers to use, and was available for support when some implementations where less straightforward and the HES developer needed assistance.

JS, CSS, Markdown (for documentation)

Historic Environment Scotland

Edinburgh Castle

03.2022

When the COPFS started to return to office work after lockdown, they needed a tool to allow staff to book desk space. I converted paper office layout charts into data, in JSON format, which allowed all offices / desks to be dynamically drawn and interacted with. Booking data was submitted to their existing SharePoint intranet.

As the full application is an intranet, there is no public URL.

View WiP on CodePen

06.2017

Drone Kick game.

Part of the "One Team. One Standard." British and Irish Lions tour sponsorship campaign.

Written with vanilla JavaScript, this is a simple target shoot game. Gameplay needed to be the same on mobile and desktop so the interaction is necessarily simple: automatic missle direction control and one click to fire.

The game can work in a standalone configuration for conferences, with a leaderboard mode to display the top ten scores on a separate sceen.

Over 64,500 plays in a month, with an average 44 plays per person.

The campaign (game and banners), was awarded BT Sport Industry Award. Best Ambassador, Influencer or Partnership of the Year.

HTML, JavaScript, GSAP-js, CSS

Drone Kick - Play an archive of the Game

06.2017

Part of the "One Team. One Standard." campaign, these banners run video content to showcase SLIs sponsorship of the 2017 Lions tour.

The campaign (banners and game), was awarded BT Sport Industry Award. Best Ambassador, Influencer or Partnership of the Year.

Served through DoubleClick.

HTML, JavaScript, GSAP-js, CSS

Video banners - DoubleClick preview

09.2019

A quiz that selects your funeral song, embedded as a standalone tool within the main Sunlife site.

I include this project not for it's scale or technical merit, but rather because it casts a fun light on a can-be dark subject.

It was a quick and enjoyable project which is still alive on the client site 5 years later. Now that's something to sing about!

HTML, JavaScript, CSS

Take the quiz

CodePen prototype

01.2017

At Realise I built 10s of campaigns (each with 10-14 individually sized units) for Heathrow. I really enjoy the specific challenges of making banners work. They must be lightweight, and the design and animation immediately engaging. It looks easy but it needs a fine eye for detail and a high level of trust between designer and developer.

These campaigns saw very high engagement, and presented a clean design in a very lightweight package.

I even saved enough filesize to be able to include a subtle particle system in their Christmas campaign to add movement and sparkle.

HTML, JavaScript, GSAP-js, CSS, DoubleClick with dynamic feed

Heathrow Christmas MPU banner, with added sparkle

Whilst at Realise I made probably hundreds of banners for clients like Not on the High Street, Forza Racing, Channel 4, Heathrow, Standard Life, Sun Life... All fun and unique.

Some were simple image and text; there were several with videos, and a few exciting ones where I could get interactive, add particle sparkles or even dynamically create Delaunay triangles in the background. One of my favourites (sadly now lost without trace) was for Channel 4 and had a washing machine with a spinning drum, served under their strict 55kb size limit.

Mostly served through DoubleClick, but also via FlashTalking.

HTML, JavaScript, CSS, DoubleClick / FlashTalking with dynamic feed

C4 MPU XBox One Forza Racing 7. Coded venetian blind (?!) image transition

SLI MPU banner with scenic parallax and plane flight

Lightweight animation sequencing engine demo, on CodePen

05.2019

I am a huge Brompton bike fanboy, so when I heard AmazeRealise was pitching to them I had to butt in, and quickly knocked up this responsively animated, interactive Brompton bike banner.

Moving through the three main steps in the bike's amazing fold, the user can also customize the paint, just like ordering the real thing (used to be).

Born out of personal passion, whilst the pitch wasn't sucessful, this illustrates how all parts of a team can pull together and produce something unexpected.

SVG, CSS, JavaScript

View on CodePen

10.2025

I've been making web-based animations for years, and when this course popped up I thought it would be good to shake myself up and learn some new techniques. The course has confirmed my growing love of SVGs, and greatly deepened my understanding of CSS animation.

CSS, SVG, JS

Course overview and curriculum

9.2025

Building on the foundations laid in the previous course, this training delved deeper into the principles of effective engineering management. It probably took me past where I project myself being for now. However, it was really useful in helping me understand the breadth of management tasks, and will certainly be useful for my skills as a senior team member.

Course overview and curriculum

7.2025

I actively enjoying my development work, but within squads I find myself taking on mentoring and somewhat-management roles. I took this course to gain greater understanding of this area, and to build some foundational skills.

Course overview and curriculum

12.2024

Whilst I had brushed up against TypeScript, I never really needed to apply it until I joined ClearSky Logic. I wanted more than a passing understanding based on code picking, so I enrolled in this course to underpin and grow my understanding.

CSS, SVG, JS

Course overview and curriculum

07.2024

I took this React course to refresh and deepen my understanding of the framework. It was super interesting and great fun.

React, a little bit of Next

Course overview and curriculum

02.2017

I am now a certified developer for DoubleClick banners.

This means I have demonstrated my knowledge and skills to build high quality rich media ads within DoubleClick Studio, with particular knowledge regarding the development of dynamic content creatives.

In addition, I am QA certified for DoubleClick banners, so my builds are more likely to pass their audits first time, and be ready to publish more quickly.

HTML banners

07.2022

When the application my dyslexic son's learning support teacher used was closed down, I remade it for her and her colleagues.

Free to use.

JS, Canvas

View on CodePen

09.2021

Made during a hack week at Secureworks, with an idea that it could be an easter egg on a 404 page.

A horizontal scolling invaders game, with handrawn graphics. Vanilla JavaScript, using ES6 modules. The first two waves of invaders are hand coded to spell a message (originally relevant as a 404), then afterwards we fall back to an endless random enemy pattern generator.

I revisted this to make a JS13K Games entry. I managed to keep it hand-drawn, although I did need to cut the parallax environment layers.

JavaScript, HTML audio

The original game on CodePen

JS13K entry

10.2019

The sound artist Jerobeam Fenderson (oscilloscopemusic.com) creates music that can be visualised through an oscilloscope. I don't have an oscilloscope, so I wrote a JavaScript player that does the same thing.

This is not an animation.

The graphics are the visual output of specially created music, produced by combining the stereo waveforms.

Featured in Steve Gardner's Tiny Web Animation Newsletter.

JavaScript, Audio API

Listen and watch

01.2020

I co-ran a team building challenge, to paint 3D Easter Eggs, then create a game or interface to use the resultant images.

My primary role was creating the initial paint application, using canvas for the main painting app, and live rendering the result onto an interactive 3D egg.

I also took responsibility for encouraging colleagues to contribue to the project, helping with the egg API.

JS, Three.js, Canvas, SVG

Paint an Egg - No instructions, but you'll work it out!