Skip to main content

introduction

經歷摘要​

  • 4 年以上前端開發經驗
  • 3 年電商開發經驗
  • 產業接觸：電子零組件電商(TechDesign), 論壇(nuForum), 線上影音平台(HiSKIO)
  • 跨部合作：擔任跨部門的合作窗口，曾有接觸 Marketing、PM、UI/UX Design、Engineer、QA。主導引入三方 HeadLess CMS (storyblok)，讓 Marketing 在內容更新上完全和程式碼分離
  • 獨立創建專案：從零開始規劃並建立專案，負責設計專案架構、規劃模組化結構，並制定統一的程式碼風格和開發規範，確保程式的可讀性和可維護性。

Side Project​

  • 排球競賽網站 (前台主管、後台 admin 、backend api)
    • Nuxt, NestJS

工作內容​

澤碩科技 ~ ( 2025.04 至 仍在職)​

網頁應用工程師 (Frontend Developer / Web Application Developer)

工作內容:

2026

  1. 使用 vben framework 實作 admin portal
  2. study golang 語言

2025

網頁 Iot App

Step 1: 基礎架構開發與核心功能實作

  • 技術選型與架構設計：確立前端技術棧（Vue.js, Tailwind CSS, Pinia 等），建構高擴展性的 Website 整體架構。
  • 功能對標與移植：針對現有 Power Pro App 功能進行分析，於 Web 端完整復刻並實現相同業務邏輯。
  • 介面規劃與 UI 實作：獨立規劃 Web App 的視覺動線與前端框架，優化使用者交互體驗。
  • 驗證與通知系統整合：導入 Firebase Authentication 實作登入流程，並整合 Web Push Notification 提示功能。
  • 通訊模組對接：接手並優化 client-ts 專案，實現 Command 指令發送與系統串接。
  • 藍牙通訊整合：開發 Bluetooth 控制模組，實現 Web 端與硬體 Panel 的直接連線與操控。
  • 雲端物聯網控制：串接 AWS IoT Core 並透過 MQTT 協定實作遠端 Panel 控制功能。
  • 感測器系統開發：實作各類感測器（TPMS 胎壓、Propane 丙烷、Door Lock 門鎖）之藍牙與 IoT 遠端監控功能。

Step 2: 跨平台打包、架構升級與自動化部署

  • 底層連線機制重構：將 client-ts 的連線邏輯改寫，改為調用 Capacitor Native Library 以優化藍牙掃描與連線穩定度。
  • 跨平台 App 轉化：利用 CapacitorJS 將 Website 封裝為原生應用程式，使其具備上架 iOS/Android App Store 之規格。
  • 身份驗證流程優化：針對 App 環境重新實作並優化 Firebase Login 認證流程。
  • OTA 熱更新技術研究：深入研究 CapacitorJS 的 Over-the-Air (OTA) 更新機制，實現無需重新上架即可更新 App 內容。
  • 多租戶主題定制系統：規劃動態主題（Theme）機制，支持透過後台管理端（Admin）調整外觀，實現「一套代碼、多種樣貌」的靈活建構。
  • CI/CD 自動化流程規劃：設計並建立完整的自動化建置與部署流水線，實現 App 編譯、封裝與發布的自動化作業。

RAG LLM 文件詢問系統

  • 重新規劃前端專案，把專案 Vue 的框架引用在 Django 的專案中。
  • 協助規劃 chat 畫面
  • 討論 Gemini Live API 實現 voice to voice 的功能，不在透過 speech to text
  • 實作 RAG LLM 的文字對話功能
  • 實作 website voice 收音功能，透過 website 收音轉為 pcm 的格式傳給 websocket (Gemini Live API)

TechDesign ~ ( 2021.07 至 2025.03)​

前端軟體工程師 (Frontend Developer)

2025

  • 使用 Vben UI 框架 開發電子產品搜尋型錄。
  • 導入 Turborepo，實現多專案單一倉庫管理，將 website 和 admin 整合至同一個 repo。

2024

  • 自學 NestJS 開發 API，並深入了解資料庫設計，提升與後端溝通的效率。
  • 使用 Nuxt 3 開發 華邦採購系統，串接 .NET WebAPI 和 SOAP API，優化集團採購流程電子化。
  • 開發 nuforum 論壇網站 及管理後台，並應用本地化 TinyMCE，提升內容編輯的便利性。
  • 建構 動態 CSP（內容安全政策）功能，使 DevOps 可自由新增三方服務所需的網域，提高網站安全性。

2023

  • 導入 Headless CMS (Storyblok)，將 techdesign 專案的內容與程式分離，使 Marketing 團隊能獨立管理內容，大幅減少 Landing Page 發布頻率，提升開發效率。
  • 優化產品搜尋頁的 Pagination，提升 Google Index 收錄率，大幅強化 SEO 表現。
  • 改善圖片格式，將 PNG / JPEG 轉換為 WebP，減少下載大小，加速網站載入速度。
  • 縮減網站字體大小，進一步提升網站效能。

2022

  • 重構高耦合的程式碼，降低耦合度，減少相同問題的發生機率，提高維護性。
  • 使用 Angular 開發 techdesign 網站，負責以下模組：
  • 產品清單 & 明細頁面
  • 企業報價系統
  • 購物車重構
  • 首頁重構

2021

  • 導入 TailwindCSS，加速開發流程。
  • 花約三個月學習 Angular，並開始參與 techdesign 網站的 Sprint 開發。
  • 透過 AWS 和 Nginx，將原本 MVC 架構 的專案轉為 前後端分離架構。

有點意思股份有限公司 ~ (2020.06 至 2021.07)​

前端軟體工程師 (Frontend Developer)

工作內容:

  • 前端專案 components 規劃
  • 配合企劃製作官網活動頁面
  • HiSKIO 官網切版和資料介接
  • Code Free 切版和資料介接 使用工具: • Nuxt • Tailwindcss • Git • Figma • Postman

合華科技股份有限公司 ~ (2019.11 至 2020.05)​

前端軟體工程師

工作內容：

  • 萬芳醫院報表系統
  • 空中救護 app 開發

使用工具：

立誠光電股份有限公司 ~ (2015.03 至 2019.09)​

品質工程課長 品質工程課長 (2019.02 ~ 2019.09)

  • Team Lead - 帶領 QE 人員(3 人): 建立異常追蹤報表
  • 帶領 QE 人員(3 人): 工廠異常處理處理
  • 定期報告工廠良率 & 訂定未來改善計畫

專案開發工程師 (2017.02 ~ 2019.02)

  • 開發歐美客戶產品
  • 研發高精密度網印製程
  • 出差評估網印設備 & zygo 量測設備
  • 開發產品轉導入量產階段

製程整合工程師 (2015.03 ~ 2017.02)

  • 跨站點製程異常處理
  • 重點產品良率分析