All Projects

Home page 使用了 css 的 scroll snap 功能

由於不是套版，可以放置與好友合作使用 p5.js 製作的 project

設計師希望所有的圖檔都必須使用原尺寸，因此於 php 開放傳送檔案大小限制

使用 step-by-step wizard 領導工班安裝教室設備
安裝照片存取手機本地端照片，上傳至 server 時候會根據檔案大小壓縮至 1MB 以內，以避免 server loading 過大

掃描設備 QR Code 及可將 apply 設備相關資訊，也可讀取存在相簿中的 QR Code

採用 Role-based Authentication 根據角色不同顯示對應的前端 routes

透過圖表快速查看不同縣市安裝進度

表單使用了 react-table utility library，表單設計更加彈性

透過設備清單可查看每間學校所需設備是否備齊，以及安裝狀態等。匯入設備可單筆或批次 excel 匯入

Dashboard 讓管理者快速瀏覽目前場域水井狀態，抽水時長、抽水量排行等狀態

管理者可新增公告，並透過拖拉方式改變 order，此部分公告會在 app 上顯示

查詢水井歷史紀錄，並可透過圖表清楚比較，也可以匯出 excel 做進一步使用

透過地圖檢視水井位置，點擊查看詳細資訊

可於地圖匡選 marker 群組水井

Dashboard 可快速查看目前場域的狀態

可透過地圖查看路燈位置及狀態，點擊燈泡可於 sidebar 控制該路燈開關，也可查看該路燈的詳細資訊

路燈可綁定異常偵測規則，例如路燈電流高於設定規則之上限或下限時，透過 email 發送通知，以利及時處理

若路燈發生故障，可透過報修系統建立包修單，透過報修系統可清楚查看目前維修進度

調燈系統有分成不同模式，可根據案場需求自行調整。例如可根據季節不同改變開關燈時間，或是在隧道入口設定漸進式調光等等

路燈管理後台還有許多功能，例如報表查詢、生成，資產管理、人員管理等等，就不在此一一介紹

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-scrolling: touch;” at the infobox element. So that the scrolling effect will be smooth on the mobile devices.

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

Overall:

Mobile Version:

Coding Tutorial:

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

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.

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.

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.

Overall: