Portfolio of front-end developer

Jamie Watterson

Hi! I'm Jamie,
a web developer based in New Zealand.

I love making things, and have been coding sites since I was 13. HTML, SASS, and Javascript are my bread and butter.

I like clean code, accessibility, CSS3 animations, and ES6.

My portfolio is built on a BEM/ITCSS/OOCSS framework; you can view it on GitHub.

Want to see more? View my work.

Want to know more about me and the tech I use? Click here.

Case Studies

A few examples of my work for you to peruse.

Close work

FE Framework

Custom front end framework
Support tech:
Webpack, Babel
View Example


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

Site for actor Daniel Watterson

Support tech:
Gulp, Wordpress
Date front end:
Date back end:

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

Request access


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.

Gallery for site of actor Daniel Watterson
SAS Daniels Commercial Property Landing Page

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.

HTML5, CSS3, jQuery, Javascript, PHP
Support tech:
Wordpress, Google Maps Api
View Landing Page


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.

HTML5, CSS3, jQuery, PHP
Support tech:
Grunt, Drupal, Bootstrap
View BeyondCC
BeyondCC website
Coface website


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.

HTML5, CSS3, jQuery, PHP
Support tech:
Grunt, Wordpress
View Coface UK
The Sloth King - a resource hub

Site for The Sloth King

HTML5, CSS3, SASS, jQuery, JS
Support tech:
Webpack, Metalsmith, Handlebars

View Website


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.

Sloth King quote generator
Front end framework example

FE Framework

Static site generated using front end technology
Site of Actor Daniel Watterson

Daniel Watterson

Custom Wordpress theme, front end development, design
Work at Big Brand Ideas


Web developer on for various UI & projects
Site of The Sloth King

Sloth King

Static site generated using front end technology

More About Me

I have a Bachelor of Design with Honours from Massey University. I like to draw things.

I love fantasy novels, technology, video games, music, and the outdoors. Want to get in touch? Hit me up.

Jamie does tech. Photos not so much.
Error: Face not found

Primary Tech


Secondary & Support Tech

  • Webpack, Grunt, Gulp
  • PHP & Wordpress development
  • Git (command line), Source Tree
  • React, Angular, jQuery
  • Metalsmith, Handlebars
  • Adobe Photoshop & Illustrator, Affinity Photo

Other Skills

Because I'm not just all about dev'ing.

  • Design
  • Illustration
  • Japanese & English
  • Project Management
  • Event Management