Karen網頁作品集
首頁
關於我
  • React - 圖片取色器
  • React - 7天天氣預報
  • Front-End Mentor Challenges
  • Vue - 職員聯絡簿
  • React - 通知管理介面
  • React - 文字拼字遊戲
  • NASA API - 每日天文圖片(APOD)
聯絡我
  • English
  • 繁體中文
首頁
關於我
  • React - 圖片取色器
  • React - 7天天氣預報
  • Front-End Mentor Challenges
  • Vue - 職員聯絡簿
  • React - 通知管理介面
  • React - 文字拼字遊戲
  • NASA API - 每日天文圖片(APOD)
聯絡我
  • English
  • 繁體中文
    • 關於我
    • 我的網頁作品集
    • 聯絡我

關於我

Ruo-Fang's photo

王若芳 Karen Wang

Front-end / UI / Web Developer

前端網頁開發者 / UI開發者

📋 背景

我是一位專注的 前端工程師 (Front-end Engineer),目前任職於 ViewSonic,專精於建構高效能桌面應用程式與網頁應用程式,並使用 React、TypeScript 與 Material-UI (MUI) 開發 內部 UI 元件庫。我的工作核心深植於創造具備無障礙性與包容性的數位體驗,包括實作符合 歐洲無障礙法案 (EAA) 的功能,並確保產品達到 WCAG 標準。

我畢業於 亞岡昆學院 (Algonquin College) 的互動媒體設計專業,以 3.95 的高 GPA 獲得院長榮譽 (Dean’s Honor),這使我能有效銜接設計與技術執行之間的鴻溝。我的職涯經歷包括在 加拿大政府 擔任學生網頁發布員,期間透過自動化電子報模板提升了 33% 的工作效率;以及在 Agility PR Solutions 擔任 UI 開發實習生,專注於重構可複用元件並優化 SCSS 架構。

我的背景獨特且多元;在轉職成為工程師之前,我曾在 星展銀行 (DBS Bank) 擔任行銷專員 近三年,這段經歷磨練了我的溝通技巧與策略思考能力。結合在 國立臺北大學經濟系 取得的文學學士學位,讓我能以邏輯清晰、數據驅動的視角投入開發,並精確洞察業務影響力。我是一位終身學習者,曾投入 七個月的長假深造 React 核心技術;我熱衷於 Agile/Scrum 協作環境,致力於交付具備擴充性且高品質的網頁解決方案。

聯絡我

🎓 學歷

  • 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 古箏社社長

💻 技能

網頁開發

  • React
  • React Redux
  • Redux Toolkit
  • JavaScript
  • Electron
  • Node.js
  • HTML
  • CSS
  • Sass/SCSS
  • Vue
  • Angular
  • TypeScript
  • Git & GitHub
  • PHP
  • Liquid

UIUX 設計

  • Figma
  • Figjam
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator

內容管理系統 (CMS)

  • WordPress
  • Shopify
  • Adobe Experience Manager (AEM)

💼 台灣工作經驗 🇹🇼

前端工程師 (Front-end Engineer)

  • 優派國際 · 全職正職 (Permanent)
  • 2024年3月 - 現在 · 2 年 1 個月
  • 新北市, 台灣 · 實體上班
  • 工作內容:
    • 為桌面應用程式開發無障礙功能以符合 歐洲無障礙法案 (EAA),並根據業務需求使用 Electron, React, React Router 與 TypeScript 實作新功能。
    • 持續改進並重構 (Refactor) 現有程式碼以縮減套件體積並提升效能,致力於將應用程式當機風險降至最低。
    • 建構供多個專案使用的內部私有 UI 元件庫,使用 React, TypeScript, 客製化 Material-UI (MUI) 及 Azure DevOps Artifacts 開發可複用元件。利用 Storybook 撰寫 UI 規範文件,並透過 Azure DevOps CI/CD 流水線將靜態文件佈署至 AWS S3。
    • 根據 UI/UX 設計師提供的設計系統、樣板 (Mockups) 與原型 (Prototypes),透過客製化 MUI 主題 (Themes)、元件與字體排版,確保高標準的 UI 品質與品牌一致性。
    • 利用 React 生態系(包含 React Router, React Redux, Redux Toolkit 與 MUI)交付前端網頁解決方案。透過 Axios 整合 API 並使用 Lodash 處理資料交互;使用 Cypress 撰寫自動化測試,確保程式碼品質與功能可靠性。
    • 在節奏快速的 Scrum 環境中表現出色,與 UI/UX 設計師、後端工程師、專案經理及產品開發經理緊密協作。在 Agile 衝刺週期中主動重新評估任務優先級,以優化整體開發效率。

行銷襄理 (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
最近更新: 2026/3/28 中午12:04
Next
我的網頁作品集

© 2026 Ruo-Fang Wang.