自我介紹

我是一位有八年以上實務經驗的前端工程師。職涯早期從後端入行，寫過 PHP、Node.js，後來逐漸把重心轉到前端，目前主要使用 Vue 3 與 React 生態系進行 SPA 架構設計與開發。

日常工作中，我習慣用 Vite 搭建專案腳手架、透過 Pinia 管理全域狀態，搭配 Vue Router 做路由守衛與權限攔截。在測試方面，我有使用 Playwright 撰寫 E2E 自動化測試的經驗，也熟悉 Lighthouse 與 Web Vitals 來做前端效能調校。跨平台的部分，我有 Flutter 和 React Native 的實作經驗，也碰過 Nuxt 3 和 Next.js 的 SSR/SSG 場景。

因為有後端背景（Golang / PHP），所以我在跟後端團隊溝通 API 規格、WebSocket 協定或 JWT 驗證流程時，通常可以直接對齊技術細節，不太需要額外的轉譯成本。過去交付的專案涵蓋金融科技、醫療管理、IoT 即時監控等不同領域，讓我對不同產業的業務邏輯與前端需求都有一定程度的掌握。

核心專長與技能

前端框架與架構

Vue 2/3 React.js Nuxt 3 / Next.js SPA 架構 狀態管理 (Pinia/Vuex)

建構工具與品質

TypeScript Vite / Webpack Playwright 效能優化 (Web Vitals)

跨平台與其他專長

響應式設計 Flutter (Dart) 設計系統建立 WebSocket 即時應用

後端與 DevOps

Golang PHP Node.js Docker CI/CD (GitHub Actions)

工作經歷

資深前端工程師 | 富鈞水資科技

2025/12 - 2026/05

進公司後從零開始重建整個前端系統，從 Vite 專案初始化、Element Plus 元件封裝、到 WebSocket 即時數據渲染的整合，都是我一個人負責規劃跟落地的。因為團隊規模不大，後端的 Golang API 和部署腳本我也會一起處理。

即時監控儀表板與前端系統架構
Vue 3 Element Plus Vite Chart.js WebSocket
  • 主導整個前端系統架構重構，建立模組化元件庫與統一設計規範
  • 開發即時監控儀表板、歷史趨勢圖表、告警管理、設備管理等核心模組
  • 實作 WebSocket 即時數據推送的前端接收與渲染機制
  • 開發 CWMS 廢污水監測系統前端模組（狀態碼管理、有效率查詢），符合法規需求
權限管理系統 UI 與多租戶隔離
Vue Router JWT SPA
  • 實作多租戶權限隔離 UI 與管理員視角切換機制，整合 JWT 驗證路由守衛
  • 建立前端權限管理系統，包含群組、身份別、角色樣板的完整 CRUD 介面
  • 開發管理員總覽儀表板，跨公司查看站點、告警、LINE 綁定等彙總資訊
自動化測試與 DevOps
Playwright Docker Compose GitHub Actions
  • 使用 Playwright 撰寫 E2E 自動化測試，涵蓋登入、權限驗證等核心流程
  • 建立容器化部署流程，管理 QA / Demo / 正式環境與 Nginx SSL 續證
全端整合與後端能力
  • 具備 Golang (Gin) 後端 API 開發經驗，獨立完成 RESTful API 設計
  • 實作 LINE Bot SDK 告警推播系統與 WebSocket 即時遙測後端
  • 採用 golang-migrate 管理資料庫遷移，設計備援與備份策略

資深前端工程師 / 全端開發 | 自由接案

2024/06 - 2025/12

這段期間以自由接案的方式跟不同產業的客戶合作，從需求釐清、技術選型到部署上線都自己來。前端架構是我的主要產出，後端 API 和雲端部署則是視專案需要搭配處理。

融資放貸數據分析平台
Flutter (Dart) 跨平台 UI i18n
  • 建構跨平台（iOS/Android/Web）分析介面，實作響應式儀表板與互動式圖表
  • 支援 7 種語言國際化，整合 Bitfinex API 的前端數據即時串接
醫美管理系統 SPA
Nuxt 3 Vue 3 Playwright
  • 使用 Nuxt 3 開發 SPA 管理系統：包含客戶管理、日曆排程、庫存與報表介面
  • 開發獎金分潤系統與網紅合作管理平台，並實作 Playwright E2E 測試
桃園路燈監控系統
Vue 3 Google Maps API
  • 開發地圖式即時監控介面，整合 Google Maps 實作路燈標記與狀態視覺化
