Hi I’m Yu-Xuan!

我是前端網頁設計工程師
充滿熱忱的前端開發者，具設計背景，融合創意與技術於開發中

作品集

ABOUT

您好，我是蔡雨諠

我是一位充滿熱忱的初階前端開發工程師，擁有約九個月的前端實務經驗。
早期曾擔任行銷美編與業務助理，因工作中接觸到網站設計與後台開發，激發了對前端技術的濃厚興趣。
離職後積極投入學習，完成泰山職訓局的「前端網頁設計課程」，
課程期間，獨立完成專題網站開發，涵蓋資料庫結構規劃、前端設計發想、色彩搭配及使用 Vue3 框架開發，奠定了前端技術基礎。

進入職場後，主要負責 NSS 系統與廣播系統的前端功能維護與開發，
包括系統模組的問題修復、功能客製化及無障礙功能的完善。
例如協助修正臺北市北投區逸仙國民小學網站，達成無障礙 AA 標章標準，
並針對台北市學校統一使用的「台北市集中站」進行指定文件刪除與更新代碼上傳。
另有處理多項前端落點掃描後的修復作業，確保網站符合無障礙規範（如 WCAG 2.1 AA 準則），提升網站的可及性與用戶體驗。
此外，具備跨部門協作經驗，能與 PM、後端及測試團隊有效溝通，確保開發進度與驗收品質符合需求。

未來期望持續精進 Vue3、前端工程化及無障礙網頁開發的專業能力，成為能獨當一面的前端工程師，並貢獻於用戶體驗優化與高效能網頁應用的實現。

工作經歷 Work History

2024年11月~2025年2月

網韻資訊股份有限公司

擔任職務：前端工程師

無障礙網站架設系統(NSS) : 系統模組的問題修復、功能客製化及無障礙功能的完善(取得無障礙認證)
例如：臺北市北投區逸仙國民小學網站，達成無障礙 AA 標章標準。人工檢測報告連結
智慧校園廣播系統 : 前端功能維護與開發、響應式設計（RWD）
資料處理及版本更新 : 台北市學校統一使用的「台北市集中站」進行指定文件刪除與更新代碼上傳
修復落點掃描 : 多項前端落點掃描後的修復作業，提升網站的可及性與用戶體驗
此外，具備跨部門協作經驗，能與 PM、後端及測試團隊有效溝通，確保開發進度與驗收品質符合需求。

使用技術 : VUE、HTML、CSS 、Javascript、GIT

2019年05月~2023年12月

格森塑膠企業有限公司

擔任職務：行銷美編人員

美編設計 : 海報、Banner、設計審稿、調整設計作品集
網路行銷 : LINE@ / FB粉專行銷活動PO文企劃發想、活動內容執行製作、蝦皮及各大賣場商品新增刪改
業務助理 : 成立訂單、業務開發、客戶溝通

使用技術 : Photoshop、Illustrator、網路賣場(蝦皮)

2018年09月~2019年2月

百年盛實業有限公司

擔任職務：網路行銷

美編設計 : 活動海報、Banner、店面佈置、節慶規劃陳設
網路行銷 : LINE@ / FB粉專行銷活動PO文企劃發想、活動內容執行製作、蝦皮及各大賣場商品新增刪改、促銷活動規劃與pm聯絡
業務助理 : 成立訂單、業務開發、客戶溝通
開店面賣場主管 : 活動、加購、促銷產品、陳列擺設規劃執行製作、主動邀約部落客來賣場行銷宣傳

使用技術 : Photoshop、Illustrator、網路賣場（蝦皮、露天、PChome）

作品集 PORTFOLIO

工作 - 臺北市大學附設實驗小學

觀看網頁

android手機公告訊息搜尋欄位異常多方測試、測試完善功能

問題說明：
校方反應使用android手機，在學校網頁公告訊息模組中搜尋關鍵字，按了enter後會跳到下方公告彙整中(如影片)，模組及版型皆全數更新
客戶實測影片

了解問題目標 : Chromium 引擎在 Android 環境中的特定行為或兼容性問題

了解問題模組 : 公告訊息模組

工作 - 臺北市逸仙國民小學

觀看網頁無障礙AA檢測通過文件

系統模組的問題修復、功能客製化及無障礙功能的完善(取得無障礙認證)

GN1210101E - 確認所有功能都能透過鍵盤介面來操作

