Website Developer

+ 15 months

 Website Designer

+6 months

Graphic Designer

CD Student

Web Development  Projects/Practices

Tesla Roadster

(Rebuilt Project)

Animation are applied into the website via the Tesla website remake. I am also able to use jQuery for the web development to involves interactivity.

Dr Zhao's Laboratory

(Freelance Project-still under development)

As a freelance web developer, I took the job to help Dr Zhao in PolyU, to develop a website for her laboratory. I used ScrollMagic, jQuery and flexbox technique to build it.

Apple Main Page

(Rebuilt Project)

I am confidence in Bootstrap 4. I remade the Apple website using the flexbox technique. Justify-contents and align-items are used via this practice.

Jumpstart Website

(Self-learning Project)

This is one of my early webpage projects. I followed the advice from the self-learning tutorials and made this website. I used jQuery to develop the navigation bar and the jumbotron.

Format Camera

(Self-learning Project)

I learned how to make use of typography in the website via this project practice. This is also one of my exercises about responsive design.

JavaScript Exercises

Pen Animation

By using ScrollMagic.js and GreenSock.js, revealing animation combining interactivity can be developed

Game Board

By using the event handler, "click". When clicking the More link, we can see the dropdown menu. By clicking the Share link to see the share menu, and clicking the notification bell.

Comment Area

By using .keyup(), .length() and .html(), the cooment area limits the users' posts to 140 characters or less.

Web Safe Font Preview

By using keyup(), .val(), we can use this simple app to preview different web safe fonts, sizes, and weights.

Generative Art

Using the p5.js library, generative art and animation can be developed in website.

Draw With Ellipse

By using p5.js, browser can be able to draw in the canvas.

Web UI/UX Design Project

Organization: Hong Kong X Fundation

As HKXF was setting up a startup platform, I joined the web development team as a web designer to help design the websites. Sketch and PhotoShop were used for the UI/UX design.

Book Design Project

Organization: PolyU Office of Careers and Placement Services

Helping PolyU Office of Careers and Placement Services to develop their latest annual “Careers Success Stories” magazine.

Invasion–Sky Has Fallen

Ditagal Design Poster
A2 size

Invasion–Sky Has Fallen

This is a set of community posters. In our society, people keep destroying animals’ habitats for development. In this project, the spheres represent different habitats. For animals, their habitats are like their home planets. Businessmen are like evil invaders in films, invading animals’ planets and destroying their homes. Those businessmen tend to control everything in the nature, they think they are the authoritarian kings. Their behaviors bring land, water and light pollution. Animals are eventually losing their homes and disappearing. I imitate the style of WWF’s posters, in which graphics instead of texts are mainly used as images can attract audience. I hope this project can let people know more about the plights faced by animals thus they will stop destroying their natural habitats.

I went to Victoria Harbour to take a panorama, and then used PhotoShop to create a polar panorama.

Invasion–Sea Has Fallen

Ditagal Design Poster
A2 size

Invasion–Sea Has Fallen

This is one of the posters in the set of community posters. In our society, people keep destroying animals’ habitats for development. In this project, the spheres represent different habitats. For animals, their habitats are like their home planets. Businessmen are like evil invaders in films, invading animals’ planets and destroying their homes. Those businessmen tend to control everything in the nature, they think they are the authoritarian kings. Their behaviors bring land, water and light pollution. Animals are eventually losing their homes and disappearing. I imitate the style of WWF’s posters, in which graphics instead of texts are mainly used as images can attract audience. I hope this project can let people know more about the plights faced by animals thus they will stop destroying their natural habitats.

I went to Kwun Tong Harbour to take a panorama, and then used PhotoShop to create a polar panorama.

Invasion–Land Has Fallen

Poster
A2 size

Invasion–Land Has Fallen

This is a set of community posters. In our society, people keep destroying animals’ habitats for development. In this project, the spheres represent different habitats. For animals, their habitats are like their home planets. Businessmen are like evil invaders in films, invading animals’ planets and destroying their homes. Those businessmen tend to control everything in the nature, they think they are the authoritarian kings. Their behaviors bring land, water and light pollution. Animals are eventually losing their homes and disappearing. I imitate the style of WWF’s posters, in which graphics instead of texts are mainly used as images can attract audience. I hope this project can let people know more about the plights faced by animals thus they will stop destroying their natural habitats.

Kagome Juice Label Design

Label Design
7cm X 20cm

Kagome Juice Label Design

By using the comic pop art style, I redesign the labels for Kagome juice. "Fruits and vegetables can make people happy". With the sense of humour, I convert all the weapons into fruits and vegetables, to convey anti-war messages. In addition, As Kagome is a Japanese company, the anti-war idea can increase the company's positive image in the society.

My Cells, My-Self

Digital Design
110cm X 100cm

My Cells, My-Self

We are made up of thousands of cells. There are different types of cells which have different functions. Under the microscope, cells are beautiful and have pretty structures. I make use of the images of cells ( like white blood cells, red blood cells and skin cells) to create my portrait. It can show the complexity of human beings and the wonder of the nature. For me, it also shows the grace from God.

           

Chinese Typography Design

Typography Design

Chinese Typography Design

I use 3D principles to design such typography. Shadow, depth and light are applied into the design to make fun of the strokes.

My Pixel Process Book

Book Design
A3 size

           

My Pixel Process Book

This is my learning journal for a poster design. As the poster design is related to the famous game maker Miyamoto, I designed the journal with the theme of "pixel".

Info-Graphic Design

Poster Design
A0 size

Info-Graphic Design

This is a team project. We do research on Chinese Qipao and do a information design on it.

Ryōan-ji Pamphlet Design

Pamphlet Design
A3 size

Ryōan-ji Pamphlet Design

I make use of the strokes in the dry landscape to design the Chinese letter. One stone in the pamphlet is covered when the pamphlet is not revealed. As the stones are arranged so that when looking at the garden from any angle, only fourteen of the boulders are visible at one time