John Robert Pett, Software Developer in Leeds, United Kingdom
John Robert Pett

Software Developer in Leeds, United Kingdom

Member since January 27, 2017
John is a user interface developer currently living in Leeds, United Kingdom. He has a keen eye for design and animation details and maintains industry standards in code quality. John has a degree in visual communication from Leeds University and brings a wealth of interface development knowledge to both independent and enterprise businesses. Recent projects of John's include work for Adidas, HMRC, Channel 4, East Street Arts, Le Col, David August, and Robinsons Soft Drinks.
John is now available for hire


  • Container Studio
    CSS, Git, HTML, HTML5, Information Design, JavaScript, Jest...
  • Savvy Marketing
    JavaScript, React, WordPress, SCSS, Design, Git, PHP, HTML, Shopify, 2D, 3D...
  • Accenture
    JavaScript, React, SCSS, Git, HTML, Jest, Storybook, 2D, 3D, ES7, Sass, HTML5...



Leeds, United Kingdom



Preferred Environment

JavaScript, React, WordPress, SCSS, Webpack, HTML

The most amazing...

...thing I've done was to shape Adidas retail in Beijing with RFID integrated touchscreens, giving users a rich media experience.


  • UI Developer

    2016 - PRESENT
    Container Studio
    • Implemented the UI for Unmade, a company using the browser to assist in designing and manufacturing knitwear.
    • Worked for Harbour Space University as both a lecturer of creative coding and a developer on the team building their main website.
    • Created the online presence of musician and performer David August.
    Technologies: CSS, Git, HTML, HTML5, Information Design, JavaScript, Jest, MUI (Material UI), React, SCSS, 2D, 3D, ES7, WP Engine, Sass, TypeScript, ECMAScript (ES6), Storybook, User Experience (UX), User Interface (UI), User Interface Engineering (UIE)
  • Senior UI Developer

    2021 - 2022
    Savvy Marketing
    • Developed software to integrate Le Col cycling's website and marketing into Strava to create activity-based competitions and reward schemes.
    • Created multiple competition applications for Robinsons soft drinks, including interactive games. Work included HTML5 canvas game development and animation work.
    • Made multiple applications for Adidas sportswear to assist in marketing campaigns, audience capture, and user management for their internal communications department.
    Technologies: JavaScript, React, WordPress, SCSS, Design, Git, PHP, HTML, Shopify, 2D, 3D, ES7, Sass, HTML Email, HTML Templates, Next.js, Mailchimp
  • Senior UI Developer

    2019 - 2021
    • Created a component library to rebrand Channel 4 television's online presence, allowing consistent design across all applications.
    • Developed software applications for HMRC to assist in the management of COVID-19.
    • Designed a component library for use across all HMRC software applications to align design styles across all online applications.
    Technologies: JavaScript, React, SCSS, Git, HTML, Jest, Storybook, 2D, 3D, ES7, Sass, HTML5, HTML5 APIs, UI, UX, UI Development, UX Design, Interactive UI, Figma, Django, UI Design
  • Front-end Developer

    2015 - 2016
    • Worked for Yahoo and Cannes on a creative data presentation. Developing a web-based iPad application that allowed the easy display of digital content: requiring animation for iOS and using GreenSock JavaScript-based animations.
    • Worked on GeoVegas for the Las Vegas tourist board, utilising 360 panoramas in collaboration with Google.
    • Developed, for Balmain and H&M, an eCommerce and a multimedia application for a new season campaign, heavily utilising browser animations and high-quality asset rendering.
    • Worked on Zalando's "Share Your Sexy" campaign, using images from Instagram and third-party APIs to create user-generated content.
    • Contributed to Zalando's Ivy Park collaboration, using high-quality image assets and video in a brochure-style eCommerce platform.
    Technologies: React, JavaScript, SCSS, HTML, CSS, 2D, 3D, Sass, GreenSock, GreenSock Animation Platform (GSAP), HTML5 APIs, HTML5, Three.js, Marionette.js, UI Development, CSS3, CSS3 Animation
  • Interaction Designer

    2013 - 2015
    AIG Edenspiekermann
    • Created online cartography products for Heathrow Airport using Leaflet.js.
    • Designed and developed their studio website using WordPress and SASS.
    • Created an interactive touchscreen for the government agency, Transport for London (TfL), using the TfL data API.
    • Researched and developed mobile mapping in Heathrow Airport using HTML5 APIs and developing them into useful navigation tools for airport users.
    • Created a city map in the browser for Vancouver, Canada, using Leaflet.js and tiling techniques to create graphically rich maps with JavaScript.
    Technologies: HTML5, JavaScript, CSS, Design, Typography, HTML, 2D, 3D, Sass, UI Design, UI Development, UX, UI, Adobe Illustrator, SVG


  • Channel 4

    An on-demand TV and film application for British TV Channel 4: video streaming and content information are all available via this portal. A React Storybook component library was created to align all design elements across all related Channel 4 applications for this project.

  • Adidas Home Court Arena

    An interactive tabletop application for Adidas in Beijing that allows users to find associated marketing and product information in-store. This project led to multiple international Adidas stores utilizing the same approach to in-store promotion.

  • The Season

    A calendar application for hotel group guests to find interesting things to do in and around London. Delivering a stylish and effective tool used by many users each month during their stays within the many hotels of the group.

  • Harbour Space

    A brochure-style site for a new technology university in Barcelona, Spain. Working as a front-end developer and UI designer to create interactive pages to attract new students to the university worldwide.

  • HMRC Government Portal

    Created reusable components for all government-related sites to maintain design and user experience consistency. UI development and interaction design were vital in making this project a benchmark for government services.

  • Gravis Capital

    A Craft CMS app for Gravis Capital to display their investment portfolio in a clean, modern, and informative way. Work included CSS and JavaScript animations with a clean implementation of mobile responsive design.

  • Le Col Cycling Club

    A React and Next.js application integrated with Strava allows users to accumulate points via various exercises and competitions. This project used CSS and JavaScript animations of datasets from users' Strava profiles.

  • Applied Wayfinding

    Completion of multiple web cartography projects including interactive signage and urban mapping. Utilising web technologies to make cities more navigable and consumable to both local residents and tourists alike.

  • Patterns Brighton

    Web development for club brand Patterns in Brighton, England. A historic venue for international artists and musicians in an art deco building on the seafront. Creation of media players and online tools for music streaming, menus and artist profiles.

  • Goodwin Hartshorn

    Web presence for industrial product designers Goodwin Hartshorn who create products for clients ranging from Joseph and Joseph to Bowers & Wilkins. Simple CMS and front-end development to display products and design intent for potential clients.

  • Living Map

    Web cartography for major international cities including London and New York. Internal mapping for several airports including Heathrow in London; creating mobile, web and physical interactive signage for navigation of places and spaces.

  • David August

    Experimental typographic web presence for musician and artist David August. Direct collaboration with David to provide a very bespoke and expressive web presence to match his musical aesthetic. Mobile, web and tablet site creation.

  • Warp Records

    Creative technology project assistance for several Warp musicians and artists. Work included site development for Brian Eno, a Spotify listening platform application, and several Tumblr theme development projects.

  • Unmade

    Web development for a browser-based application that allows users to manipulate and design knitting patterns on their own devices and purchase their unique creations. Unmade also uses its technology in collaboration with major brands like New Balance.

  • East Street Arts

    Web design and development for Leeds-based arts charity East Street Arts. Utilising colour picking and palate creation technology to create a website with generative image creation from other artists' work.

  • Denisse García

    This is Cuban photographer and art director Denisse García's web platform. We utilized experimental automated color palate generation technology to create a design on the fly that always compliments the content.

  • Entourage Collection

    A web portal for the work of Entourage, a boutique event coordinator and curator. We created brochure-style content for the web and mobile devices. The focus was on minimalism and a pared-back design with inspiring photography.

  • Slashdot Studios

    The web animation for digital currency thought-provokers Slashdot.

    We created a simple holding page to precede their online web presence and implemented browser-based animations made with GLSL and modern JavaScript create a simple yet addictive motion on the page.

  • Robinsons Fruitshoot

    Parallax and user interaction-based animations for the launch of Robinsons Fruitshoot. Through interaction and mouse-play, users could win prizes and learn about the brand, creating a rich experience to entertain the user.

  • Transport for London

    A real-time, interactive mapping platform for use as a prototype for the future of city navigation. The initial prototype placed on Oxford Circus in London to test the validity of interactive software applications in the urban environment.

  • Balmain x H&M

    I developed a web application targeted at the iPad, tablets, and touch devices to promote the collaboration of Balmain and H&M. The applications contained an eCommerce component, a brochure-like section for promotion of the garments, and several video and interactive elements to promote the brands.

  • Teamable

    I built a static WordPress website with Figma. Teamable is an AI-powered recruitment platform, requiring an informative UI to present their business and individual subscription plans for the multi-tool software they offer.

  • Monza

    Monza is a racetrack of pedigree known throughout Europe and the world. While working for the agency, The George in Barcelona, we created a new design direction and implementation for the famous race brand.

  • Google Devart at the Barbican

    A shortlisted software artist for the dev art exhibition at the Barbican in London. The software created amalgamated facial images of all contributing users of the software. The focus was to use contemporary web technologies to make images as a discussion on selfie culture, privacy and technology's role in our lives.

  • Commercial Estates Group

    I handled the web development for CEG, a local estate management company in the North of England. Brochure style layouts and simple design make this site very easy to find and consume what you are looking for. The website was made with Gatsby as a way to work with a headless CMS.

  • Haseltine Lake Kempner

    An animated site for IP visionaries HLK. This was a website that was built with WordPress, utilizing animation with both CSS and GSAP to create some unique touches and a sense of excitement for the brand... plus a whole lot of color!

  • Dermoi

    I created the online presence for a health and beauty startup called Dermoi! The initial layout and interaction design were completed with additional help, i.e., giving creative direction to their development team.

  • Solidarity Sports

    A charity project to help relieve the poverty caused by the Grenfell Towers disaster in London. Along with Studio Build, we created an online tool for people to donate to and learn about how this philanthropy organization works.

  • Leeds Alumni Digital Magazine

    An online magazine for alumni of Leeds University in West Yorkshire.

    Using WordPress, I built a reusable structure to house articles, ongoing activities, and the latest news at the center for education in the North of England.

  • David Brown Automotive

    I provided developer support for the ongoing design and development of this brochure platform. Built on WordPress, the site comprises both a public-facing and client portal for sales and management requirements.

  • Blue Flowers Music

    A brochure site for London-based record label Blue Flowers Music.

    It was built on WordPress with a simple UI for maintenance. Many international artists feature on this independent label, making it a hub for local and international music culture.


  • Languages

    JavaScript, CSS, HTML, HTML5, Sass, PHP, SCSS, ES7, GLSL, TypeScript, ECMAScript (ES6), CSS3
  • Libraries/APIs

    React, jQuery, HTML5 APIs, Google Maps API, WordPress API, WordPress REST API, GSAP, SoundCloud API, LeafletJS, Tumblr API, Spotify API, Three.js, Moment.js, Shopify API, Marionette.js
  • Paradigms

    UI Design, UX Design
  • Platforms

    WordPress, GreenSock Animation Platform (GSAP), Shopify, Craft CMS, Django CMS, Google Chrome
  • Other

    HMTL5, UI Development, UI Animation, APIs, Cartography, Design, Typography, Storybook, Information Design, Processing.js, 2D, 3D, Strava, Interaction Design (IxD), Geospatial Data, Geospatial Analytics, iPad, SVG Animation, Computer Vision, Gatsby, UX, UI, SVG, CSS3 Animation, Interactive UI, HTML Email, HTML Templates, User Experience (UX), User Interface (UI), User Interface Engineering (UIE)
  • Tools

    Figma, Git, Webpack, Adobe Illustrator, GreenSock, Mailchimp
  • Storage

    WP Engine
  • Frameworks

    Jest, MUI (Material UI), Django, Angular, Next.js


  • Bachelor's Degree in Visual Communication
    2006 - 2009
    Leeds University - Leeds, United Kingdom

To view more profiles

Join Toptal
Share it with others