Portfolio of front-end developer

FE Framework

Tech:

HTML5, CSS3, SASS, JS (ES6)

Support tech:

Webpack, Babel

Ideologies:

B.I.O (ITCSS/OOCSS/BEM)

Date:

2018

View Example

Details

In order to effectively build and maintain sites, a strong frontend foundation is required. One that is scalable, easy to learn, and maintainable. CSS might be simple to pick up, but it has been subsequently underestimated, resulting in code bases haphazardly put together without forethought.

I have worked in agencies using BEM and ITCSS, and have found each effective in their own right. I did further reading on OOCSS, and then BIO. BIO - the combination of all three - appropriately filled in what the others, used on their own, lacked.

This framework is up on my Github repo for anyone to peruse, and includes an HTML boilerplate to show how these classes can be applied.

This online portfolio was built using this framework, and further extended with some custom components and functionality.

Site for actor Daniel Watterson

Tech:

HTML5, CSS3, SASS, JS, PHP

Support tech:

Gulp, Wordpress

Date front end:

2017

Date back end:

2018

Note: Currently in production phase, request access information below.

Request access

Brief

Daniel Watterson is a Kiwi actor needing a web presence to showcase his growing accolades, and provide some background information for prospective employers.

This project has been in the works for some time, with the front end having been initially built in 2017 as a static site. This year it was decided a full CMS would fit better, allowing continuous updates to content and full flexibility. It is close to completion while content is added, and available to view on request.

The site uses Wordpress's advanced built in functions, along with plugins like ACFs, to create a robust and scalable site.

Each page has space for SEO information, and the power to choose from five different, bespoke templates, along with several unique components.

Spotlight UI Gallery

As an actor, artist, and model, a well planned, interactive, and professional gallery was essential to Daniel's needs.

Built to his specification, this bespoke gallery template allows for an image carousel as the header, and a divide of projects to clearly distinguish headshots from performance stills.

Big Brand Ideas Projects

A small showcase of some of the projects I worked on during my time at Big Brand Ideas.

SAS Daniels Landing Page

SAS Daniels secured a report on commercial property in areas around the U.K., and wanted to display these statistics on an interactive landing page.

This works as a template within their higher Wordpress structure, but is mostly run by Javascript. Using the Google Maps api, you can select the town you want to view from the map on the marker or the dropdown box, and the content updates to that town/city.

Tech:

HTML5, CSS3, jQuery, Javascript, PHP

Support tech:

Wordpress, Google Maps Api

Date:

2018

View Landing Page

Beyond

Beyond CC is a cryptocurrency site. BBI worked on the branding, message, and creative, in addition to building the site. The back end was built using Drupal, and the front end was a mix of bootstrap and bespoke. It uses an ITCSS/BEM methdology for a fully reponsive, interactive experience.

I worked on several of these components, along with working on the back end, to bring it more in line with the branding vision.

Tech:

HTML5, CSS3, jQuery, PHP

Support tech:

Grunt, Drupal, Bootstrap

Date:

2018

View BeyondCC

Coface

CofaceUK is a credit insurance company with global outreach. BBI refreshed the branding and built a new, bespoke site.

I was a principle developer on this site, working on the front end and building some of the back end as well.

Tech:

HTML5, CSS3, jQuery, PHP

Support tech:

Grunt, Wordpress

Date:

2018

View Coface UK

Site for The Sloth King

Tech:

HTML5, CSS3, SASS, jQuery, JS

Support tech:

Webpack, Metalsmith, Handlebars

Date:

2016

View Website

Brief

The Sloth King is a passion project. A character created to use on resources to help struggling souls. Illustrations, comics, inspiring quotes, and resources for those struggling with their mental health.

As I manage the site, it made sense to build a simple static site generator. I used Metalsmith and Handlebars to create this.

This is one of my earlier projects, used BEM CSS3 and jQuery.

Spotlight UI Quote Generator

Inspiring quotes are a favourite thing to include in self help resources. I wanted to go one step further, and incorporate a fun UI component.

The textbox is created using CSS, and the quotes were listed in JSON format. There are four categories the user can choose from, and the quote will be randomly selected from them.