金庸武俠 AI 文字冒險遊戲引擎（Side Project）
Vue 3 Vite Pinia WebSocket Golang MongoDB Qdrant Gemini API RAG
  • 獨立開發 LLM 驅動的即時敘事遊戲引擎，前端以 Vue 3 + Vite 打造，拆分超過 20 個功能元件（CombatView 戰鬥系統、MeridianModal 經脈視圖、EquipmentModal 裝備系統、NPC 互動面板、WorldDashboard 世界儀表板等）
  • 透過 WebSocket 實作前後端即時串流通訊，AI 生成的敘事文字以逐字動畫方式即時渲染，支援斷線重連與 Session 還原
  • 使用 Pinia 管理複雜的遊戲全域狀態（角色六維屬性、背包道具、武學境界、NPC 關係鏈），搭配 Vue Router 處理多場景切換
  • 實作 Mobile-first 響應式設計，包含手機版選單、觸控操作、自適應佈局與音效控制元件
  • 後端以 Golang 整合 Google Gemini API，設計七步驟 Turn Engine 流水線（防鬼打牆 → 模組攔截 → 動態事件 → Pre-LLM → RAG → 敘事 → Extraction），搭配 Extraction-based 狀態更新機制自動同步遊戲狀態
  • 實作 RAG 檢索增強生成架構：使用 Qdrant 向量資料庫儲存武學招式、地點、NPC 等世界觀知識，透過 Embedding 向量化查詢，將相關上下文自動注入 LLM Prompt，提升敘事的世界觀一致性
  • 使用 MongoDB 做遊戲狀態持久化（存檔、NPC 記憶、歷史對話），Docker Compose 整合 Qdrant + MongoDB + Caddy 一鍵部署

前端工程師 / 全端開發 | 金財租有限公司

2020/10 - 2024/05

在這間公司待了將近四年，從一開始只有我一個工程師，到後來同時帶著行銷團隊一起協作。除了寫程式以外，也負責 SEO 優化和數據分析的技術面支援，算是技術跟行銷都有碰到。

內部管理系統前端開發
React.js Vue.js Socket.io Chart.js
  • 用 React 從頭開發員工工單系統，處理多人同時編輯的即時衝突偵測與鎖定機制
  • 用 Vue.js 搭配 Chart.js 開發出貨入庫追蹤的視覺化儀表板，讓倉管人員可以即時掌握庫存動態
SEO 優化與前端效能調校
Google PageSpeed Lighthouse Search Console Ahrefs Cloudflare WordPress
  • 建立 Google PageSpeed Insights 自動化監控流程，定期追蹤 Core Web Vitals（LCP、FID、CLS）指標變化
  • 針對公司官網與產品頁面執行 SEO 技術優化：壓縮圖片資源、實作 lazy loading、調整 Critical CSS 載入順序，將 Lighthouse Performance 分數從 50+ 拉到 85+
  • 透過 Google Search Console 監控索引狀態、涵蓋範圍錯誤與搜尋成效，定期排除 Crawl Error 並提交 Sitemap 更新
  • 使用 Ahrefs 進行關鍵字研究與競品反向連結分析，搭配 Google Trends 觀察搜尋趨勢變化，作為內容策略調整依據
  • 導入 Cloudflare 做 CDN 加速與快取策略設定（Page Rules、Cache-Control），同時管理 DNS、SSL 憑證與 DDoS 防護
  • 管理 WordPress 技術面 SEO（Sitemap、Robots.txt、301 重導向），確保網站索引健康度
後端與行銷科技
  • 使用 Laravel 開發後端 API，搭配 MariaDB 做資料庫查詢優化（Index 調整、Slow Query 分析）
  • 協助行銷團隊進行 Google Ads 與 Meta Ads 的技術面支援，包含轉換追蹤碼埋設（GTM / Pixel）、Landing Page 效能調校與 UTM 追蹤參數管理

全端工程師 | 古己

2019/04 - 2020/07

這份工作是跟朋友一起創業，除了負責技術開發以外，更多的時間花在處理業務問題跟釐清產品方向。技術面主要把後端從舊版 PHP 遷移到 Laravel，並導入 Docker 容器化部署。

支付應用程式開發
Unity Laravel Docker RESTful API
  • 開發支付應用程式的前端介面與 RESTful API 後端
  • 將舊版程式碼遷移至 Laravel 框架，整合多個第三方支付閘道 API
  • 導入 Docker 容器化，建立 Ubuntu 上的自動化部署流程
  • 重新設計資料庫架構以優化支付交易處理效能

全端工程師 | OVO

2018/06 - 2019/04

主要負責公司內部管理系統與官網的開發維護，同時協助後端團隊撰寫 RESTful API 供 Android TV 應用程式串接使用。

內部系統、官網與後端 API 開發
Node.js Socket.io PM2 RESTful API
  • 開發與維護公司內部管理系統及官方網站前端介面
  • 協助撰寫後端 RESTful API，提供 Android TV 應用程式所需的資料接口
  • 使用 Socket.io 建構即時通訊功能，搭配 PM2 叢集模式部署確保服務穩定性

後端工程師 | InproHub

2017/07 - 2018/03

第一份正職工作，負責後端系統的現代化重構與第三方 API 整合。

後端現代化重構
PHP Laravel MySQL
  • 將舊版原生 PHP 程式碼重構為 Laravel 框架，提升程式碼可維護性與測試覆蓋率
  • 完成多個第三方系統的資料 API 整合
  • 開發後端自動化報表系統，定期產出資料分析報告

學歷

資訊工程學系 學士學位

淡江大學

2016 - 2020 | 台北市

語言能力

  • 中文： 母語
  • 英文： 專業工作程度