Hi，我是 Glenn，前端工程師經驗 3 年，具備網頁前後端開發能力，擅長使用 React 框架進行前端開發，並且使用 PHP Laravel 作後端開發。我有 6 年的網頁相關工作資歷，熟悉完整的網頁開發流程與協作分工，並具備網頁切版能力與網頁設計經驗，能夠處理各式網頁的版型開發。業餘時間會持續技術進修，並且開發自己的 Side Project。
- 2018.8 - 2021.10 簡訊設計行銷有限公司
- 網頁前端技術應用開發
- 網頁後端資料庫架設與 API 開發
- 協助管理客戶伺服器
- 網頁專案維護與更新
- 開發加速團隊溝通的協作工具
- 流量數據追蹤分析
-
2016.11 - 2018.7 旺普網路資訊股份有限公司 網頁設計師
- 巴哈姆特討論版 UI Redesign 工作
- 巴哈姆特動畫瘋 Web 版本的 UI 維護
- 巴哈姆特即時聊天服務 Web 版本的 UI 維護
- 上述產品的網頁版型與 RWD 開發
-
2015.9 - 2016.10 華瑞資訊網頁設計公司 網頁設計師
- 品牌型網站與購物車網站的網頁設計工作
- 網頁版型與 RWD 開發
- Design tools
- Adobe Xd
- Sketch
- Zeplin
- Development tools
- Git
- styled-components
- Vue.js
- React.js
- PHP + Laravel
- graphQL
- Pixi.js
- Node Express
海廢圖鑑 | Link
海廢圖鑑是以介紹海洋廢棄物為主題的議題型網站，是簡訊設計時期 2018 年的專案，我負責執行前端開發，使用 Laravel blade 模板進行開發。
此專案需要兼顧較多元的版型切版與有趣的網頁互動開發，其中較為出色的部分：
此專案具有雙語版本，運用 Laravel 提供的快速指令，能夠自動抽換網站內的所有文本內容。
減災動資料 | Link
減災動資料是國家災害防救中心的功能型大型網站，是簡訊設計時期 2018 至 2020 年的大型專案，提供歷年災害數據並依此製作出圖表提供學術使用。
在這個專案中，我負責執行前端開發，其中較為出色的部分：
- component 最佳化處理，以便處理大量的頁面排版。
- 數據產出圖表與地圖分色，使用了圖表套件與 SVG 繪製。
- 與後端串接處理會員登入狀態。
- 提供使用者自行上傳的客製化圖表功能。
整個專案使用 React 框架來進行開發，方便處理大量且複雜的頁面與元件，並且在換頁與跳轉有更好的使用體驗。
今晚，我們一起吃塑膠 | Link
公視的海洋塑膠微粒的議題型網站，是簡訊設計時期 2019 年的專案，以互動遊戲讓使用者理解塑膠微粒的環保議題。
在這個專案中，我負責執行前端頁面與遊戲開發。
我選擇使用 Vue 作為遊戲的開發框架，其中較為出色的部分：
- 模組化遊戲進程，能夠方便的管理遊戲狀態且幫助除錯。
- 人物對話模組，並將文本以 JSON 方式打包，方便後續管理。
除了遊戲部分，該網站瀏覽體驗上使用了許多 Intersection Observer，讓網頁的互動更活潑。
有偶設計官網 | Link
有偶設計的官網開發，是簡訊設計時期 2020 年的專案，在這項專案中，我同時負責前端與後端開發。
前端使用 React 進行開發，React 提供 Hook 功能，能夠加速開發並且有效管理特效的狀態，後端使用 PHP + Laravel，Laravel 提供許多快速便捷的指令產出後端架構，前端工程師也能快速上手。
其中較為出色的部分：
- 首頁的「深入探索」的互動，使用監聽捲軸的方式來驅動整個互動體驗。
- 方便設計師管理上述效果，開發客製化後台給設計師使用。
開發細節刊載於簡訊設計部落格 用景深特效打造網頁空間感－有偶設計程式開發分享
簡訊設計官網 | Link
簡訊設計官網是簡訊設計時期 2021 年的專案，公司需要翻新久久未更新的官網，我負責前端開發。
其中較為出色的地方是：
- 處理首頁的橫向操作瀏覽方式，需要處理原生捲軸問題，並且開發符合 RWD 排版。
- 導入 styled-components，告別 CSS 的管理問題。
- 具有穿梭感的換頁特效，需要處理 react-router-dom 換頁非同步問題。
另外，開發團隊使用 graphQL 進行前後端串接，不同於過去 PHP API 的串接方式，graphQL 提供前端工程師更便利的使用方式，而不需要親自處理後端的 Model 部分。
開發細節刊載於簡訊設計部落格 如看展般的網站水平瀏覽體驗—簡訊設計官網程式開發分享
台灣新媒體影音創作者協會 | Link
台灣新媒體創作者協會的官網開發，是簡訊設計時期 2021 年的專案，在這項專案中，我同時負責前端與後端開發。
- 使用 graphQL 進行資料串接。
- 使用 React-hook-form 開發表單。
Brave Series RNFT PLAN | Link
黃色書刊的勇者系列發行的 RNFT 專案，我負責前端與後端的開發。
- 雙語系網站架構。
- 使用 orchid 後台 interface。
（維修中）
YT Listener 是 2021 年做的 Side Project，用於練習英文聽力，能夠播放 Youtube 影片並且串接其英文字幕，能夠在播放過程隨時註記需要重複收聽的句子，並且可記錄生字並且收錄在單字本中。
我負責 UI 設計與 App 開發。
專案以 React 框架開發，其中較為出色的地方是：
- 串接 Youtube 提供的 API 以獲取影片的字幕內容（已失效）。
- 串接 Microsoft Azure 翻譯 API 來處理單字中譯功能。
- 使用 Redux 負責跨元件的狀態管理。
- 以 PWA 的方式開發，方便手機直接使用。
CSV Sheet Matcher 是 2019 年的 Side Project，能夠快速比對兩份表格內容，並合成產出新的表格。
我負責 UI 設計與 App 開發。
專案以 React 框架開發，其中較為出色的地方是：
- 對 CSV 內容的操作。
- Drag and drop 的介面開發。
Googlesheet-to-json Github
Googlesheet-to-json 是 2021 年做的 Side Project，將 google sheet 的內容轉換成 json 的巢狀格式。
其中較為出色的地方是：
- 使用 sh command 執行 Node。
- 讀取 Google sheet 內容並格式化。