Nick Watton

11.2025 - ongoing

Building the front end for an AI prototype project.

Rapid development was required to meet a tight demonstration deadline, so I roughed out a functioning interface with vanilla JSX, then leveraged Claude to refine the build, including proper TS interfaces, and accessibility features.
This met the original speed requirements, and also created a more solid base for further development with little additional overhead.

The prototype has been well received by prospective clients, and we are currently developing a second iteration.

React (Vite), TypeScript, Tailwind CSS, CSS Modules

Polaris View post on LinkedIn

03.2025 - 10.2025

Wolfson Brands run 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.2024 - 03.2025

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

They have an established client side offering, but were in the process of moving their services to the cloud. CSL stepped in to help crunch on some back- and front-end processes in their admin interface.

React, TypeScript, Jest testing

As this is an admin interface 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

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 implemented, and ensured accessibility standards were maintained.

Interesting challenges 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

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 missile 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 screen.

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

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

12.2025

DevTools are such a part of daily life, and a prime target for the saying "familiarity breeds contempt". I learned new features, saw old ones with fresh eyes, and felt my debugging confidence grow. A great course.

Chrome DevTools

Course overview and curriculum

12.2025

A very engaging course covering design fundamentals and patterns, then exploring the pathways to implement them in website builds. Largely a refresher, but worthwhile nevertheless.

CSS, SVG, CSS Grid, Optimisation techniques, Photoshop

Course overview and curriculum

12.2025

I'd been using Tailwind CSS somewhat reluctantly for a while, and wanted to better understand the beast. The course, which covers Tailwind's utility-first approach and advanced techniques, gifted me with a much more positive appreciation, and deeper understanding, of the framework.

Tailwind CSS

Course overview and curriculum

11.2025

As a self-taught developer on CSS through practice not study, I wanted to develop a deeper understanding of the principles that underlie CSS. This course has been instrumental in filling gaps, and enhancing my skills.

CSS, JS

Course overview and curriculum

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

7.2025 - 9.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.

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.

101: Course overview and curriculum

102: Course overview and curriculum

12.2024

Whilst I had brushed up against TypeScript, I never really needed to apply it until I joined ClearSky. 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

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, and although I did need to cut the parallax environment layers I was able to add light-speed star effects.

JavaScript, HTML audio

The original game on CodePen

JS13K entry

10.2019

The sound artist Jerobeam Fenderson 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!