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

Software Developer in Leeds, United Kingdom

Member since February 1, 2017
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 independents and enterprise businesses alike. Recent projects include work for Adidas, HMRC, Channel4, East Street Arts, Le Col, David August and Robinsons Softdrinks.
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



Leeds, United Kingdom



Preferred Environment

JavaScript, React, WordPress, SCSS, Webpack, HTML

The most amazing...

...thing I've done was 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
  • 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
  • Senior UI Developer

    2019 - 2021
    • Created a component library to rebrand Channel 4 television's online presence, allowing consistent design across all applications.
    • Development of 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
  • Front-end Developer

    2015 - 2016
    • Worked for Yahoo and Cannes on a creative and data presentation. Developed a web-based iPad application that allowed the easy display of digital content: it required animating skills for iOS and the use of GreenSock JavaScript-based animations.
    • Worked on GeoVegas for the Las Vegas tourist board. Learned how to use 360 panoramas in collaboration with Google. Developed my skills interfacing with Google products.
    • Developed, for Balmain and H&M, an eCommerce and a multimedia application for a new season campaign, heavily utilizing browser animations and high-quality asset rendering and loading in JavaScript.
    • Worked on Zalando's "Share Your Sexy" campaign, using images from Instagram to create user-generated content and third-party APIs on projects.
    • Contributed to Zalando's Ivy Park collaboration, using high-quality assets and video in a brochure-style eCommerce platform and large imagery and video loading and management in JavaScript.
    Technologies: React, JavaScript, SCSS, HTML, CSS, 2D, 3D, Sass
  • Interaction Designer

    2013 - 2015
    AIG Edenspiekermann
    • Created online cartography products for Heathrow Airport using Leaflet.js.
    • Designed and developed their corporate website using WordPress and SASS and paying close attention to the typography.
    • Created an interactive touchscreen for the government agency, Transport for London (TfL), using the TfL data API and integrating it into the maps of the city; used consuming APIs and worked with the graphics onscreen.
    • Researched and developed mobile mapping in Heathrow Airport using HTML5 APIs and developing them into useful tools for airport customers.
    • 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


  • 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

    Cuban photographer and art director, Denisse García's web platform. Utilising experimental automated colour 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. Brochure-style content creation for the web and mobile devices. Focus on minimalism and paired back design with inspiring photography.

  • Slashdot Studios

    Web animation for digital currency thought-provokers Slashdot. Creation of a simple holding page to precede their online web presence. 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. Initial prototype placed on Oxford Circus in London to test the validity of interactive software applications in the urban environment.

  • Balmain x H&M

    Development of a web application targeted at 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

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

  • Monza

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

  • Google Devart at the Barbican

    Shortlisted software artist for the dev art exhibition at the Barbican in London. 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

    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 headless CMS.

  • Haseltine Lake Kempner

    Animated site for IP visionaries HLK. Website built with WordPress, utilising animation with both CSS and GSAP to create some unique touches and a sense of excitement for the brand... plus a whole lot of colour!

  • Dermoi

    Creating the online presence for a health and beauty start-up called Dermoi! Initial layout and interaction design completed with additional help provided to their development team for creative direction.

  • 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 organisation works.

  • Leeds Alumni Digital Magazine

    An online magazine for alumni of Leeds University in West Yorkshire. Using WordPress to build a reusable structure to house articles, on-goings and latest news at the centre for education in the North of England.

  • David Brown Automotive

    Providing 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.


  • Languages

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

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

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

    WP Engine
  • Other

    UI Animation, Design, Typography, Storybook, Information Design, Processing.js, 2D, 3D, APIs, Strava, Cartography, Interaction Design (IxD), Geospatial Data, Geospatial Analytics, iPad, SVG Animation, Computer Vision, Gatsby, HMTL5
  • Frameworks

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

    Git, Webpack, Figma


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

To view more profiles

Join Toptal
Share it with others