Website design and development

Since creating a GeoCities website in the early 2000s, I have had a keen interest in website design and then into website development. In 2010, I began producing websites freelance for local businesses and charities, later expandeding into other areas including a museum, a dance studio, a business management company and a sign language teacher. Then, in 2019, I started a full-time job as Front-End Website Developer for a Students' Union, whilst continuing freelance work and exploring back-end development.

A mockup of a laptop on a desk displaying a website design. The graphics on the webpage are space related, planets and asteroids etc, and the banner reads 'Find your space at Kent'. This was the landing page for the Kent Union Virtual Welcome Back Fair 2021.

Kent Union

May 2019 - Present

In May 2019 I was hired by Kent Union as a Website Designer; Kent Union are the Students' Union for the University of Kent which is where I graduated from five years before. Six months in, I discussed with my manager the potential I saw in the role and we amended the role to become a Front-End Website Developer.

Over the past four-plus years I have redesigned the website from the ground up primarily using the Bootstrap CSS framework. During this process, I have introduced new features and increased accessibility across all areas of the organisation, as well as creating and continually improving our online brand and identity.

  • Black History Month 2023

    September 2023 - Present

    Liberation months at Kent Union are very important, and aim to celebrate marginalised individuals, groups and cultures that are vital threads in the tapestry of our university community. The webpages themselves have also lend themselves to allowing me substantial creative freedoms to design and develop impactful, celebratory hubs.

    After several successful micro-site deliveries over the past year, I felt it was right that these pages also had their own identity within the Kent Union network of websites that I have created. From a technical standpoint too, these micro-sites don't carry the baggage of the primary site, so can be both very light and very customised.

    Beginning with an impactful GSAP3 hero artwork, entirely animated with a single line of JavaScript (and one to speed it up by a minute...), which also served as the plasma-screen animation on campus screens, and finishing with a complex combination of an intersection observer, card-columns and filters. The page has received wide positive responses, for both design and content. It really has set the bar high for this year's next pages.

  • KU Praise: Reps

    June 2023 - Present (Launched September 2023)

  • SU Network

    June 2023 - Present

    A rebrand of SU Network took place during Term 3, culminating in a new website being developed and fully deployed in September 2023.

    The new brand assets, such as radial gradient meshes, were an interesting challenge - especially once responsiveness is taken into account. A one-page design, the Waypoints JavaScript library was useful for allowing clean quicklinks down the page and updating the URL. A custom intersection observer was also subtly implemented for on-scroll fade-in effects.

  • Summer Ball 2023

    March 2023 - June 2023

    A recurring project, this short-term, event-based website has the purpose each year to create a hub for Summer Ball information in it's own, branded space.

    Having made micro-sites in the past, the last couple of years a single-page design has been used to keep all the information in one place, with the navigation quicklinking down the page. In a clear blue and pink colour scheme with CSS animated SVG strokes in between sections, the branding was very much in the details too with accents placed above jiggly letters.

    One of my favourite features to develop was a new JavaScript gallery; by taking the images from DOM into an array, shuffling them and then showing 12 at a time, with a 'show more' button underneath, it keeps the page length shorter initially whilst having the content accessible for those who wish to view it. The shuffling also helps keep the page feeling fresh for re-visitors. After creating the gallery I have used it in many other projects too.

  • Lead Kent

    November 2022 - Present

    Completely apart from the regular, more corporate design, this year's election campaign is one of distorting the norm, attempting to disrupt and catch attention to drive engagement.

    Taking the brand concept from the graphic designer and turning it into a detailed one-page website was a fun challenge with less than a month turn-around from inception to delivery of phase one. My take on one-page, low-content designs is to leverage empty space to help tell the story too, so I created spray-can SVGs and used bold, full-screen sections of the three-colour pallet to separate sections.

    Unexpectedly, but to maintain brand consistency, I also designed the collection of Word documents for the Rules and Regulations, Role Descriptions and Candidate Pack. Seeing a brand come to life in a small amount of time is very satisfying and I enjoyed exploring possibilities throughout the election process, including the candidates layout, nominating and voting pages, plasma screen countdowns, email templates, live voting statistics and the results PowerPoint presentation.

  • KU Wiki

    October 2022 - Present

    A proof of concept for Shelf Wiki, this subdomain houses all of the assorted user guides and frequently asked questions that were scattered around various locations and drives. Imagined as a bookshelf, the guides are nested within Books, Chapters and Pages.

    Behind a login wall, this PHP CRUD app utilises Markdown to maintain styling consistency throughout, regardless of which user adds content. Eventually, the aim is to link the authentication with our Google Workspace SSO to further reduce barriers to access for staff.

    At the core, the user facing side of KU Wiki is a single PHP page, with recursive URL segment checking to deliver the correct page. A nested accordion menu acts as the user navigation throughout these layers seemlessly, and the menu is open for whichever page is currently active. Depending on permissions, the user can view an administration area for the creation of Books, Chapters and Pages, with quick links in each area throughout to creation or editing.

  • KU Intranet

    October 2022 - Present

    A PHP CRUD app, this is a signposting website with key-up search and category based filters. An administration area behind-the-scenes is available to manage resources, categories and users.

    To avoid a barrier for staff the primary area of the website is "publicly" accessible, as all resources linked away require their own authentication anyway; it is purely designed to gather the widespread and sometimes siloed resources that are available to staff in one place. Administrators can log in and manage the resources from a custom back-end.

    I also developed a Notes system, to display schedulable alerts at the top of the page. This system required an interesting implementation of a FontAwesome icon chooser and quite specific SQL for the scheduling, and was an interesting additional solution to create.

    Behind the scenes, there are now additional areas for managing all other KU apps that I've been developing, all in one central location, along with administration of user accounts, permissions and more.

  • KU Praise

    May 2022 - Present (Launched December 2022)

    A proof of concept for the P2Praise system, it has been used over 600 times by team members praising and thanking each other in the first year since launch. Some managers have used it to Praise their team, and vice versa, but predominantly it has been staff using the system to reward their colleagues for their time, energy and going beyond.

    The solution has received universal commendation from peers, management and organisation leadership; and from first-hand experience of receiving the Praise email during a negative start to a day, it really can make a huge positive difference in productivity and feeling appreciated.

    A completely solo project, this PHP system combines a PHPMailer multi-recipient loop with an SQL database - simultanously adding the submissions to the Praise Wall and emailing the recipients with a bespoke email each. I also designed all of the accompanying affirmations and graphics, and the branding for this system was then used across KU Intranet and KU Wiki that were developed after to create a truly cohesive environment.

  • HelloKent

    July 2022 - October 2022, July 2023 - October 2023

    Above and beyond the normal HelloKent offering, this year I've developed a fully animated microsite. Our graphic designer created several beautiful illustrations and I brought them to life using GreenSock's GSAP 3 animation library.

    Featuring some complex SVG management and several hundred lines of JavaScript, this single-page design utilises several GSAP techniques such as timelines and ScrollTrigger. The hero graphic is time dependent on whether the visitor sees the day or night animation and both have a desktop and mobile version for responsiveness.

    Each section also uses several timelines each with their own ScrollTrigger: one for onEnter and onEnterBack navigation setting, one for each sub-section (such as information, FAQ and Instagram feeds) and embedded within each sub-section is another, smaller graphic animation timeline too!

    This website was updated and improved for HelloKent 2023

  • Canterbury Varsity

    March 2022 - April 2022, March 2023 - April 2023, March 2024 - April 2024

    This short-term but recurring event-based project is a WordPress website with additional functionality provided through both plugins and several social media developer tools. The project had an initial turn-around back in late 2021 of around 6 weeks, from domain setup, Cloudflare SSL, WordPress installation, Google Analytics and holding page happening within just a couple of hours.

    A collaborative effort between the Students' Unions at the University of Kent and Canterbury Christ Church University, this website has been the central location for updates for the week of Varsity events for now three years. With inspiration from the BBC News live-reporting of sporting events such as the Olympics, the design was minimal to allow the rolling content updates to take the stage, integrating a Twitter/X feed for updates and a Facebook-fed events feed for the calendar.

    From a staff perspective, only being required to enter information once and using familiar tools was important to saving time during a very busy week for their Activities teams - utilising social feeds for live updates are a big part of this. For the 2024 revamp, given the instability around Twitter/X and the growing audience share and functionality of Instagram, we've pivoted platforms.

    This website was updated and improved for Canterbury Varsity 2023 and 2024

  • Kent Clothing

    February 2022 - Present

    It's not every day a Students' Union decides to start a clothing brand, but that's exactly what happened at Kent Union.

    Previous to becoming a Co-op franchise the on-campus shops used to sell university branded hoodies etc, but as they are not Co-op products that had to stop. Instead, our graphic designer created the new Kent Clothing brand and we have used a combination of Shopify and Zettle by Paypal for the stock management, finances and website.

    Shopify as an all-in-one solution felt just like an EPOS-oriented WordPress, with many similarities in the website building framework. Choosing a simple and clean template meant stamping our brand was easy and allowing the products to sell through heavy use of imagery and minimal text maintained a fresh style. The hardest work was behind the scenes, setting up products, VAT, EPOS folders and categorisation. Starting from scratch, however, means I was able to create a logical and maintainable database of products that fits the retail team's requirements for on-going stock management.

  • Oaks Nursery

    March 2020 - Present

    Formally a WordPress site for many years prior to my employment I found the website was never updated by anyone other than the Web Team, therefore the value of a separate CMS was irrelevant. Instead, to gain the functionality of our organisational CMS, I designed and developed a from-scratch Bootstrap 4 website hosted on the back of the Kent Union website.

    One of the primary advantages to joining to our CMS was the advertising of new careers positions when they became available, which our HR team manage through the CMS already; now the team can list positions for the Nursery directly on this website instead of requiring a banner that redirected visitors away to an unfamiliar second website.

    More recent developments at our CMS provider will now allow us to create a subdomain for the Oaks Nursery website whilst still maintaining CMS access.

  • SU Network

    February 2018 - July 2023

    Designed and developed previous to my employment in 2019, I adopted the management of SU Network and until the end of 2021 this usually only meant minor text and file changes.

    In Spring 2022, I carried out both an accessibility and SEO audit of the Kent Union website before rolling out changes across our other websites too. For SU Network this involved developing functionality for individual page titles, meta descriptions and meta images to improve the SEO. I also uncovered some slightly unorthodox file management, so improving this went into backlog.

    Unfortunately, due to a compromised shared hosting package with our third-party provider on the last day before winter break, I had to rebuild the website on a new platform from the ground up in early 2023.

    Due to a rebrand of SU Network, I created a new website which replaced this one in July 2023.

