2020.10
|
Current
聲音顆粒合成產生器(未公開)
為個人對於 Web Audio API 網頁聲音處理上的實驗性作品,利用物件導向架構概念導入聲音的顆粒合成法,並透過 Canvas 在畫面上繪製互動顆粒,並建立重力場的動態演算,實現一個以音檔的時脈波形為基礎的聲音顆粒合成互動介面。未來會再擴增更深入的聲音的互動模式,如:WebSocket 基底的遠端即時互動架構、讓使用者即時錄音與上傳音檔等功能,慢慢形成一個以聲音地圖為基礎、以網路科技為輔的「聲音雕塑」作品。🔊🔊
Project Invovements
  • 以 Canvas API 實作整體動畫與聲波圖。
  • 透過動畫驅動背後 Web Audio API 實作的聲音顆粒合成。
  • 互動介面以 React Hooks 實作、畫面樣式採用 styled-components 架構導入 SCSS 實作。
Skills
  • React Hooks
  • Canvas API
  • Web Audio API
  • TypeScript with OOP
  • styled-components
  • SCSS
2020.08
|
Current
個人網頁
個人建置的網站,用於紀錄自己的成長與分享個人在網頁開發上的想法。未來將會持續擴增其他頁面功能,以及增加文章紀錄的面向。也不排除擺上個人實驗性的專案成果 😎
Project Invovements
  • 從規劃內容、設計、到開發完成,約莫兩週時間開發。
  • 整個網站設計是自己規劃,風格是想到什麼點子就直接實作 SCSS,其實過程蠻開心的,因為自己的認同的東西被實現出來。
  • 專案利用 Gatsby.js 進行開發,並利用 circleci 搭配 Heroku 進行 CI/CD 的部署作業。
  • 將專案中的文章,利用 Headless 內容管理工具進行串接,也有使用 Markdown 產生文章架構。
Skills
  • Gatsby.js
  • React Transition Group
  • styled-components
  • GraphQL
  • circleci
  • Heroku
2020.05
|
Current
參與 ALPHAcamp 助教團隊
利用業餘時間,參與 ALPHAcamp 平台的助教團隊,協助平台教學相關活動、參與線上工作坊講者,🎓 教學相長 🎓
Project Invovements
  • 擔任平台助教,解決線上學員在網頁開發上的任何技術問題,並給予學習引導。
  • 擔任線上工作坊講者,與課程內容團隊根據學員學習狀態設計工作坊內容。
Skills
  • HTML / JavaScript / CSS Teaching
2019
|
2020
直播拍賣平台重構版 (測試階段)
原 EasyLive 新版直播平台的重構版本,將直播活動重新建立機制、強化訂單系統與前台購 物車系統,希望透過系統開發環境更新增加系統的可維護性與擴展性,同時透過設計端針對過去 的用戶體驗回饋來優化平台操作介面,希望藉此提升使用者體驗,並增加繼有客戶的產品黏著度 ,以新的風格來繼續服務直播拍賣市場。
Project Invovements
  • 採用 React Hooks 進行 UI 組件功能開發。
  • 建構前端整個專案開發的資料管理架構、統一寫作風格,提升程式的可維護性。
  • 建立的核心路由架構,並在其之上建立 Facebook Token 認證機制。
  • 根據設計 Design Guideline 建立前端以 styled-comonents 為基底的健全 CSS Guideline。
  • 利用 Apollo Client 建立 GraphQL 核心對口功能,並且建立方便管理的錯誤管理機制。
  • 建立、拆分全站畫面 Layout 種類與路由綁定。
  • 直播列表開發、直播活動開發、開發各式活動列表模板。
  • 建立全站語言控制機制。
  • 導入 Git flow 機制來簡化版本控管流程。
  • 與後端協作建立基礎 CI/CD 機制。
  • 以 Ant Design 為基礎架構畫面所需的客製化組件。
Skills
  • React Hooks
  • GraphQL with Apollo Client
  • styled-components
  • Ant Design
  • Redux
2019
|
2020
EasyLive
提供賣家進行直播拍賣,並將賣家商品與多種類的直播活動搭配,讓賣家與觀眾進行互動,直播後台也會幫賣家進行成單與導購,藉此提高產品曝光度、成單率。
Project Invovements
  • 使用 React class-based components 建立全站畫面功能。
  • 使用 redux-thunk 建立 middleware 解決資料請求與後續操作的非同步問題,提升Redux 中 actions 再操作上的彈性。
  • 執行後端 API refactor 的資料對口更新,優化前端資料結構的複雜度以提升效能。
  • 定期根據行銷需求開發與維護各式限時活動的活動介面。
  • 開發拍賣直播後問卷調查的控制機制,收集客戶意見回饋的相關資料,做為平台優化的依據。
Skills
  • React
  • RESTful API
  • SCSS / styled-components
  • Ant Design
  • Redux
2017
|
2019
vivido.video
一個提供線上編輯短秒數 (6 ~ 20秒) 廣告影音的編輯平台,透過步驟化的頁面編輯流程,製作出精美的影片,提供中小企業做為形象宣傳、產品行銷使用。此份專案最大的挑戰是要將影片的資料結構透過物件與模組概念將編輯 UI 實作做適當地封裝、拆分,以及團隊對畫面美感的堅持,也從中培養、滿足個人對切版策略規劃的經驗與興趣。
Project Invovements
  • 與開發團隊緊密溝通,開發全站前端畫面功能運作。
  • 以 jQuery 為基礎結合 JavaScript 原型鏈與設計模式來建構頁面功能。
  • 建構整體專案的前端開發架構,採用 Gulp 打包、管理 bundle 的程式碼。
  • 以 SCSS 為基礎建立前端 UI、字型 Guideline,並建立頁面的 Grid System。
  • 後台頁面導入 Angular 框架,提高程式的維護性並加速開發。
  • 透過 RxJS 作為 Angular 架構下的狀態管理機制。
  • 根據編輯需求與後端規劃、建立可擴充性的資料結構供前後端建構編輯功能。
Skills
  • JavaScript
  • jQuery
  • Angular
  • SCSS
  • Gulp
  • RxJS
2014
|
2016
碩論
本論文:顆粒合成法與網頁音訊技術之跨地域聲音互動設計,採用 Node.js 架構 WebSocket 實現系統多使用者即時聲音互動的基礎,並在網頁端透過 Canvas API 與 Web Audio API 實作聲音顆粒合成法;也透過聲音顆粒合成法的聲音特性設計出使用者在裝置上的即時互動模式。系統能讓使用者透過手機瀏覽器錄音,並且能與其他使用者在平台上透過互動模式與介面操作,對錄音檔進行即時聲音合成互動,最終透過裝置獲得顆粒合成聲響的即時回饋。
Skills
  • Canvas API
  • Web Audio API
  • Node.js WebSocket