Maggie Burton is the current councillor-at-large for the city of St. John’s.  I did some work for her municipal election campaign’s website and it ended up being my largest web project. Of course this came with some challenges, but right from the get-go a simple text change proved to be nearly impossible.

Site 0.0 – ???

When I was first asked to edit the site I thought it was going to be a quick and easy job. Simply change some text here and there and we’re good to go. However when I got access to the cPanel and tried pasting some new words into the containers, they weren’t resizing with the new text like they should. I’ve never seen this happen before and it looked like each container had some sort of unique ID, I used Google Chrome to check out what was happening and I noticed there was a proprietary script that set sizes for each platform, when resizing the page it resizes each div to the correct value. This is because it was made with some sort of website builder I’ve never heard of. So instead of giving up on adding new content I used Google Chrome once again to figure out the colours, fonts, margins, padding, ect of each div and translated that into bootstrap.

Site 1.0 –  We have the Technology

After moving all the old content to a folder, I started working on the new site by getting the names of the fonts, the sizes of margins and paddings, and colours of the sections through Google Chrome’s developer tool.

Also changing some things by request like moving the Social Media buttons, adding a platform link, and removing the bezel around the picture. As well as shrinking the top section while still keeping it prominent. Here is the before and after ( notice the cleaner organisation 😉 )

Another thing they wanted changed was the Get Involved section. It involved 3 types of media.

    1. Maggie’s Twitter Feed
    2. NationBuilder Links ( Where they order lawn signs, count votes, ect. )
    3. Maggie’s Social Media Links

That site was up for a bit on it’s own, until they needed a home for their platform.

Maggie’s Platform

Maggie’s platform consists of all her stances on many topics. Breaking it down there’s about 7 sections and 48 topics. Originally all of this information was in a WordPress. The platform was to be a part of their site and represent Maggie’s focal points. I made this page in Bootstrap 3 as well, with some JavaScript per page to enlarge the text div for the visually impaired.

$( "#enlarge" ).click(function() {
  size = $( "p" ).css( "font-size" );
  size = parseInt(size, 10);
  if(size == 30){
    $( "p" ).children().css( "font-size", "18px" );
    $( "p" ).css( "font-size", "18px" );
    $( "#enlarge-text" ).text("Enlarge Text");
  } else {
    $( "p" ).children().css( "font-size", "30px" );
    $( "p" ).css( "font-size", "30px" );
    $( "#enlarge-text" ).text("Normal Text");

All this code is doing is select the enlarge button, then find the current font size, then check if it’s greater or less than 30, and finally set the paragraph tags fonts to that value and invert the button.

The platform all in all took about 4 hours to completely convert everything and maybe another 2 to develop the templates. You can find it here.

Visit the site final here:

Maggie’s WordPress

Image result for maggie burton st. john'sLater after the campaign was over Maggie requested a wordpress to host some of her ideas. I set up this simple site pretty quickly following a tutorial. I never used wordpress before that, but I’m pretty impressed with how simple and functional it is! You can find that here.



EC Delivery is a delivery founded by some friends of mine in Timmins Ontario. I made their website using bootstrap 3, the google maps API, and I also coined the phrase “When the job gets tough, we deliver.”

The site was to be small and effective. The service mainly relied on a few selling points so they settled on this simple FontAwesome icon section to describe what they were about.

It was a bit of a pain to get the title page to look presentable on all platforms as the background has two faces that should be seen everywhere… But the real challenge was creating the Javascript quoting system as I didn’t have much prior Javascript experience especially the google maps API.

Everything was fairly simple to program, but it was a bit hard to phrase the UI correctly so users could easily enter information about their town without confusing the app. I ended up settling on the line:

Please enter information in this order: Address/Street, City, Province

This is above the first field, logically drawing your eyes to it and easily tells clients how to enter their info.

Other than that the other little touch I found interesting was to put the whole team at the bottom in uniform, along with the Delivery Appreciate. This adds a whole human element to the site and pulls it all together at the bottom.

Visit the site

I had a lot of fun making this site and it taught me a lot about practical Javascipt programming with simple APIs, as well as logical website structure.

Making Warhol 2017 with Three.js and Blender


Andy Warhol is known for his paintings of the various Campbell’s soup flavors, and known for propelling the pop-art movement known for its use of bright colors and hip images. Warhol is regarded as one of the most recognizable artists of the 20th century.

Part of his artwork of Campbell’s soup cans was the idea of repetition, and mimicked the industrial production of food characteristic of the time. Simply painting the cans meant Warhol could paint 32 cans and have them nearly identical. The idea of Warhol 2017 was to take a 21st century approach on this work of art.

Making the Cans

I began with modeling the cans in blender, going off the original paintings for reference, at an orthographic projection to allow for accurate measurements. The cans in the painting were slightly tilted so I tilted mine as well to see if I could get it to have the same  proportion exactly.

Next I unwrapped the UV coordinates for the can using the smart UV project (which is very powerful if used correctly). Then flipped the UVs for the can’s face so it can easily be added within blender.

The aspect ratio for the label was the same as the image because I used it as a reference, so it was just a matter of taking the label from the original painting and pasting it on.

Using three.js

three.js is a lot of fun to use. It gives you a lot of freedom along with a bunch of cool prefabs, this project taught me how easy it is to make the web do cool graphics.

The final result!

I had a lot of fun making this, I could have optimised the page to show more cans and have different variations for different flavours. Maybe I’ll improve it in the future. All in all I got 100% on that final art project.