All Projects

This page showcase all of the projects that I built. Utilizing the filter button to view the specific category.

Portfolio Website

October 10th, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools Icon

This is my portfolio website which showcases all of my previous projects and some introduction about me.

Overall:

The portfolio website was created by a starter theme called Underscores in WordPress. Most of the content in the web page can modify flexibly. Also, I embedded the google analytics code to track the number of users browsing the site. In addition to this, I created the meta description tag and sit map to improve the SEO.

WordPress Content Management:

The WordPress content management system can make everyone using or modify the website content easily. The following diagrams show how I manage the content of the single project.

Google Analytics Code & Meta Description Tag:

Responsive In Mobile Devices:

When I was doing the Mobile version, I thought it is better to put the navigation bar on the bottom, so that people can easy to use their thumb to switch different web pages.

Coding Tutorial:

In this section, I will show you how I managed the pop-up information box when clicking each work.

First, $(this).next() will select the information box which is invisible now. I used the jQuery function fadeIn() to let the box display. Also, To make sure to disable the scrolling effect in the main content, I add the CSS styling called “overflow: hidden” in the body tag. Finally, Once the user clicks the close sign, the infobox will fade out.

Also, it is important to add “-webkit-overflow-scrollingtouch;” at the infobox element. So that the scrolling effect will be smooth on the mobile devices.

Wedding Services Website

October 14th, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools Icon

This is my final project in BCIT. Collaborated with a team of 4 from meeting with the real world client to gather requirement, planning, design, development, optimization to launch.

Overall:

This website is for a client who provides services for the wedding, including wedding decoration, set up and event design, etc. The purpose of this website is to border customer base and display the amazing artworks.

The website is built by WordPress so that the client can modify the content easily. We also pay attention to detail. For instance, styling 404 error page, customize the login and back-end page and show the tutorial on the dashboard.

Responsive Website:

Wireframe:

Desktop Version:

Mobile Version:

Functionality Structure:

In this section, I with my teammate wrote down all the functionality we need on the whiteboard. For example, We create front-page.php, page-wedding-services.php, and single-service.php templates. Additionally, Which kind of specific files should be included on every single page, such as header.php, footer.php, and WP-query.

Style Tile:

Style tiles are a visual reference to the design language of a website. They help tell a story through fonts, color and style collections, and when viewed in combination with wireframes, site-maps, and other UI elements, they define that story in an accessible, client-friendly manner.

Dashboard:

We created the tutorial about how to modify the content at the back-end management site. It is a good feature for the client.

Thank you for my best teammate: Lia, Sunny and Frank

BCIT Landing Page

June 6th, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools Icon

This is the BCIT landing page website.

Overall:

Mobile Version:

Coding Tutorial:

The below code shows how does the mobile dropdown menu work.

Submenu Drop Down Code

Coffee Shop Brochure

June 21st, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools Icon

I built this Demo site from creating the wireframe to a real site and fully responsive.

Overall:

I built this coffee shop website as my BCIT business brochure project. To approach the real world business website, I made several pages, including menu, about, review, and reservation, etc. I established the site from planning, scratching wireframe and mockup, developing, embedding google analytic code for tracking purpose to launch.

 

Fully Responsive site:

As the user switches from their laptop to iPad, the website will automatically switch to accommodate for resolution, image size, and scripting abilities.

Mockup:

A great website perspective mockup design can help to present your web design in a beautiful, unique way. Also, it is important to do the mockup before developing to reduce unnecessary work in programming.

Country Project

May 23rd, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools Icon

Visit the website to feel the beauty of Taiwan, the web page overall introduces Taiwan's culture, customs and display the gorgeous landscape.

Overall:

This country Project is the first website that I did. The content introduces the beauty of Taiwan, talking about the culture, custom, and display the gorgeous landscape as well.
This project also demonstrated that I have the ability to establish a static site from scratch. The site using programming languages, HTML, CSS, and jQuery Plugins to build.

Style Guide:

A style guide is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field.

 

MovieDB Searching

August 2nd, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools Icon

This website is built by the most popular JavaScript Framework, React. The web page acquired the API from MovieDB, fetched the database and used on my own website.

Note: The website is based on The movieDB API, if the database website is down, my website will not showcase all of the movies

Overall:

There are always new movies being released as time goes on. So it is not possible to hard code every single movie. Instead of this, we can use the movie database which movieDB provides. In this project, I made this simple website which you can select what type of movie you want to watch. However, the searching function still under construction, hope it will release in the near future:)

Process:

The diagram below shows how I get the data from the remote place.

 

 

Weather Forecast

September 6th, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools IconDevelop Tools Icon

This website is built by JavaScript Framework, Angular. I used the useful feature in Angular which can acquire information from different Website.
Angular2, Ajax, HTML, CSS

Whack the Monster Game

July 4th, 2018

Using Tools:

Develop Tools IconDevelop Tools IconDevelop Tools Icon

This is a small game project, adapted from the familiar whack the molly game.S ince I love the series "Stranger Thing", I changed the whole theme to that..

E-commerce Demo Site

August 23rd, 2018

Using Tools:

Develop Tools Icon

this is an shopping demo website

Overall: