工作經驗
日本NEC集團 統智科技股份有限公司
資深前端工程師
十一月 2024 - 九月 2025
Taipei, Taiwan
工作職責
- 擔任前端組 Leader，帶領 3 位前端工程師
- 負責技術指導、架構設計、Code Review、問題排解
- 推動團隊成員進階成長，建立知識傳承文化
技術導入與規劃
- 導入 Vue 2 → Vue 3 技術升級，重新建構組件與型別邏輯
- 提案並導入 Node.js 環境於內部開發流程中
- 建立 Onboarding Guide，提升新人到職效率與開發速度
- 導入 Monorepo 架構，整合多個應用與套件倉儲
- 重構 i18n 多國語系模組，實現 JSON 架構統一與命名規則優化
建立前端規範（由 0 到 1）
- Git Commit 規範（Conventional Commits）
- Branch 命名慣例（feature/、hotfix/、release/ 等）
- Coding Style 建立與落實 （ ESLint / Prettier + 專案規範檔案建置，並制定團隊統一規則 ）
- 共通元件與資料夾結構設計
- 撰寫與維護前端技術 Wiki
藍星球資訊股份有限公司
十月 2017 - 十一月 2024
Taipei, Taiwan
職位歷程：前端工程師 → 高級前端工程師 → 資深前端工程師（主任）
資深前端工程師（主任） 2022-2024
工作職責
- 擔任研發部前端組組長，帶領 4 位前端工程師
- 分配專案與人力，作為 PM 與 RD 的溝通橋樑
- 建立新人訓練制度、推動內部讀書會與知識分享
- 優化公司後台模組架構與維運流程
- 確保各項專案依期穩定交付
專案代表
- 桃園市儀表板（RD Leader）：導入 Nuxt 3，建置城市數據視覺化平台
- 桃園資料開放平台（RD Leader）：推動地方政府資料治理與數位轉型
技術使用
JavaScript、TypeScript、Vue.js、Nuxt.js、HTML、CSS、Git、無障礙設計（a11y）、團隊管理
高級前端工程師 2019-2022
工作職責
- 完成多項專案開發任務，擔任 RD Leader 進行任務拆解與實作
- 參與公司後台模組化與前端架構優化
- 技術轉型：主導從 jQuery 過渡至 Vue 2 開發流程
專案代表
- 灃食飲食常識庫：建立飲食教育平台，推廣健康飲食觀念
- 國家人權博物館檔案系統（RD Leader）
- 臺史博校園生活記憶庫、臺灣報刊資料庫、影音資料庫、大溪文化資源網（RD Leader）
- 某電商平台改版（RD Leader）：提升前後台使用體驗與營運效率
技術使用
Vue.js（Vue 2）、Nuxt.js、JavaScript、TypeScript、HTML、CSS、Git、a11y
前端工程師 2017-2019
工作職責
- 負責與設計與後端協作，完成前端互動功能與資料呈現
- 參與文化典藏與政府開放資料平台的開發任務
專案代表
- 臺北市議會新聞知識系統、臺北市政府資料開放平台
- 國家漫畫史料調查與典藏計畫
- 臺灣歷史博物館研究資源管理系統
- 經濟部標準檢驗局知識管理入口網
技術使用
JavaScript、HTML、CSS（階層式樣式表）、jQuery、Git
開發專案
詳情可見下列專案細項
公司後台模組化
自訂權限規則
我有設計一套後台權限規則，拆成兩層：
- 頁面層級：決定使用者能不能進入該頁面
- 元件層級：例如按鈕、功能操作是否能顯示
這樣做可以避免前端單純依靠路由守護，即使手動輸 URL 也不能進入， 而且 UI 會根據角色動態渲染，不需要每個按鈕手動判斷授權
效果：
- 權限維護集中、清楚
- 新增角色或調整權限時不需要大改 code
列表頁 Component 模組化
公司後台的列表頁 UI 規則一致（篩選、表格、分頁等），我把它封裝成一個可配置的 component
只要輸入欄位配置、API 與操作方法，就能快速產生一個列表頁
好處：
- 風格一致、維護方便
- 新列表頁開發時間縮短（大約只需設定 config）
- 避免 copy-paste 多份相似 code
編輯頁動態欄位渲染
在編輯頁，我用 Object 定義 UI schema，欄位使⽤ type 決定 UI 元件（input、select、date picker 等）
例：
{
label: '商品名稱',
field: 'name',
type: 'input',
required: true
}只要調整 Object，就能：
- 重新排序欄位
- 更換欄位型態
- 自動產生相應 UI
好處：
- 不需要一欄欄手刻 UI
- 欄位調整只改 config，維護成本低
- 模組化表單架構，易擴展
專案 (時間由近到遠)
桃園市OD
建置前後台，以 Open Data 為主體
https://opendata.tycg.gov.tw/
後台：Vue 3 ， 前台：Nuxt 3
擔任此專案 RDL ( RD Leader ) ，負責與 PM 溝通、分配 RD 工作
桃園市儀表版
建置前台，功能以圖表呈現為主
也會有圖表和圖表間的連動
前台：Nuxt 3
擔任此專案 RDL ( RD Leader ) ，負責與 PM 溝通、分配 RD 工作
首次使用 Nuxt 3 的專案
某電商改版
該專案有舊版系統，除了舊有功能外，需優化購物流程，以及有非會員購買之新機制。購物車部分也有需要單獨結帳商品之考量
後台：Vue 2 ， 前台：Nuxt 2
擔任此專案 RDL ( RD Leader ) ，負責與 PM 溝通、分配 RD 工作
GTM 介接、i18n (多國語系)
實作前後台前端商品相關功能、購物車功能
桃園市立大溪木藝生態博物館 大溪學文化資源網
各個分類都有大量的欄位資料。在上稿之前也需設計審核流程，主題專區設計共有接近20來個元件，供使用者編輯
https://daxiculture.tycg.gov.tw/
後台：Vue 2 ， 前台：Nuxt 2
擔任此專案的RDL ( RD Leader )，負責與 PM 溝通、分配 RD 工作
無障礙
國立臺灣歷史博物館 影音資料庫
後台：Vue 2 ， 前台：Nuxt 2
擔任此專案的RDL ( RD Leader )，負責與 PM 溝通、分配 RD 工作
負責所有前、後台前端
無障礙
國家人權博物館 檔案資訊系統暨資料庫建置計畫
後台：Vue 2 ， 前台：Nuxt 2 擔任此專案的RDL (RD Leader)，負責與 PM 溝通、分配 RD 工作
負責所有前、後台：首頁、典藏資料介接...
圖片編輯套件改寫、Chart.js
羅東林管處 蘭陽地區林業文化歷史檔案保存整合系統建置計畫
後台：Vue 2 ， 前台：Nuxt 2
負責後台 主題專區
Chart.js
經濟部標準檢驗局 知識管理入口網
前台：jQuery
負責首頁、所有知識文件介接、帳號權限...等
gridstack(版塊拖曳)
國立臺灣歷史博物館 研究資源管理系統
後台：jQuery
負責刻版(使用bootstrap)、部分模組介接
影片播放套件、圖片剪裁套件改寫
文化部 國家漫畫史料調查研究及數位典藏計畫
後台：jQuery
負責後台部分模組介接