志願役士兵 ｜ 陸軍第六軍團第二一砲兵指揮部
服役六年期間，主要負責軍車維修與鑑定工作。
主要工作職責與能力累積
- 軍車維修與鑑定
依照作業規範逐項檢查車輛狀況，判斷故障原因後再進行維修。
- 任務執行
依任務需求安排工作進度，並如期完成。
- 團隊協作
在團隊分工與既定流程下執行任務，培養責任感與紀律。
六年的維修與鑑定工作，讓我習慣先依規範檢查、找出問題根源再動手修理。這個習慣延續到前端開發：遇到錯誤時，我會先追查原因與影響範圍，再決定怎麼修改。
EXPERIENCE / 01 工作經歷
從介面實作到工程品質的持續累積。
整理我的工作經驗、技術應用與開發過程中累積的工程理解。
- 北極星測繪公司 前端工程師
- 健行科技大學 資訊管理系
- Vue 2 / Vue 3 & Vuetify 專案
- 無障礙改寫與 NVDA 驗證
- OpenLayers 空間圖資
- 資料流追查與下單流程擴充
Chapter 01
軍職 · 全職
陸軍第 21 砲指部
Transition
從軍職出發，重新探索程式開發
退伍後，我開始思考下一階段的職涯方向。由於小時候就對程式有興趣，因此決定透過泰山職訓局的培訓課程，重新接觸程式開發，並從 HTML、CSS、JavaScript 等前端基礎開始，逐步建立網頁開發的知識與實作能力。
Chapter 02
職業訓練 · 軟體開發
泰山職訓局
前端網頁開發培訓 ｜ 泰山職訓局
完成為期約半年的前端網頁開發訓練，從網頁基礎、Vue 元件化開發到前後端整合，建立完整的網站開發基礎。
- HTML
- CSS
- JavaScript
- jQuery
- Vue.js
- Vuetify
- Node.js
- Express
- MongoDB
- Git
主要學習內容與實作重點
- 前端基礎與互動開發
學習 HTML、CSS、JavaScript、jQuery 與響應式網頁設計，透過實作熟悉網頁結構、樣式與互動邏輯。
- Vue 元件化開發
學習 Vue.js 與 Vuetify，理解元件拆分、資料傳遞及使用者介面建構方式。
- 後端與資料庫基礎
接觸 Node.js、Express、MongoDB 與 RESTful API，理解前後端資料交換及基本資料操作流程。
- 完整專題開發流程
從需求發想、Figma 視覺設計、心智圖、網站地圖與資料庫規劃，到前後端功能開發及網站部署，實際參與完整的專案流程。
專題實作：遊戲揪團網站
以遊戲玩家的揪團需求為出發點，開發前後端整合的網站。前端使用 Vue 與 Vuetify 建構介面，後端採用 Node.js、Express 開發 API，並以 MongoDB 儲存與操作資料，完成網站功能整合與部署。
Transition
從專題實作，走進實際的軟體開發
透過職訓期間的專題開發，我累積了從需求規劃、介面設計到前後端整合的實作經驗，並以此為基礎，取得第一份前端工程師的工作。
進入業界後，我開始更深入地理解實際的軟體開發流程，也逐漸認識到課堂學習與工作實務之間的差異。從功能開發、問題排查到既有系統的維護與調整，我持續累積經驗，並學習如何在實際專案中兼顧功能需求、程式可維護性與使用者體驗。
Chapter 03
全職
北極星測繪公司
前端工程師 ｜ 北極星測繪公司
負責公司系統的前端開發與維護，包含介面開發、既有問題追查與功能擴充。
- Vue 2
- Vue 3
- Vuetify 2
- Vuetify 3
- JavaScript
- OpenLayers
主要工作職責與開發重點
- Vue 2 與 Vue 3 專案開發維護
公司同時有 Vue 2 與 Vue 3 的專案，皆以 Options API 撰寫。在專案中處理 Dialog、Menu、表單驗證等元件的行為與樣式問題。
- 無障礙檢測修正
接手網站無障礙檢測的退件修正，涵蓋標題結構、鍵盤操作、表單標籤、跳過區塊與導盲磚，協助網站通過 A 等級檢測。
- 追查既有程式的缺陷
遇到由既有程式本身缺陷造成的錯誤時，實際追蹤資料流與業務邏輯找出根源後修正，並運用 JavaScript 原型鏈調整寫法，而不是只處理表面症狀。
- 擴充下單流程
擴充整個下單流程：先從程式面理解原有功能，再從使用者角度調整操作步驟，讓流程更直覺。
- 從使用者角度完善需求
收到後台 CRUD 功能的需求時，主動補上圖片預覽與放大檢視，讓管理者不必下載就能確認內容。
- OpenLayers 空間圖資
理解 OpenLayers 在測繪系統中的應用，協助整合地圖圖層與前端介面，並依需求調整相關參數。
案例：補足日期選擇器的無障礙操作
依無障礙標準改寫 Vue 3 專案時，發現 Vuetify 日期選擇器的鍵盤操作與報讀支援不完整。我撰寫共用的 mixin，補上方向鍵操作、焦點管理與日期報讀標籤，並套用到多個表單，最後以 NVDA 實測確認導讀正常。
02Tech Stack & Practice
技術與實際應用
整理我在公司專案與個人專案中實際用過的技術，以及用在哪些地方。
| 技術領域 | 技術與工具 | 實際應用 | 經驗來源 |
|---|---|---|---|
前端框架 | Vue 2 / Vue 3, JavaScript, TypeScript | 公司的 Vue 2 與 Vue 3 專案以 Options API 撰寫；個人專案使用 Composition API 與 TypeScript | 公司＋個人專案 |
UI 元件庫與樣式調整 | Vuetify 2 / Vuetify 3, CSS / SASS | Dialog、Menu 浮層定位、表單驗證、CSS 覆蓋與響應式排版修正 | 公司專案 |
無障礙 | JavaScript, NVDA | 依無障礙標準改寫 Vue 3 介面，以共用 mixin 補足日期選擇器的鍵盤操作、焦點管理與報讀標籤，並以 NVDA 實測導讀 | 公司專案 |
地理空間圖台 | OpenLayers | 協助整合地圖圖層與前端介面，並依需求調整相關參數 | 公司專案 |
全端延伸 | Vue 3, PrimeVue, Node.js, MongoDB, LINE Messaging API | 為朋友開發 LINE 官方帳號機器人，並延伸出後台管理與資料庫，讓店家能從後台修改 LINE OA 上顯示的資料 | 個人專案 |
建置與版本控管 | Vite, Webpack, Git, GitLab | 依 Lighthouse 檢測出 JS 檔案過大的問題，調整打包時的 chunk 切分；獨立開發，並以 Merge Request 流程審查 AI 產生的程式碼 | 實務經驗 |
API 整合與介面排查 | Postman, Axios, Chrome DevTools | 驗證後端 API、對齊 Payload 格式，透過 Console 與 Network 面板追蹤問題 | 公司專案 |
03Engineering Insights
工作中的技術累積
在專案開發與維護的過程中，逐步養成的三個工作習慣。
框架差異分析
同時接觸 Vue 2 與 Vue 3 專案，理解不同版本的元件 API、預設行為與樣式差異，不把一邊的寫法直接套到另一邊。
Framework Behavior Analysis
追到問題根源
從重現問題開始，追蹤資料流與業務邏輯，分辨是既有程式的缺陷、事件傳遞、生命週期順序還是 CSS 層級造成的，修正後再驗證結果。
Root Cause Debugging
從使用者角度完善需求
收到需求時，不只做到規格要求，也會思考實際使用的情境，例如在後台 CRUD 加上圖片預覽與放大，或在擴充下單流程時讓操作更直覺。
User-Centered Development