Gvznfy5yv1nhtivqypzd

陳柏丞(Mike Chen)

2.5 年前端開發經驗 | Web Frontend Developer | Photographer
攝影師後遺症, 對畫面細節非常在意
變數命名潔癖, 喜歡給變數一目了然的好名字

EXPERIENCE

堅果科技有限公司  前端工程師

2021/05 – 2021/10 
Vue Nuxt.js Swagger Figma
  • 賽事數據分析平台開發:從零開始建立平台前端到產品上線 ( 架構安排, 元件設計, 路由規劃, 會員權限管理, 數據可視化呈現, 金流串接 )
  • 帶領新進工程師:撰寫技術文件並協助新進工程師上軌道 ( 實行代碼審核, Git 版控教學, 元件設計概念指導 )
公司產品為賽事數據平台開發, 為初始團隊成員, 從頭開始打造產品, 與PM和美術討論和實作, 將常用功能模組化

華奧科技有限公司 前端工程師

2020/07 – 2021/05 
Vue Vuex Figma Bootstrap Material UI SEO Next.js
  • 重製平台與維護:實作桌機和手機網頁版本平台 ( 元件製作, 畫面切版, api串接, css動畫設計, 依客戶需求客製化, 多語系支援 )
  • 管理後台開發與維護:含遊戲, 會員, 儲值與權限管理等各種管理功能 ( 檢視, 新增, 編輯, 刪除等 )
  • 公司形象官網製作:從頭開始使用Next.js開發公司官網並設定SEO關鍵字
公司產品為整合型平台開發與維護, 與PM和美術協同重製新版本樂透彩平台

香港商一聯系統有限公司 前端工程師

2019/09 – 2020/07 
React Redux  Storybook Pixi Canvas Websocket Zeplin
  • 重構專案與維護: 與資深工程師協同使用 Functional programming (FP) 來重構 Object oriented programming (OOP) 版本的相同專案。 利用 FP 強調組合和不改變原始資料特性來優化原架構緊耦合與多層繼承, 資料和功能無法切開, 失去彈性和降低可維護性的問題, 最後證實使用 FP 完成的版本較原來版本畫面渲染快了約兩倍。
  • 協助專案效能調校: 採取 Lighthouse 進行分析, 使用 Reselect 對狀態做 Memorize, useCallback 記住 Function, 用 React lazy load 搭配 Code splitting 減少初始下載時間, 壓縮 png 圖檔大小等等。 使用 Pixi.js 及 GSAP 來操作 Canvas 和 WebGL 製作 2D 動畫效果, 和 Unity 相比, 採用 Pixi 搭配 GSAP 製作動畫能節省2-3倍所需開發時間和大幅減少檔案大小。
  • 獨立規劃專案執行:規劃時程並以 React 完成價值百萬的 Canvas 2D 動畫遊戲
公司產品為線上遊戲平台, 分配到的主要職責為製作和維護平台 Canvas 2D 遊戲內容

全職接案攝影

2017/01 – 2019/09

  • 專職商業攝影, 婚禮婚紗和旅遊攝影
  • 為全球旅遊拍照服務平台Sweetescape台北特約攝影師
  • Instagram: magicmike.taipei

INTRODUCTION

團隊合作 

    工作中曾和多位不同專案管理者, UX 設計師和工程師使用 Figma 和 Swagger 配合協作, 良好的溝通和文件撰寫能有效增進團隊開發效率, 在專案完成後也會以 Markdown 格式撰寫詳細介紹文件和協助新進工程師。  

寫作風格

    在專案中會採用 Clean code 撰寫原則和參照 facade, bridge 等 Design pattern 來做設計, 增加閱讀性, 也使用 Typescript 定義型別和減少錯誤。

個人專案

    SameVibes.net 是一個以音樂為主軸的交友平台, 期望藉由對共同音樂的喜愛而結交好友, 預計初期以用戶最常聆聽的開源音樂和自選歌單列表進行資料建立, 後期計畫串連 Spotify 用戶歌單 api 進行分析和比對推薦。
    使用技術為 Next.js, Typescript, Tailwind 處理前端 RWD 畫面, 具備多語系和深色模式, 以 Node / Express, MongoDB 作為後端和資料庫。

自我成長

    喜歡學習新事物, 工作之餘的時間中持續學習和掌握了 Tailwind, Typescript, Node / Express, MongoDB 和整合測試工具 Cypress 等的使用。 
    在成為前端工程師之前是全職攝影師, 主要拍攝客戶為國外來台旅客和婚紗照新人, 這段攝影工作的訓練讓我對構圖, 畫面美感和使用英文書寫溝通都有顯著的提升。

休閒興趣

    除了攝影之外, 也是個咖啡愛好者, 喜歡冰滴和手沖咖啡, 偏愛來自東非和中美洲較溫潤滑順的香氣與口感。

SKILLS

前端頁面
React (Next.js)
Vue (Nuxt.js)
Pixi.js 操作 Canvas
Tailwind
Bootstrap
Material UI
Typescript
RWD
SEO
後端技術
Node
Express
MongoDB
狀態管理
Redux
React hooks
Valtio
測試工具
Jest
Enzyme
Cypress
圖像處理
Figma
Photoshop
Lightroom

LANGUAGE

中文●●●●●
English●●●●○

EDUCATION

陽明交通大學 

生物藥學研究所

2013 - 2015

中興大學 

生物科技學士學程

2009 - 2013

DEMO

SameVibes

SameVibes.net 是一個以音樂為主軸的交友平台, 並從零開始設計畫面, 使用 Next.js, Typescript, Tailwind 處理前端 RWD 功能, 具備多語系和深色模式, 以 Node / Express, MongoDB 作為後端和資料庫, 並設定 XSS 防禦, CORS 請求和 Nginx 反向代理。

Projects 01 00@2x

使用node.js/express自行撰寫後端api,並將資料貯存於mongoDB中,具有驗證使用者才能上傳資料的後台和瀏覽所有資訊的前台等的系統網站。

Projects 01 01@2x

使用Redux製作及axios處理Ajax,將資料儲存至Firebase資料庫,具備搜尋和各種篩選資料功能,並用Jest/Enzyme進行測試。

Projects 01 02@2x

又不知道午餐要吃什麼嗎?讓電腦來幫你選吧,使用React製作的動態SPA網站 ,據隨機選擇和私房推薦功能,使用Localstorage儲存資料重新整理畫面資料也不消失。

Projects 01 00@2x

使用Html & CSS進行製作和設計的靜態網頁搭配javascript & jQuery製作動畫和效果,支援RWD各種瀏覽器尺寸。

Projects 01 01@2x

使用動態影片作為全視窗背景,套用及客製化Bootstrap和加入animate.css動畫效果製作的Single Page Application靜態網站,支援RWD各種瀏覽器尺寸。

Projects 01 02@2x

使用Styled Component和虛擬貨幣API製作的資料視覺化搜尋平台

Powered By CakeResume