關於我

王若芳 Karen Wang

Front-end / UI / Web Developer

前端網頁工程師

📋 背景

我是一位專精於 React 生態系的前端工程師，具備約 4 年以上開發經驗，專注於打造具備可維護性、擴展性與效能優化的 Web 與 Electron 應用。

目前於 ViewSonic 負責前端架構與效能優化，包含重構既有系統、建立跨專案 UI 元件庫，以及導入 CI/CD、自動化測試與模組化架構設計。透過這些優化，有效提升開發效率、降低回歸測試成本，並改善應用效能與穩定性（如提升 Lighthouse 分數與降低 bundle size）。

過去於加拿大政府工作期間，負責無障礙標準（WCAG）檢測與網站品質驗證，確保可用性與可存取性；在 Agility PR Solutions 則專注於 UI 元件開發，將設計系統轉化為可重用元件，強化介面一致性與開發效率。

早期於金融業的行銷經驗，使我具備良好的產品思維與使用者導向，能從商業目標轉化為技術實作。

我擅長在敏捷開發環境中與跨職能團隊合作，致力於交付高品質且具影響力的產品體驗。

🎓 學歷

• Algonqion College - 渥太華, 安大略省, 加拿大

  • 互動媒體設計學憑 (Diploma, Interactive Media Design)
  • 2021年9月 - 2023年8月
  • 成績: GPA: 3.95
  • 活動: 2021-2023 院長榮譽學生 (Dean Honor 2021-2023)
  • 學習技能:
    • 網頁開發: HTML, CSS, SCSS, JavaScript, React, Vue, Vite, Git, GitHub
    • 設計與媒體: Adobe Creative Suite
    • 內容管理系統 (CMS): WordPress, Shopify
    • UI/UX: Adobe XD, Figma, Figjam

• 國立台北大學 - 新北市, 台灣

  • 經濟學學士
  • 2013年9月 - 2017年6月
  • 成績: GPA: 3.48
  • 活動與社團: 2015-2016 古箏社社長

💻 技能

AI 代理人

• Github Copilot
• Claude Code

網頁開發

• React
• React Redux
• Redux Toolkit
• TypeScript
• JavaScript
• Vite
• Git & GitHub
• HTML
• CSS
• Sass/SCSS

桌面應用程式

• Electron (Node)

UI 元件庫

• Material-UI (MUI)

CSS 框架

• Tailwind CSS

E2E 測試

• Cypress

單元測試

• Vitest

CI/CD

• Azure DevOps Pipeline
• GitHub Actions

UIUX 設計

• Figma
• Figjam
• Stitch AI
• Adobe XD
• Adobe Photoshop
• Adobe Illustrator

內容管理系統 (CMS)

• WordPress
• Shopify
• Adobe Experience Manager (AEM)

💼 台灣工作經驗 🇹🇼

前端工程師 (Front-end Engineer)

• 優派國際 · 全職正職 (Permanent)
• 2024年3月 - 現在 · 2 年 3 個月
• 新北市, 台灣 · 實體上班
• 工作內容:
  • 透過 code splitting、快取與 bundle 優化提升效能，Lighthouse 分數由 71.5 提升至 94.5。
  • 主導 Electron 重構，將 bundle 體積降低 27%，並降低當機風險。
  • 建立 AI 自動化流程（AI Skills），將人工成本降低最高達 97%：
    • 自動生成 Release Notes 並產出 Outlook 草稿（1 小時 → 2 分鐘）。
    • 實作依賴套件稽核機制，確保符合 N-1 版本規範。
  • 建立跨專案 MUI UI 元件庫，發佈至 Azure Artifacts 並透過 CI/CD 自動部署 Storybook；共 14 個元件與 2 種版型，涵蓋 50% 以上使用情境。
  • 導入 Cypress E2E 測試，將回歸測試由約 3 小時縮短至 10 分鐘（-94%）。
  • 建立 CodeCrush UI 主題系統與基礎設定，提升設計一致性與擴展性。
  • 導入 Vite + ESM，縮短約 50% 建置時間。
  • 採用 Container/Presentational 架構與自訂 Hooks，提升可維護性。
  • 建立 i18n 多語系支援（react-i18next）。
  • 使用 React 與 TypeScript 開發符合 EAA 的 Electron 應用與商業邏輯。
  • 於 Scrum 團隊中協作，整合設計、產品與後端。

