Profile 03 00@2x

杜長耘 Winny Tu

樂於嘗試、勇於挑戰。

前端工程師、平面設計師、企劃師
Taipei Special Municipality,TW
Email: [email protected]

Phone: 0932-049-103

技能 Skills


HTML/CSS

Bootstrap 

Flexbox 

RWD 

Styled Components

Sass/Scss/Stylus/Less


JavaScript

JavaScript(ES6) 

JQuery 

Vue.js/Vuex/Vue-router 

React/Redux/React-router 

ajax/axios 串接遠端 api

Node.js


設計相關

Illustrator

Photoshop

Premiere

Sketch


其他

Webpack

Git/Github

Zeplin

Google Analytic


語言能力

中文:母語
英文:流暢
韓文:略懂

工作經歷 Experiences

恆富國際, 前端工程師, Sep 2020 ~ 

  • 負責既有網站改版、改寫組件及調整樣式。
  • 針對既有網站進行優化研究,如微前端、Vue3、webpack多入口打包等。

晶峰科技, 前端工程師, Jul 2019 ~ Aug 2020

  • 使用Axios串接後端提供的API,含存取款、進遊戲、活動數據等。
  • 製作活動頁面,並兼容各瀏覽器(Chrome/FireFox/IE10)及手機作業系統(Android/IOs)。
  • 維護及優化網站,含修復Bug、新增功能、加快載入速度、安全性檢測等。
  • 與App工程師聯調,確保H5頁面能在IOs/Android App裡正常運行。
  • 與PM協調需求內容後整理,並協助其他工程師理解需求。

就肆電競, 營運企劃師, Nov 2018 ~ May 2019

  • 參與公司網站營運,分析營運數據及日常更新、維護。  
  • 擔任部門窗口, 跨部門溝通需求後撰寫網頁企劃書規劃功能及內容。    
  • 與設計師、工程師溝通並安排、掌控網頁開發時程。
  • 分析同業競品,並根據結果提出網站改版方向及企劃。

Twitch, 官方合作實況主, March 2017 ~ 現在

  • 實況內容包括各類遊戲、舞蹈及聊天。 
  • 頻道追隨人數超過兩萬、總觀看次數超過150萬,平均觀眾人數為150-200人。   
  • 管理150人Line群及約8000人追蹤的粉絲專頁。

新生活葡萄酒, 平面設計師, Jan 2016 ~ Jun 2016 

  • 設計海報並獨立完成約150頁的酒品目錄   
  • 獨立設計約三百人參與的酒展所有宣傳用品,包含手冊、舞台背板等。

學歷 Education

University of Texas at Dallas, 文學碩士(MA), Emerging Media and Communication, 2016 ~ 2018

課程內容:

UI/UX設計理論, 數位文本研究,新聞與數位網絡, 新媒體與身份認同
畢業論文:
非物質產出型勞動者研究 --- 以Twitch實況主為例

國立政治大學, 文學士(BA), 新聞學系 & 經濟學系, 2011 ~ 2015

課程內容:多媒體新聞敘事, 資訊設計, 文化批判, 個體/總體經濟學, 會計學, 微積分

作品集 Portfolio


Paragraph image 03 00@2x

TwitchClips排行榜

  • 串接 Twitch API 取得前50支觀看次數最高的剪輯影片(clips) 
  • 可選擇查看當週排行/全部排行(weekly/all time) 
  • 可輸入實況主之關鍵字查詢

使用技術  

  • Sass 管理 css 變數
  • axios 串接 API
  • Vue.js 雙向綁定及更新網頁內容 
  • JQuery 插件 - Fancybox 燈箱開啟iframe效果 
  • Bootstrap 實現 RWD 排版 

購物車Shopping Cart

功能包含:1.加入商品至購物車 2.購物車內增減及刪除商品
Projects 00 00@2x

Vue實作


使用技術 

  •  使用 Vue-cli 樣板建構專案 
  • Vuex 統一管理商品狀態
  •  Vue-router實現 SPA

網站連結
Projects 00 01@2x

React實作


使用技術 

  •  Redux 統一管理商品狀態 
  •  react-router實現 SPA
  • styled component撰寫樣式

網站連結
Paragraph image 03 00@2x

國泰人壽 - 旅平險/年金險活動網站

替國泰人壽設計及切版活動網頁

活動網站連結


使用技術

  • wireframe/mockup設計
  • Photoshop編修圖片
  • JQuery插件-Fancybox實現燈箱開啟iframe效果 
  • RWD響應式設計

Projects 01 00@2x

與研究所同學共同開發協助使用者培養習慣的手機App

App介紹影片


使用技術 

  • UX Research (Personas/Interview/Case Study...) wireframe/mockup繪製 
  • prototype製作 

Projects 01 01@2x

依照設計理論優化政大大學報網站


使用技術 

  • Logo設計
  • wireframe/mockup繪製
  • prototype製作