System: CSS (SASS)

M.arq

Discover. Redefine. Hair.

Check out the website here!
  • CSS (SASS)
  • HTML
  • Javascript (JQuery)
  • PHP

Project Overview

M.Arq is a Salon and Hair styling business that offered me the opportunity to create a website and storefront for their business.

In order to create their website I had to integrate the Woocommerce plugin as well as the Square plugin to link any and all inventory updates from the client’s square account.

The inspiration of the website came from packaging for hair clippers and razors. I started with a rough concept sketch and later brought it into Figma to wireframe the website/app. Once we figured out a good layout, we then fully flesh out the design. After approval we then built the entire website in wordpress and woocommerce.

Gallery

Site12

We're Site12. We make Games.

You can see the games I worked on here!
  • Animation
  • CSS (SASS)
  • Game Design & Development
  • HTML
  • Javascript (JQuery)
  • PHP

Project Overview

Site12 is an indie game development team that I am part of. Every twice a year we participate in the ludum dare game jam. As the Art director of Site12 I am responsible for overall aesthetic and vision of most projects we work on. I am also responsible for:

  • Animation
  • UI Design
  • Character/Background Art

Gallery

Hapi Mouth Ramen

Something to smile about

Check it out here!
  • Animation
  • CSS (SASS)
  • HTML
  • Javascript

Project Overview

This was a project was heavily focused on learning how to use the fullpage.js and Bodymovin plugins. The Bodymovin/Lottie plugin allows for us to have custom animations on our page to create a more life like atmosphere. Everything on this page was produced using Illustrator and animated using Adobe After effects.

The inspiration for the project came because at the time the project was handed the rights for “steamboat willie” entered public domain, and I wanted to do a more cartoony mascot type aesthetic. I had to goals in mind for this project, work in duotones, and have a vintage cartoon style.

Gallery

Betmates

Place your bets

Check it out here!
  • CSS (SASS)
  • HTML
  • Javascript

Project Overview

Betmates is a proof of concept created as my final studio project for my second and final term of DMD – Interaction design and development.

This was originally conceptualized with a partner in the term prior, where we had to design and build a social media to demonstrate our abilities with PHP and MySQL. In the second term however, I decided to take what we had worked on and re-haul the front-end of the website as well as add new features to make the social media much more unique.

New features included:

  1. Bet Builder
    • The bet builder is the biggest feature that I wanted to implement. The bet builder would be a tool users can use to theory craft any combination of picks for their bet and see what kind of multiplier they would get.
  2. Ticket Manager
    • With the bet builder users would be able to create tickets that they can then share in posts for other users to see and share their opinions on. Each ticket has a unique code that can be inputted in to the post creator.
  3. Responsible Gambling resources
    • Of course it goes without saying, gambling can get out of hand very quickly for some people. And any gambling related product should/has to provide proper resources to encourage better habits.

Gallery

Capilano Suspension Bridge

Spectacularly Scenic

You can check it out here!
  • CSS (SASS)
  • HTML
  • Javascript

Project Overview

This project was an assignment for my Web design 3 class. The objective of the project was to create a “Pamphlet style” website for a destination. The goal of this assignment was to help us understand the design and development process using display: grid.

For the design I wanted to hide the fact that we were using a grid layout. How I achieved that was by including images with more organic looking shapes to break up the grid.

Gallery