Wrnlplrtfjccs6zwp8zz

邱仲宸Ziv

Front-end Engineer

[email protected]   • +886925001212 • Taipei

Summary

四年經驗網頁前端工程師,擁有自主解決問題能力,喜歡尋找答案不拘泥單一解,理解權衡需求及時程之間關係的重要性;React, Vue.js 生態系皆有接觸;能細心處理網頁視覺、狀態及互動效果;流暢的和設計師與PM 討論網頁製作需求可行性或是與後端人員討論API 規格。擔任過小組長,參與專案架構討論與技術導入決策。抱持著開放態度接受並嘗試使用各種技術,期勉自己不拘泥舒適圈,期待新的挑戰機會。

Skills


React ecosystem

Vue.js ecosystem

Node.js


Firebase

Material-UI

CSS preprocessor(Sass, Stylus)


MySQL(a little)

Unit Testing

Docker

GitLab CI


Experience

Front-end Engineer / CloudMile 萬里雲 2020 / 02 - Now

  • 前端用戶權限規劃及開發:接收並管理 JWT Token 權限列表,實現前端功能頁面權限控制,以及用戶狀態(如:未綁定帳號)與用戶權限的控制分配
  • 重構「廣告建立流程」:將資料結構攤平降低資料深度、重構過度封裝元件、程式邏輯及畫面邏輯拆分(主要拆分為 container 及 component)
  • 撰寫需求及規劃未來擴充性,由原本的 Google Ads 功能增加 Facebook Ads 以及未來可能導入其他平台功能...等等
  • 引入 Sentry、Storybook、Redux、next-i18next、MJML 優化既有流程
  • 負責 ADsvantage 產品功能開發

Front-end Engineer / 傲勝遊戲股份有限公司 2019 / 06 - 2019 / 10

  • 遊戲平台(非遊戲)開發及維護該平台管理介面
  • 使用 Vue.js 及 Quasar 開發 SPA 交友平台
  • 開發「小程序」應用程式及串接集團內第三方 API 服務

Front-end Engineer / 雄獅資訊科技股份有限公司 2018 / 07 - 2019 / 06

  • 雄旅網首頁「搜尋面板」開發及維護,負責其中「團體」功能開發,以及將各功能整合至「搜尋面板」並打包成不依賴任何 dependency 的獨立模組
  • 優化「搜尋面板」,升級至 webpack4 使用 dynamic import 優化各功能載入時機點、使用 Webpack Bundle Analyzer 觀察並移除不必要 dependency 減少打包後大小、將入口程式大小由 700KB 減少為 200KB
  • 內部平台「視覺化網頁產生器」功能開發,主要負責錯誤邊界(Error Boundaries)捕捉與呈現,以及修正符合需求的模組
  • 協助釐清集團各部門需求進行網頁模組開發
  • 將需求轉換為任務並分派給其他前端工程師
  • 使用 React 進行模組化開發

Front-end Engineer / SOBO Design 淞泊創意設計 2016 / 06 - 2018 / 07

  • 依客戶需求完成網頁製作
  • 依需求埋設 GA 追蹤特定行為,如:畫面捲動及停留時間計算
  • 解決 Internet Explorer 9+ 及各瀏覽器兼容
  • 專案均手刻響應式網頁設計(Responsive web design)
  • 提供靜態頁面給後端套版(前端無串接 API)
  • 使用 Vue.js 開發 SPA

Education

長榮大學 - 資訊管理學系 2010 / 09 - 2015 / 01

Project

ADsvantage

Website

  1. 主要以 Next.js、Material-UI、Firebase 製作的 SaaS 服務
  2. 部分頁面功能由我完成,除以下頁面:報表、提醒總覽、AI智慧寫手、關鍵字總覽、帳戶設定、帳戶連結
  3. 引入 Sentry、Storybook、Redux、next-i18next、MJML 優化既有工作流程

內部平台

  1. React 製作
  2. 預計導入 Server Side Render
  3. State 管理討論(Redux or Context API)

集團內部專案,讓非技術人員也能快速的產出並發布靜態網頁,像是 Bootstrap Studo 網頁製作服務。與其他視覺化網頁編輯器不同的是,產出的網頁可以匯入 JSON 格式資料,因此能有效配合各館別後端提供的 API (團體旅遊、國外個人自由行...等館別)資料。

專案架構主要由 Team leader 負責,我參與了架構及技術選擇與規劃。主要負責部分模組開發及模組與系統整合。

Travel search panel

  1. React 製作
  2. 打包成 plugin 可以使用 CDN  方式掛載在各種場景,如:部落格、活動頁...等等
  3. 使用 dynamic import 分離各面板,減少載入的檔案大小,index.js 檔案大小約 100kb
  4. 使用 sessionStorage 暫存fetch 回來的資料
  5. 使用 localStorage 保存使用者送出資料,並設置保存期限

我負責「團體、團體自由行、主題旅遊、郵輪旅遊」面板開發,以及所有面板拼裝整合與打包成 plugin 方式提供使用者掛載至別的網頁中。並且使用動態載入(dynamic import)的方式分離各個面板,點擊頁籤後才會載入所需資源,有效減少檔案大小。

安本標準360多重資產收益基金

Website

  1. 使用 Vue.js 製作
  2. 蝴蝶揮動翅膀用 CSS 製作
  3. 蝴蝶移動呈現不規則,因此使用 JavaScript 實現動畫
  4. 視覺效果皆是使用 JavaScript 手刻

這個專案使用了 Vue.js 來管理頁面以及圓形選單的一些狀態,為了讓蝴蝶移動更真實所以使用 JavaScript 來實現動畫,網頁整體效果讓客戶很滿意。專案中除了首頁主視覺蝴蝶不規則移動的計算,所有效果皆是使用 JavaScript 手刻。

Powered by CakeResumePowered by CakeResume