Video Description

Short visual portfolio

GOV.UK and Accessibility

Fading from black, the video starts showing the GOV.UK design system and demonstrating contributions to a WCAG 2.1 AA accessible accordion user interface pattern.

The video transitions to the mobile version for the “Past Prime Minister's” page on GOV.UK and demonstrates responsive design and working with legacy systems (also a reminder of when I broke production).

The White Company and Vue.js

This then transitions to "The White Company" and demonstrates Frontend of a "save for later" feature using JavaScript framework Vue.js. The user can be seen interacting with the user interface, changing colours and sizes of products and having the user interface dynamically, and reactively, update.

Next a “Burberry” E-mail is being shown, where different screens are being demonstrated for responsive design. Korean is the main language for localisation. We then see a similar E-mail for the french market on desktop. There is a hero image of two models (white women) wearing Burberry clothing.

The video then transitions to a shopping bag with one item, for “The White Company,” where items can be “saved for later” with interactions and icons appearing to provide feedback for the interaction.

Next shows a shopping basket for "The White Company" on mobile, demonstrating a mobile basket built in Angular.js. This mobile basket is at the bottom and opens and closes as the user interacts.

Next, demonstrates responsive design for a personal portfolio project. The gradient colours of the website change depending if they are on a desktop, tablet or mobile using media queries. An "IKEA" E-mail that is an orange, interactive "O2" business E-mail in blue is shown next.

General Frontend Development

Then “London Sperm Bank” is shown, the Design followed by the coded desktop version.

The video then transitions into hyper-personalised “Virgin Trains” E-mail with a red colour scheme. There is an interactive spinning wheel for the user to select a day-time activity they can do.

Then there is a “Trainline” E-mail with hyper-personalisation then a quick flash of a "Nissan", "Sainsbury's", "Vodafone", "Land Rover", "Sky" and "eBay" responsive E-mail. The "eBay" E-mail is in German.

React experiments

The video then transitions to a React.js chat app with a blue colour scheme. The user can be seen typing a message and this appearing as a chat bubble.

Transition to show work on the "River Island" homepage and then an interactive Adobe Flash Action Script 3 mobile game with a helicopter.

Middlesex Association for the Blind

Next is a poor quality screenshot of "Middlesex Association for the Blind" YouTube channel, as well as "Aspers casino" homepage.

Next, E-mails from "Kurt Geiger", "the National Lottery", "Disney" E-mails are quickly shown.

Accessible cookie banner

Next is another version of the “River Island” homepage. An accessible cookie banner.

The video then shows different colour variations for GOV.UK accordion accessibility testing. Then a COVID page on GOV.UK is visible demonstrating some accessibility errors highlighted with VoiceOver on macOS.

API integrations

Transition to an API driven colour based selection for clothes. The user selects the colour and then the frontend interface surfaces products that are that colour. This is interacting with a API to send and return relevant data. The left is the development version on the right is the production version.

Transition to a homepage of 2013 “The National Lottery” in review and a lotto pages that shows winners on a UK graphic, both meet WCAG 2.1 AA. Then we see internal promotional assets.

Design & Creative coding

The video finishes with a single page portfolio with a background video, an interactive canvas.js effect that shows connecting dots linked to the mouse. The user then opens the menu to reveal some copy that reads “Hey there, I'm Chris and I make websites and E-mails. Available for freelance."