Rebuilding Canucks Kid's with modern technology

July 2015
front-end code
mockup of the website

This was one of my projects while I was contracting as a Jr. Front-end Developer & Designer for Canucks Sports & Entertainment. The Kid’s Club site had been built 4 years ago, my job was to rebuild the website from scratch using modern technology. To rebuild the site, I used Node.js, Koa.js, Gulp, and Susy.

The challenge was to improve the experience of the old site while still using the same creative assets and design. To improve onto the original static and non-reponsive site, I:

  • made the site fully-responsive;
  • added a responsive navigation bar;
  • added animations (menu icons wiggle on hover, navigation items show a green bar on hover, etc). As a user clicks through the nav bar, icons swoosh in and out according to what is clicked. For example, if the user is viewing content, such as colouring pages, and clicks on “printables” in the nav, the content will swoosh out and the menu icons will swoosh in, letting the user then chose from “Mazes”, “Coloring pages”, and “Word Scrambles”;
  • built the footer to be consistently present throughout the whole site.

If you'd like to do a maze or two visit