蔡敏佳 Mandy 

目前任職好房網-前端工程師，擁有網站開發、 Ul 設計、前後端工程師協作專案經驗。大學畢業後擔任網頁設計師，從專案中接觸到程式碼，並且利用業餘時間進修線上課程，在專案中開始撰寫基礎切版與互動，從中漸漸培養出興趣，想更深入了解網站開發，離開工作加入 ASTRO Camp 全端培訓營，加強 HTML CSS JavaScript 基礎，實作更多類型的網站，目前還在前端菜鳥階段繼續努力中，請大家多指教。


職位：前端工程師
應徵地點：Taipei，Taiwan

E-mail      : mandy3152618@gmail.com

GitHub    : https://github.com/mandy0315

作品集     : https://mandy0315.github.io/2020_mandy-portfolio/#works

開發技能

Frontend

  • HTML5: 頁面架構 。 
  • CSS3: 頁面樣式。
  • Sass / SCSS :
    使用巢狀構造、變數、mixin。 
  • Tailwind CSS / Windi CSS：
    框架撰寫樣式。
  • JavaScript(ES6):
    控制元素和撰寫功能。


  • jQuery: 製作互動特效。
  • Vue3.js: 開發網站建立元件;
    Vuex / Pinia: 狀態管理。
  • React.js:
    JXS 撰寫 HTML ; Hook 方法控制元件。
  • SVG: 製作動畫。
  • Git : 建立。

Backend & Design

  • Ruby on Rails: 基礎 CRUD 開發。
  • Sketch: 設計大型網站。
  • Photoshop:
    製作合成圖像與設計活動網站。
  •  Illustrator:
    設計向量圖案與設計活動網站。  
  • After Effect:
    製作動畫與搭配 bodymovin 插件。
  • Ｗordpress 開發模板網站。

工作經歷


好房國際股份有限公司,前端工程師, 2021/9 ~ 

  • 使用 Vue 3 框架協助與開發改版網站與功能。
  • 使用 JavaScript 維護舊版網站。
  • 研究 JavaScript 套件 、 Vue 3 相關套件。

ASTRO 5X 全端培訓營, 2021/3 ~ 2021/6

  • 終端機與 Git 指令， 建立、修改、上傳、拉下、分支切換...等版本控制。
  • Ruby 撰寫 Rails 網站框架，了解 CRUD 開發、 會員系統 、 資料庫建置。
  • HTML 標籤與 CSS 屬性的原理，與了解 Bootstrap5 框架了解網格、語法運用。
  • JavaScript 了解 ES6 語法與撰寫原生 JS 操作 DOM 執行 Node. js 環境。 
  • React 框架 JSX 製作與 Hooks 方法執行 Component。   

振作國際有限公司, 網頁設計師, 2019/9 ~ 2020/10

  • 使用 Ｗordpress 平台 Elementor 編輯器，在一週時間完成中型 RWD 形象網站。 
  • 手刻與改寫版型，改善現有模板製作客製化網站。
  • 研究 Wordpress 外掛，擴增與改善模板的文章 、 會員系統等功能。 
  • 製作 Ｗordpress 教學 PPT ，指導新人一天內了解基礎操作。 
  • 教學與推廣 SVG 網頁特效 ， 強化網頁動態。 跨瀏覽器、跨裝置相容性問題處理。

維克數位設計, 網頁設計助理, 2018/8 ~2019/7

  • 研究 Hype3 軟體， 製做 RWD 動畫頁，縮短撰寫動畫時間。
  • 了解第三方套件，縮短時間撰寫功能區塊。
  • 完成公司官網 Web UI 設計 、 前端開發 。
  • 研究 TweenMax.js 、 Animate.css 動態特效。
  • 跨瀏覽器、跨裝置相容性問題處理。

聖誕老人國際有限公司, 視覺設計師, 2018/1 ~2018/6

  • 研究 Zeplin 軟體，改善與前端工程師頁面稿溝通問題。
  • 遵循 12 網格設計模板網站，針對小眾市場快速製作形象網站。
  • 設計 Facebook / Line / 網站的不同尺寸廣告圖、CIS 企業識別、海報。 

專案作品

專題復刻 CodePen - 2021

復刻知名網站 CodePen，主功能以 Ace 套件製作線上編輯器，透過 API 新增存取更改資料;並新增愛心、鎖定、留言等社群功能;結合會員系統使用 Rails Devise 套件與第三方登入，練習功能類型大型網站。


負責內容  架構建置 -> 手刻網站 -> API 串接互動與功能

  1. 架構建置與頁面切版。 
  2. 互動特效 - 漢堡選單 / 側邊欄 / points 按鈕 / 首頁打字 （使用 stimulus.js 與 JavaScript )。
  3. React 框架 - Grid 主頁與後端溝通合作修改 API 狀態與參數， 透過 Hook 方法更改 Grid 需要呈現功能與 Edit 頁面預覽畫面。。
  4. 串接API - Edit 頁-title 功能 / List Grid 鎖定呈現。

未來流通研究所商業網站 - 2020

負責內容  UI 設計 -> Wordpress 製作網站 -> 網站上線

  1. 設計 Web UI 以和風為主，吸引日商瀏覽者。 
  2. 使用 Download Manager 下載文章，綁定 Profile Builder 會員系統讓文章能透過會員登入進行購買與下載。 
  3. 使用 Popular Posts 熱門文章與 Favorites 珍藏文章，擴充文章使用功能，讓瀏覽者快速瀏覽文章。 
  4. 撰寫 TweenMax.js 製作 footer 煙火動態。

維克數位創意官方網站 - 2019

負責內容  UI 設計 -> 手刻網站 -> 後端交接

  1. 設計 Web UI 以公司 Logo DNA 構想，部門（大分子）的分工規劃網站。 
  2. 使用 Swiper 、 fontawesome、workshop 套件，快速時間軸輪播功能、遮罩、圖示。 
  3. 所有頁面動態使用 Animate.css ， 縮減撰寫 CSS 動態兼容與行數。 
  4. 使用 TweenMax.js 製作首頁 banner DNA 動態。

路博邁活動網站 - 2019

負責內容 UI 設計 -> 手刻網站 -> 網站上線

主題提案、圖表繪製、桌機手機版視覺設計。

  1. 設計 Web UI 以故事性互動與圖表帶領瀏覽者了解三檔基金。 
  2. 撰寫 JQuery 偵測高度固定選單，瀏覽者可以隨時切換頁面。 
  3. 使用 Hype3 軟體，製作火箭起飛動畫，輸出 HTML 、 JavaScript 放入專案。 

Full Resume