Shelf Wiki

In development

The idea to create Shelf Wiki was borne of an unmet need in simplicity versus open source solutions for a Wiki. Solutions myself and a colleague looked through either required a complex set up beyond the requirements of our workplace, knowledge of libraries we don't have or, the most frustrating, is their code was bloated with unnecessary obfuscation for what should be a simple task.

Based on a bookshelf, the concept is that a shelf can contain many Books, which each contain many Chapters, which each contain many Pages. This parent/child relationship is realised through three tables and ID relationship matching. The Page content is written in Markdown, stored in the database and then parsed into HTML on delivery.

With simplicity in mind, the whole user-end of the Wiki is delivered in a single PHP file, which recursively checks URL segments for corresponding Books, Chapters or Pages before delivering the relevant database content.

P2Praise

In development

A peer-to-peer Praise system, this side-project was to help with Reward and Recognition in an organisation. As a staff representative at my place of work, this topic was regularly on our agenda and after some insightful conversations I envisaged this possible solution.

The second full-stack PHP CRUD app I've developed, my aim was that a user could choose an affirmation and select the recipients from a departmentalised list, and optionally add their name and message, in less than 30 seconds; upon landing on the homepage, the form is immediately available to send Praise to achieve this.

Once sent, the recipient enjoys a designed email sent straight to their inbox and the Praise is added to a Praise Wall too. The Praise Wall shows all Praise given to everyone and can be filtered to show only one individual or a department; these Personal or Department Praise Walls are also accessible via direct link using URL parameters. Behind the scenes there is a tiered administration access area, with custom CMS for Praise, Staff, Departments, Affirmations and users.

I also designed all the graphics throughout, creating over 40 initial affirmation choices. These affirmations create a core set and I envisage seasonal, time-limited or company-related/project-specific affirmations can be dropped in and out easily too.

  • KU Praise: Reps

    June 2023 - Present (Launched October 2023)

  • KU Praise

    May 2022 - Present (Launched December 2022)

Makaton to Music

July 2021 - Present

A not-for-profit solo project, Makaton to Music aims to let their students have some fun and learn some Makaton signs through popular songs. Daily users are likely to be from a Special Educational Needs or Disability (SEND) background, so accessibility and tablet-friendly design was paramount. In person, these students are also familiar with a choosing board so the layout is reflective.

The first PHP CRUD app I have developed, this website initially began as a single-page manually updated card-grid. Once the common requirements settled, I moved the client from a Google Sheet to a MySQL database accessed through a custom Content Management System on the back of the website. As the collection is continually growing, the client can now add, update, hide and remove cards themselves from here as well as managing tags, coming soon and release dates.

Makaton to Music is also a brand I developed from scratch to the clients requirements, from colour scheme and font choice, to logo and video ident. To assist the client off-website, I additionally created a YouTube video-thumbnail maker that takes two inputs (song title/artist) and appends this to a HTML5 canvas element, with a choice of branded backgrounds via a toggle.

  • Advent 2022

    October 2022 - December 2022

    In addition to the existing system, I created functionality for separating a selection of new releases onto their own Advent page. The client could display the release date and an advent calendar "door" image until ready, when, at the click of a button, it would reveal the song and video link.

    With a well-known target audience, a bit of whimsy was added with a tiny line of JavaScript to randomly shuffle the calendar on page each load - making it like a physical chocolate calendar where you need to search for the day's door. Additionally, the existing description field was leveraged for festive questions for the students to answer in class each day.

    After the festive period, the client only needed to toggle a single field for each song to release them into the normal, year-round collection - leaving the system in place to be used fresh for the following year.

Harwich RDF Tower

June 2021 - Present

A first foray into WordPress on a production website, the client is a curator of a new museum in Harwich, Essex.

Studio 86

September 2017 - Present

A growing dance studio in Derby, the client required a website to display their classes, timetable and take uniform orders.

Greenwich and Kent Students' Union (GKSU)

August 2020 - July 2021

The University of Kent and University of Greenwich, along with Canterbury Christ Church University, all share a Medway university campus in Chatham, Kent. Several years ago, the Students' Unions for Kent and Greenwich joined together to offer centralised services on the Medway campus for students of either university and it was operated primarily by Kent Union.

In early 2020 it was decided that GK Unions, as it was then, was going to re-brand itself and their system migrating from the Membership Solutions Limited (MSL) system to Students' Union Management System (SUMS) - the same system that Kent Union uses. In order to do all of this, a whole new website needed to be created from scratch.

Cronin Management Services

August 2018 - October 2018

Coalhouse Fort Project

August 2010 - January 2020

Venkat Health Centre and Tulasi Medical Centre (NHS)

2010