行銷襄理 (Marketing Officer)

• 星展銀行(台灣) · 全職正職 (Permanent)
• 2018年7月 - 2021年4月 · 2 年 10 個月
• 台北市, 台灣 · 實體上班
• 工作內容:
  • 策劃了一系列從分行溝通到數位行銷的全面行銷策略，涵蓋多種消費銀行產品。在房貸的數位行銷活動中，保持令人印象深刻的NT$ 600 左右的 CPL，展現卓越的專業能力。
  • 與多個小組的跨部門無縫合作，磨練並展現出色的領導和溝通技巧。
  • 對包括貸款、存款和投資產品在內的消費銀行產品策略性地設計並執行社群媒體宣傳活動。
  • 善用DBS Bank（新加坡）的資源，策劃並發布了21篇金融教育文章和影片。開創性地推出了每週兩次和每日的通訊，專門用於在尊貴的財富客戶中推廣投資產品，顯著提高了品牌在這一領域的知名度。
  • 構思、組織和主持了針對基金的高度成功網路研討會，在令人印象深刻的一個月時間內實現了既定的產品目標。

💼 加拿大工作經驗 🇨🇦

網頁發布學生 (Student Web Publisher)

• 加拿大政府 (兼職)
• 2022年6月 - 2023年8月 · 1 年 3 個月
• 渥太華, 安大略省, 加拿大 · 實體和遠距混合上班
• 工作內容:
  • 進行了對網頁的全面品質保證檢查，確保符合WCAG標準，保持高度的可訪問性。
  • 在回應客戶具體需求方面展現了在使用Adobe Experience Manager（AEM）有效實施設計的能力，製作定制的網頁，展現出熟練的技術。
  • 成功修復了50個網頁中的壞連結，確保使用者能夠無縫導覽，並隨後以更新、功能正常的連結發布這些頁面。
  • 透過AEM對221個過時頁面進行封存，優化整體用戶體驗。
  • 在遷移後成功整合了772個新連結到網頁中，確保順暢過渡和最佳功能。
  • 在創建和發布每週通訊時發揮了重要作用，使用HTML和CSS代碼在AEM文本區塊中增強了模板。這優化了編輯流程，節省了33%的工作時間，並使非代碼人員更容易進行維護。
  • 使用Adobe Analytics生成深入的網頁分析報告，根據內部客戶的規格進行定制。報告包括重要的指標，如熱門搜索詞、訪問高峰時段等，為戰略決策提供有價值的見解。
• 技能:
  • Web Content Accessibility Guidelines (WCAG)
  • Adobe Experience Manager (AEM)
  • Adobe Analytics (AA)
  • HTML
  • CSS

UI開發工程師 (實習) (UI Developer Co-op)

• Agility PR Solutions · (全職實習)
• 2023年1月 - 2023年4月 · 4 個月
• 渥太華, 安大略省, 加拿大 · 遠距上班
• 工作內容:
  • 應用HTML、SCSS、JavaScript 和基本的 Angular 技能，精通處理 UI 和 mock-ups 上的不一致之處。調整 SCSS 代碼細節以確保元件與設計模型完全一致，確保無縫的使用者體驗。
  • 在多個產品頁面上更新了七個通用元件，包括勾選框、單選按鈕、輸入框、文本區域、選項、各種按鈕和側邊欄，利用 HTML、SCSS、JavaScript、Angular 和 Typescript，將它們更新與新的模型 (mock-ups) 一致。
  • 透過有系統地根據新模型更新SCSS樣式表和變數，展現對設計過程中細節的高度關注。
  • 熟練操作Jira框架，並在Agile/Scrum開發過程中解決100%指派的UI問題工單 (tickets)。在充滿活力的前端團隊中展現出色的時間管理和團隊協作技能，始終按時完成任務。
• 技能:
  • TypeScript
  • Angular
  • Front-End Development
  • Sass (SCSS)
  • Agile(Scrum) Development Process