邱仲宸Ziv

Front-end Engineer

ziv50109@gmail.com    +886925001212 Taipei

Summary

君子不器

君子不應像器具那樣，被塑造成只有專門用途，君子應當能夠適應新的環境和新的需要而變易。


抱持「紙上得來終覺淺，絕知此事要躬行。」的精神，從書本上習得知識後還必須親自實踐才能透徹地認識事物。

勇於承擔責任與挑戰未知，擅長技術與非技術的轉譯與溝通。能細心處理畫面視覺、狀態及互動效果。

參與專案架構討論與技術導入決策。抱持著開放態度接受並嘗試使用各種技術，期勉自己不拘泥舒適圈，期待新的挑戰機會。

Skills

React ecosystem

Node.js

Firebase

Material-UI

CSS preprocessor(Sass, Stylus)

Unit Testing

GitLab CI


Experience

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

  • CI 流程導入 Unit test & E2E test
  • 重構核心功能：將資料結構攤平降低資料深度、重構過度封裝元件、程式邏輯及畫面邏輯拆分(主要拆分為 container 及 component)來降低維護成本及改善擴充性
  • 協助團送審 Facebook APP 進階權限
  • 引入 Sentry、Storybook、Redux、next-i18next 優化開發流程
  • 透過 Lighthouse 改善前端效能

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

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

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

  • 雄旅網首頁「搜尋面板」開發及維護
  • 整理並調整專案使用 package 版本
  • 使用 dynamic import 優化載入時機點
  • 將入口程式大小由 700KB 減少為 200KB
  • 內部平台「視覺化網頁產生器」功能開發，主要負責介面對於錯誤邊界(Error Boundaries)捕捉與呈現，次要任務是將元件調整成符合文件定義的規格模組
  • 協助釐清集團各部門需求進行網頁模組開發
  • 將需求轉換為任務並分派給其他前端工程師

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

  • 活動網頁製作，製作豐富互動效果的主視覺特效
  • 依需求埋設 GA event 追蹤特定行為，如：畫面捲動百分比及停留時間計算
  • 解決 Internet Explorer 9+ 及各瀏覽器兼容
  • 專案均手刻響應式網頁設計(Responsive web design)

Education

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

Project

ADsvantage

Website

  1. 以 Next.js、Material-UI、Firebase 製作的 SaaS 服務
  2. 引入 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 檔案大小至 200kb 左右
  4. 使用 sessionStorage 暫存以小時為單位不會變動的資料
  5. 使用 localStorage 保存使用者送出的查詢條件，並設置保存期限以滿足需求

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

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

Website

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

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

Full Resume