//assets.cakeresume.com/assets/contentarea/contentarea-2d64eca8dae2a1ffb31e0fb1df887bbad072c7c19734d7d30fa14884bbcc299a.css

對網路應用擁有高度熱情，雖然專注於前端開發，但也不忘將自身技術持續延伸至後端、資料庫、容器化、CI/CD 等，用最合適的方式突破瓶頸。

虎尾科技大學

Senior Web Developer

Bandy Deng

牧德科技

領導 web team ，規劃建置 packages registry 、 CI/CD 及 AWS 交付環境。
- components library / icons library
進團隊時，團隊使用 Bootstrap 及 Ant Design 進行開發，但礙於需要客製化太多，跟設計師溝通後決定建置團隊自己的 library ， registry 依附在 GitLab 上，並建置 Strybook 撰寫文件，當作 component explorer 讓團隊可以看到 library 的產出。
    ． components library 以 Vue.js 及 tailwindcss 建置
    ． 多數 icon 設計師先出一版，再接手以 Figma 優化，輸出 svg 轉譯成 json 以便 Vue.js render
- CI/CD
建置 Drone CI ，整合 GitLab, slack, ClickUp, AWS
    ． 使用 git push options 增進交付速度
    ． 以 shell script 串接 ClickUp api 更新 issues
- AWS
    ． EC2: 以 Docker 管理 Drone CI 、 WrodPress
    ． Lambda: 建置 prerender 機制增進 SEO
    ． S3: website hosting
    ． CloudFront: CDN management
    ． Route 53: domain management
- 產品行銷網頁
    ． 滾動視差以 intersection observer api 設計開發
    ． 使用 grid-template-areas 排版以符合 RWD
- 子公司形象網站
以 WrodPress 建置 CMS
    ． 開發 Gutenberg Block Patterns
    ． 開發 Twenty Twenty-One child theme (sass, css variables)
    ． 以 Alpine.js 導入單頁 MVVM

與朋友公司展開實驗性的 side project ，CI/CD 及環境使用 Netlify。

- 交友平台
    ． Vue.js base
    ． taiwindcss
    ． 以 Hammer.js 及 css transition 實作滑動效果
    ． 以 Vuex 及 sockt.io 實作即時同步
    ． 以 svg symbol 實現客製化 icon

馬斯洛的地下室

Freelance Web Developer

負責前端開發，協助後端架構規劃，協助 CI/CD 規劃。

- 檔案管理系統
後端 koa 開發 rest api、ORM 基礎架構讓同事接手；前端以 Vue.js 開發並使用 Vuex 管理 global component 的狀態及事件，於控件及視覺效果上使用 svg，運用 grid、flex 切版。
- Progressive Web Apps
實驗性的將團隊 documentation 建置成 PWA
    ． manifest 設計撰寫
    ． 設計 service worker 的快取策略
    ． 以 Firebase 規劃建置 notification

宇智擘科技

協助以 Jenkins 導入 CI/CD ，並以 Bitbucket 為 source/issue control；接手維護數個 MEAN Stack 系統前端開發，參與後端架構規劃，後期接手新案子前端汰換成 Vue.js，並將導入 component explorer 概念管理公司技術資產。

- 倉儲管理系統
由於大部分組員沒有前端實作經驗，於 AngularJS 1.4.9 上結合 component 概念開發前端 framework，讓組員可以直接以 config 快速生成前端頁面，專注於後端業務邏輯。

- 單據簽核流程系統
以上述架構開發內部系統，並以 josn 輔助 BPMN 管理流程，讓使用者可自定義簡易的流程。

- 機台排程管理系統
    ． 系統架構: jQuery、EJS、express 架構。
    ． 接手狀況: 系統架構及檔案結構混亂不堪，DB schema 設計水準低落，礙於權職及系統串接問題，無法對其正規化，導致新需求開發受阻。
    ． 經手過程: 重構之後使用 sql temporary table 模擬正規化後的資料結構表，再以 rest api 供前端使用；前端移除不必要的 request 讓 ejs 發揮以減少傳輸開銷，使用原生 constraint validation api 驗證欄位減少第三方依賴。

- 良率報表系統
前端以 Vue.js 搭配 Chart.js 串接後端資料，展示良率箱形圖。

昱冠資訊

嘗試使用 k8s，將測試環境部屬在 OpenShift v2 ，正式環境由於雇主的抉擇部屬在 Godaddy。

- 購物車平台
基於 WordPress 開發客製化外掛及主題，串接 google map api 、智付通金流、臉書粉絲專頁，處理各大搜尋引擎 SEO 優化。

為了海龜

內容管理系統的前端開發與維護，預處理部分使用 gulp。

- 內容管理系統
    ． 接手狀況: 架構為 Laravel、jQuery。
    ． 經手過程: 導入 plugin 處理複雜拖拉的需求；建置動態語系模組解決語系檔過於肥大問題。

KKBOX

Web Developer

維護內部系統、需求開發，經手的系統幾乎都是 asp.net ，橫跨了 1.1 到 4.0 之間，因效能困擾開始逐步重構成 SPA。

- 數個企業內部簽核流程系統
    ． 接手狀況: 架構為 .net 3.5，由於複雜的需求導致效能低落。
    ． 經手過程: service 轉為 rest api 之後，使用 Backbone.js 重構前端。

- 企業內部雲端檔案平台
    ． 經手過程: 以 Backbone.js 為基礎導入 Bootstrap 增加排版便利性。

- 企業內部簽核流程系統手機網頁版
    ． 經手過程: 以 AngularJS 開發，Bootstrap 輔助 RWD。

- VoIP 網頁平台
    ． 接手狀況: 前端以 AngularJS 為基礎，但架構不適用於新需求
    ． 經手過程: 與組員邊開發需求邊調整架構，導入 promise 處理 multiple ajax requests 衍生的程式碼雜亂問題，以 singleton 概念解決彈出視窗重複宣告渲染的問題，導入 D3 使圖表組件更容易客制化；使用 Jenkins、Grunt 自動化合併壓縮部屬。

台灣新蛋

- 書店庫存管理系統
至書店實習，系統架構為 PHP、MySQL，負責正式環境維護及新需求開發。

分享