A simple web application with Cordova, jQuery Mobile, Ajax, JSON

What I Used

  • Cordova
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Ajax
  • JSON
Visit the website

Flickr Photo Search with Ajax

What I Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Ajax
  • JSON
Visit the website

iPhone Slider with Switch Button via Ajax

What I Used

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Ajax
Visit the website

Responsive Ads

ResponsiveAds, Inc. is an international web application company which develops HTML5 responsive web design advertisement online tool. I re-designed and developed its website based on WordPress from scratch.
At the top of the page, I included a background video which does a brief explanation of its functional and powerful web application.

What I Used

  • HTML5
  • CSS3
  • jQuery
  • WordPress
  • Photoshop
  • Illustrator
  • Premiere
Visit the website

ResponsiveAds

Background Video

The video contains three types of web advertisement generated by the web application, which were appearing in major media websites in North America. The video reveals the purpose of this web application enables users to create a variety of responsive web design advertisement.
 First, I controlled the shrinking and growing motion pattern with animate function in jQuery. Secondly, I combined it with a large background image, and then edited the video with Adobe Premier.

Visit the website

M.E Mediatech

M.E Mediatech Corp. is a media company which connects the Canadian with the Chinese market, and it’s being located in Richmond. I designed and developed the official website from ground up without any templates or frameworks. I worked with a small team of back-end engineers to integrate several complicated functions and brought the project to completion.

What I Used

  • HTML5
  • CSS3
  • jQuery
  • Photoshop
  • Illustrator
  • Premiere
Visit the website

JavaScript/CSS3 Animation

This is my first JS/CSS animation project using Adobe Edge Animate. First, I prepared a scenic picture of a man standing on the top of the mountain. Then, I segmented it into individual element and modified them. Finally, I combined them with one screen adding motion effect.

What I Used

  • HTML5
  • CSS3
  • JavaScript
  • Photoshop
  • Edge Animated
Visit the website

UI/UX Design projects

In my previous UI/UX design projects, I design APPs' UI with Photoshop and Illustrator, I make their mockup with motion effects with InVison.

What I Used

  • Photoshop
  • Illustrator
  • InVision

Graphic Design

In addition to web development projects, I also participated in a numerous amount of graphic design assignments.

What I Used

  • Illustrator
  • Photoshop
  • InDesign

Graphic Design

Web Banners

I designed many web banners in Chinese and English for the international e-commerce website Greenme.

What I Used

  • Photoshop

Graphic Design

Event Posters

On the left is a movie poster from one of my freelance project for a film in Vancouver. The right one is an event poster for a famous Chinese-Tibetan singer announcing his tour throughout several cities in the North America.

What I Used

  • Photoshop
  • Illustrator

Graphic Design

CD Covers

I created a music CD cover which included lyrics in Chinese and English with a team of translators. The CD was released in China earlier this year.

What I Used

  • Photoshop
  • Illustrator

Graphic Design

Catalogue and Pamphlets

I have designed several books and Pamphlets for different businesses and events both in Chinese and English. The most challenging project was the 2017 catalogue for the Golden Maple Film Festival which took place in the Metro Vancouver this year. I was working together with a small team of editors and translators. Besides being responsible for designing all contents of the catalogue, I also designed all of the sponsor's advertisement pages. The catalogue includes one hundred and two pages which I completed them independently.

What I Used

  • InDesign
  • Illustrator
  • Photoshop