Top

The Tools I Like Best

HTML5 + CSS3 + Javascript ES6
Git, Docker, Webpack, Kubernetes, Node
Sketch + Zeplin + Illustrator
Processing + Processing.js
Cinema 4D + AfterEffects
InDesign
Audition
Photoshop
A Pen

Skills

Mobile: Tap Below

Mostly Coding

Basics: HTML5 / Javascript ES6 / CSS3 / React + React Native

Fun ones: Processing / Three.js / D3 / WebGL / Mapbox + GeoData

Sometimes Designing

Vector: Sketch / InDesign / Illustrator

Animation & 3D: After Effects / Cinema 4D

Still Learning

Other Languages: Java / Meteor / Python / PureData

Past Work

Code and style the searchbar + surrounding 'landing pages' for this travel website.

Mobile-first education platform for Junior Achievement Canada, 2015.

I was hired in Spring 2014 by Clasehound to design, and front-end code a conversion from a wiki-style list of 10,000 clauses to a legal contract building web app. The client wanted users to be able to build their own contracts, while being able to cross-check their work with standard contracts. For a long time the client wanted to keep the individual clause pages, which were sometimes 6 categories deep. I slowly designed these to become entry-points to parent contracts, which in turn acted as clause indexes.

This site was hand-coded on Bootstrap for RBC and Pembina, initially involved parallax and scrolling animations, scrapped to allow compatibility with legacy browsers. The requested site was data heavy, so kept a focus on animated infrographics, while maintaining the RBC branding style.

A student assignment - this site uses the Google Maps API to calculate the approximate cost of a cab anywhere in Toronto. Designed by me and coded by hand on Bootstrap.

An ongoing personal project, exploring the potentialities of animating patterns. On hold while I play with visualizations in Java Processing! Built from scratch, uses CSS Animations and limited JS.

A school project, this site was my first foray into jQuery animation.

Interactive/Dynamic Stuff

Interactive Processing Animation[Hover over space below]

Processing Animation [Uploaded as Animated GIF]

Vector and Drawn Stuff



Design for Digital and Print Publication

Animation and Branding