prequilt
Designed and developed a web app to create quilt patterns. The app is a platform for people in the quilting community to sell their patterns using PreQuilt as a colouring book.
Date: May 2018
A portfolio site of Gar Liu - specializing in front end development
BANNERS
VIEW BANNER
AGENCY: Hogarth
For complex animations requiring a visual process, I will build components in Flash using timeline. After finalizing the animation, it is then exported to easelJS and manually integrated into the HTML banner. By working with the best tool for the process, I was able to quickly prototype and perfect this fish.
VIEW BANNER
AGENCY: Anomaly
Created a particle system where the particles moved organically. This module was later refactored to allow it to easily adapt to various banner sizes.
VIEW BANNER
AGENCY: Blast Radius
Having a modular development process allowed this 80 banner OLG campaign to share content, styles, and animations. This modularity was a life saver during revisions, giving me the opportunity to respond quickly and accurately.
VIEW BANNER
AGENCY: Anomaly
Created a winter scene using webGL while also supporting IE9. Subtle details like the flicker lights behind the shoe adds a nice touch.
VIEW BANNER
AGENCY: Mosiac
I had recently built a particle library and felt this was the perfect fit and suggested to the client. It was great to see the investment in the R&D payoff.
VIEW BANNER
AGENCY: Anomaly
"Make the egg hop a little less, a little higher, a little bouncier!" I was able to react quickly and accurately to the client's revisions because the banners were custom coded.
VIEW BANNER
AGENCY: Anomaly
The request was to mimic an ad spot of chocolate swirls but keeping the file size under 150kb. I used Pixijs' Displacement Mapping to create this effect. Surprisingly Pixi 1-6-0 version was only 42kb!
VIEW BANNER
AGENCY: Anomaly
Using RxJS made development really easy to manage the states. Definitely overkill to use RxJS for a banner but the filesize fit and I learned a to use a new library.
MICROSITES
#eattogether
Developed microsite for Loblaws Eat Together campaign using React. Also developed a custom content managment system using Firebase and Reactjs.
Date: January 2018
Real Canadian Super Store
Built the front end platform for Real Canadian Super Stores to showcase stories.
Date: September 2017
mocean
An exploration of typography and motion - 2 things I'm deeply passionate about. The PieChart Font is the first of the collection and is built entirely from code.
Date: Febuarary 2018
RANDOMISE APP
A pet project where I designed and developed an app to randomise anything in a fun way. It's also a platform that allows me to add various styles of visualising information randomly.
Date: January 2018
STARDUST PARTICLES
I made a particle library that uses web fonts to be expressed through thousands of particles. To show what the library can do, I created a demo that used the lyrics of a music video by M83. By mixing combinations of various types of animations, this made the lyrics more expressive by being able to adapt to the cinematography of the music video. This is a work in progress and will grow to allow users to make their own music videos.
Date: 2016 October
TORONTO’S CAPITAL BUDGET
From 2014-2023, the city of Toronto will spend approximately $3.2 billion on capital projects. Filter and sort this visualization by ward to see where and how that money is being spent.
Date: 2016 April
Since 2006, I've worked with many of the top ad agencies in Toronto as a creative developer. As a front end developer my clients normally hire me to develop microsite and banner development, while offering ideas on creativity and usability. I'm always looking for new clients and projects feel free to reach out if you want to talk.