畫面與使用者體驗

     畫面排版設計主要是以 Bootstrap4 + SASS , HTML5 + CSS3 Animation 等技術完成，網站中呈現了各種不同的動畫應用與切版，同時網站也設計了RWD的各種解析度切點。

    利用 Javascript 判斷使用者在觀看不同網頁內容時呈現不同的樣貌，以些許的  JQuery 輔助呈現。

後台管理

    後台管理者登入有 Vue 的導航守衛控管權限，針對商品列表、訂單、優惠券的各種管理功能執行新增、刪除、修改。

    此作品皆由「六角學院」提供的後台進行修改，以 Axios 存取API 執行後台的各種功能。

指針式時鐘

    核心技術為 setInterval()，在每秒觸發時間更新，並將相關時分秒轉為角度，利用 CSS 的 transform:rotate 旋轉時針與分針。 

Demo：Codepen

時區儀表板

    核心技術為 Date().toLocaleString 轉換為時區的方法，如何在物件中用options 設定格式、陣列的合併與拆解，合併拆解完成後利用 v-for 渲染整個陣列到網頁畫面。

Demo：Codepen

AQI 空汙儀表板

    核心技術為 API 串接技巧及 fetch 的應用，其中更包括了陣列篩選的各種方法，foreach(), filter(), indexOf() 等方法。

Noted：notion.so

Demo: Codepen

60 秒算數遊戲

    以 Vue Components 結構下撰寫，核心技術包括 props, emit(value), setInterval(), clearInterval(), switch...case if 等，判斷遊戲轉跳頁面及設計與比對分數計算的方式。

Noted：notion.so 

Demo: Codepen

繪圖板

    核心技術為 Canvas 繪圖板的各項 API 功能及使用方式，偵測使用者行為，可簡易的選擇線條大小及顏色再 Canvas 上繪圖，並加入下載、清除、UNDO、REDO等功能。

Demo: Codepen

專案活動 | 隨機對戰選號   

    為街舞活動 【Make the beat drop 】設計的隨機對戰選號系統，技術核心利用 vue.js 為框架，利用 setTimeout 與 Promise then 函數跑亂數選號與畫面呈現，設計以 Esc 與 Ctr+Enter 的方式來控制選號起始，製作出一個符合活動主視覺與電視牆呈現舞台的網頁頁面。