Hi!
I'm Mark
Alexander Holden.

Close

React Music Library

React, Firebase, Netlify, Bulma, Spotify API

This project came out of an issue where each time I went to a music store to buy some new CDs (old-school, I know) I would always forget what I had in my collection and what I wanted to get. So to solve this, I decided to build a library where I could list what albums I had and what albums I wanted. I chose React as the framework to build this to practice my skills with, and to link it up with Firebase for data storage, Netlify for hosting and serverless functions, and the Spotify API for all the artist and album data. Bulma was used for the styling and layout so I could focus on functionality of the app. This currently doesn't take advantage of React Hooks and use Redux for storage.

I created a set of functions on Netlify that would act as the inbetween point for the client side, the Spotify API and firebase. On Firebase I store minimal references for artists and albums, such as IDs, and then these are used to request full datasets from the Spotify API.

As this is publicly available, I've implemented a lock so that it can't be easily messed about with.

View on Netlify

Close

Joanne McClung Portfolio

Laravel, Javascript, VueJS, React, Bulma

I was asked to create a portfolio website for Joanne from designs shes had created to show off her skills and work. It needed to be fully dynamic so that she could continually add and edit work to it

Using VueJS for the front end provides a number of benefits, including being able to quickly create interactive experiences and a navigation experience that doesn't refresh the page and break user flow.

For this project, I decided to use Laravel for the backend and VueJS for the front end with a custom built API linking the two together. A admin area was also built using a mix of vanilla JS and React and styled with Bulma.

View The Site

Close

JS Countdown

Vanilla JS, HTML

One of the issues I faced during a campaign with N Brown would be the usage of a countdown timer across the sites. I found the currently used solution contained bugs and wasn't always straightforward to set up

In order to correct this (and make my life easier) I decided to develop a countdown from scratch using vanilla JS. As a result, this new solution has been used to great success in various campaigns that required a timer (and I have fewer bugs to fix!).

View on Github

Close

JD Williams International Women's Day Campaign.

VueJS

For International Women's Day 2019, I was brief to create an interactive page that highlighted the history of Women's rights throughout history, and an alternative timeline based on The Handmaid's Tale.

I was given the PSDs for each slide and an outline of how they would fit together. To my knowledge, no JS Framework had been used on the sites before so this was a first for using VueJS on JD Williams (and a first for me to create a commercial page with VueJS).

Using VueJS allowed me to quickly fit together the slides along with making the page interactive and engaging.

View The Campaign

Close

Simply Be x Coppafeel!

Vanilla JS

To promote Simply Be and Coppafeel! partnership, a new campaign page was built to highlight the new lingerie range available and that each purchase from the range includes a donation towards the charity.

One of the requirements of the build was to include a sticky scroll pattern for a more engaging user experience, where one half would stick to the top and the other half would continue to scroll normally.

I decided to use vanilla JS for this and wrote out the required logic that responds to the users scrolling action and fixes the scrolling element to the screen as required. In theory I could have used the CSS property "position:sticky" but this is not fully supported (IE11) and this needed to be cross-browser compliant

View The Page

Close

Simply Be Fancy Filter

Vanilla JS

An A/B test was designed with the intention of improving the product filter experience to be a more engaging experience and as a result increase conversion rates. This new "Fancy Filter" would be applied across all devices (mobile, tablet, desktop) and active on the Shoes and Dresses categories.

Currently the standard filter functionality is a left-hand navigation and it was deemed that improving the filter interface, add to bag sales would increase. I was given a set of designs and functionality requirements to build this within Monetate.

One of the main difficulties of this was keeping hold of user progress and filter selections, plus allowing the user to move back and forth across "pages" - the available infrastructure at the time didn't have such ability baked in (when a user filters, the entire page content would be ajaxed in and replace the current content).

By taking advantage of this, I set up a custom global state manager to track user selections across filter pages and achieve the desired technical requirements.

As a result of the build and the test being run for one month, there was a roughly 5% increase in conversion rate compared to the original standard filter.

JS Black Jack

Vanilla JS

Loosely based on a card game I learnt during college, I decided to build this to test my JS skills in creating and managing a game involving views, various rules and AI. I'm quite proud of how far I've managed to get it so far and it is in a fully playable state now.

It is a regular work in progress as there are some game rules that are yet to be fully implemented, including the ability to play multiple cards. I also intend to update the view with some more dynamic animations.

For compiling assets, this project has used Parcel.

View on Netlify