問題說明：請執行中央區塊「全文檢索」單元內的「行事曆」連結。使用鍵盤操作，執行「每頁筆數」的按鈕後，鍵盤焦點無法遊走到選擇筆數的項目，請檢視問題並修正。（透過Edge與Firefox檢測）

**PD提供測試影片： Jam | 測試影片連結

了解問題目標 : 單元內的「行事曆」連結。使用鍵盤操作，執行「每頁筆數」的按鈕後，鍵盤焦點無法遊走到選擇筆數的項目

了解問題模組 : 全文檢索模組

成果對比

修正前問題截圖

修正後效果截圖

修正紀錄

1. 開啟選單後自動將焦點移至第一個項目


if (val) {
  // 當選單打開時，將焦點移到第一個選項
  this.$nextTick(() => {
    const firstItem = document.querySelector('.dropdown-item-m');
    if (firstItem) firstItem.focus();
  });
}

2. 選單項目加入完整鍵盤操作邏輯


handleKeydown(event) {
  const items = Array.from(this.$refs.dropdownItems);
  const currentIndex = items.indexOf(event.target);
  // 移動焦點到下一個項目
  if (event.key === 'ArrowDown') {
    items[Math.min(currentIndex + 1, items.length - 1)].focus();
  } else if (event.key === 'ArrowUp') { 
    // 移動焦點到上一個項目
    items[Math.max(currentIndex - 1, 0)].focus();
  } else if (event.key === 'Enter') { 
    // 按下 Enter 鍵選擇當前項目
    this.each = 5 + (currentIndex + 1) * 5; // 使用 currentIndex 計算值
    this.setMap('eop', false); // 關閉選單
  }
}

3. 無障礙屬性加強

按鈕：aria-expanded, aria-controls, aria-label
下拉選項：role="option", aria-selected, aria-label, tabindex="0"

<button
  class="ct-btn btn-sm radius-xs ct-dropdown-toggle btn-secondary btn-line"
  @click="setMap('eop', !map.eop)"
  :aria-expanded="map.eop"
  aria-controls="dropdownMenu"
  aria-label="每頁筆數選單"
  key="eachBtn"
>
  <!-- :aria-expanded = 控制摺疊 -->
  {{ $t('GA017_004') }}:{{each}}
</button>
<div
  id="dropdownMenu"
  class="dropdown-container-m"
  style="margin-top: -2px;"
  :class="{'menu-visible': map.eop}"
  role="menu"
>
  <ul class="dropdown-menu-m" role="menu">
    <li
      class="dropdown-item-m ct-ripple"
      v-for="i in 5"
      @click="each = 5 + i * 5"
      :class="{'selected': each == 5 + i * 5}"
      role="option"
      tabindex="0"
      :aria-label="'顯示' + (5 + i * 5) + '筆'"
      :aria-selected="each == 5 + i * 5"
      @keydown="handleKeydown"
      ref="dropdownItems" 
      ref-in-for
    >
      {{ 5 + i * 5 }} 
    </li>
  </ul>
</div>

工作 - 臺北市國中課程工作圈

觀看網頁無障礙AA檢測通過文件

無障礙色彩對比修正(取得無障礙認證)

問題說明：
GN2140300E 確認文字（及影像文字）與文字後面的背景間，至少有4.5:1的對比值

GN2140301E 確認大尺寸文字（及影像文字）與文字後面的背景間，至少有3:1的對比值

了解問題目標 : 主站＋子站皆需要重新確認色彩對比值

專題 - 鼠兔永恆居所

觀看網頁公開程式碼

獨立完成專題網頁開發，從初期的主題設定、資料庫結構規劃、前端設計發想與顏色配色，並使用 Vue 框架構建網站，具備 Vue3 的基礎知識

生活型態與觀念轉變「視寵物如子女」相當盛行，
當心愛的寵物往生，對寵物後事也會慎重處理

寵物生命禮儀大多是所有寵物放一起
是不是鼠兔跟狗貓放一起牠會害怕?
如果他們有自己的永恆住所...

於是萌生了想要專門為小動物而服務的永恆住所

前台功能

會員登入/註冊
前台管理者頁面
線上祭祀功能(互動效果)
頁面視覺呈現、動畫效果

使用技術

使用 Vuetify 框架開發
使用 AOS Swiper GSAP 實現動畫效果
RWD 響應式網頁設計
以Pinia存取使用者資訊、API回傳資料
Vue Router 頁面切換
axios 套件處理 AJAX

後台功能

服務項目增改刪查
總訂單查詢

使用技術

使用 Node.js + Express 框架
RESTful API 進行請求
Passport 處理身份驗證
編碼與解碼 jwt
MongoDB + Mongoose 套件，建立 Schema
Cloudinary 進行雲端媒體管理
Multer 套件處理上傳文件

遊戲 - 換裝娃娃 Dress Up Paper Dolls

觀看網頁公開程式碼

發揮創意，解析小遊戲並進行小遊戲開發。
遊戲頁面所使用之圖片僅作為學習與課堂作業用途，無任何商業目的。所有圖片版權歸原作者所有，若有侵權請聯繫我們以立即處理。

重溫小時候的記憶回味兒時遊戲時光　
重新打造一個自己喜歡的風格及人物、場景
獨自發想遊戲的流程及實作遊戲

利用拖放功實現創意互動體驗

服飾、鞋子的展示窗更換
拖放在人物身上的效果呈現

使用技術

使用 HTML
使用 CSS
使用 JavaScript

Line - 機器人回覆 / 圖文訊息

公開程式碼

尋找政府開放 JSON 檔案並串 api 使用 axios 來進行 get 取資料
遊戲頁面所使用之圖片僅作為學習與課堂作業用途，無任何商業目的。所有圖片版權歸原作者所有，若有侵權請聯繫我們以立即處理。

領養代替購買，把愛傳出去
送養資訊利用使用率最高的 Line 來串接成官方帳號，讓讀取率及使用度提升
簡易操作讓撥打電話及地址訊息都能以按鈕的方式來簡易操作

傳送指定訊息即可觸發圖文
利用圖文選單發送關鍵字訊息，讓版面更簡單

使用技術

串 api
使用 axios 來進行 GET 取得資料
使用 axios 來進行 POST 創建資料
使用 axios 來進行 PUT 更新資料
使用 axios 來進行 DELETE 刪除資料

layout - 模擬其他網頁 ( 練習刻板技巧 )

公開程式碼

模擬優秀網站練習刻板技巧
頁面所使用之圖片僅作為學習與課堂作業用途，無任何商業目的。所有圖片版權歸原作者所有，若有侵權請聯繫我們以立即處理。

從模擬中學習切版技巧，是在開始學習的歷程上至關重要的一步
透過實際操作與反覆練習，不僅能快速掌握基本概念，還能培養應對不同版面設計需求的靈活度

使用技術

使用 HTML
使用 CSS
使用 AOS 動畫

技能 SKILLS

前端開發

HTML

CSS

Scss / Sass

Bootstrap

JavaScript

jQuery

Vue.js

Vuetify

後端技術

Node.js

MongoDB

Git 版本控管

視覺設計

Photoshop

Illustrator

Figma

UI / UX

CONTACT ME

Hi I’m Yu-Xuan!

我是 前端網頁設計工程師 充滿熱忱的前端開發者，具設計背景，融合創意與技術於開發中

ABOUT

您好，我是蔡雨諠

工作經歷 Work History

網韻資訊股份有限公司

擔任職務：前端工程師

格森塑膠企業有限公司

擔任職務：行銷美編人員

百年盛實業有限公司

擔任職務：網路行銷

作品集 PORTFOLIO

工作 - 臺北市大學附設實驗小學

目標問題

成果對比 及 修正紀錄

工作 - 臺北市逸仙國民小學

目標問題

成果對比 及 修正紀錄

工作 - 臺北市國中課程工作圈

目標問題

成果對比 及 修正紀錄

專題 - 鼠兔永恆居所

發想動機 主題發想新創產業

使用者前台 前台功能使用技術

前台功能

使用技術

管理者後台 後台功能使用技術

後台功能

使用技術

遊戲 - 換裝娃娃 Dress Up Paper Dolls

發想動機 重溫兒時回憶

使用者前台 前台功能使用技術

利用拖放功實現創意互動體驗

使用技術

Line - 機器人回覆 / 圖文訊息

發想動機 領養寵物

使用者前台 前台功能使用技術

使用技術

layout - 模擬其他網頁 ( 練習刻板技巧 )

模擬心得 前台功能使用技術

使用技術

技能 SKILLS

前端開發

後端技術

視覺設計

我是前端網頁設計工程師
充滿熱忱的前端開發者，具設計背景，融合創意與技術於開發中