Profile 00 00@2x e294063b2878e4164ba1dd904aa6b8bae6a97e19937899e4b4af853acf30de5d

孫柏恩 Brian Suen

你好!我叫孫柏恩,英文名是 Brian Suen,今年 30歲,目前在程式開發的年資已有六年年以上,前端開發工程師年資已經有四年以上,主要專精於 React ,Angular 跟 Vue 也有接觸開發過。


  0977-256-955

 [email protected]

 https://github.com/smallga/ 

技能


程式語言

  • HTML
  • JavaScript
  • TypeScript
  • CSS
  • SCSS


前端框架

  • Angular (8+)
  • React
    • React.Component
    • React Hooks


套件工具

  • Redux, Redux Toolkit, Redux-saga
  • Next.js
  • React Query
  • Storybook
  • Formik, Yup
  • Axios, rxjs
  • Eslint / Prettier
  • Jest / Cypress


CSS 框架

  • Tailwind
  • Bootstrap
  • React-Bootstrap


打包工具

  • Webpack
  • Vite


版本控制

  • Git
  • Tfs

經歷

遊戲橘子 - 資深前端開發工程師 (2019 年 1 月   2022年 10 月)

  • 創建8支公司內部服務,依照專案性質自行使用 Angular 跟 React 開發
  • 兩次帶領新進人員開發專案
  • 自學 e2e test (Protractor & Cypress)
  • 開發公司內部工單系統
    • 負責前端頁面開發,自行研究並找尋相關套件建置專案,將舊系統重新翻新
    • 開發八個流程
    • 使用 React-Bootstrap 開發 RWD 頁面
    • 使用 Redux 降低舊專案使用過多重複資源問題(使用者資料,公司部門資訊)
    • 使用 Formik 以及 Yup 套件,統一不同表單驗證規則的開發方式,並使程式碼易懂
    • 使用 StoryBook 讓後續新進開發人員能快速熟悉各元件操作,降低後續維護成本
    • 技術: React + React-router + React Hooks + TypeScript + React-Bootstrap + Redux + Redux Toolkit + Formik + Yup + Storybook + Scss 
  • 開發公司內部憑證下載頁面 
    • 撰寫 JS SDK 供之後服務可使用此 SDK 下載憑證
    • 串接第三方服務(ServiSign 跨平台安控元件),憑證可以透過網站下載並安裝置電腦
    • 與後端, UI/UX 共同協作,設計公司內部憑證到期以及使用者多裝置下載交互情境
    • 客製化憑證下載動畫
    • 技術: React + React-router + React Hooks + TypeScript  
  • 開發內部問卷系統
    • 可透過後端設定呈現不同的問題表單,並符合公司整體的視覺呈現
    • 開發 6 種不同類型的問題回答元件
    • 技術: React + React Hooks + TypeScript  
  • 開發內部郵務系統
    • 透過與內部 APP 通知,連結到內部郵務系統頁面查看目前收到的包裹狀態
    • 搭配 APP Webview ,讓 APP 能直接跟頁面做溝通,帶入使用者相關參數進行身份驗證並進行頁面轉導
    • 技術: React +  React-router + TypeScript + Scss
  • 開發維運公司內部工作協作平台
    • 進行前端需求分析並且與負責開發廠商溝通
    • 後續接手繼續為公司開發新功能
      • 新增線上視訊通話功能,使用第三方技術(infobip)
      • 新增線上會議功能,使用第三方技術(jitsi meet)
      • 開發線上直播功能,使用第三方技術(video js)
    • 接手專案後,並優化效能
      • 使用 gzip 降低使用者初次入載入時間,從原先 2.85s 降至 2.28s,提升約 20 % 
      • 後端討論減少首頁 API 傳遞資源,並將 API 分割,降低使用者初次入載入時間,從原先 2.28s 降至 2.02s,提升約 12 %
      • 圖片使用 lazy load,降低討論串中一次載入太多使用者頭圖造成的畫面卡頓問題
    • 透過 Service Worker ,讓頁面在更新版本可以獲得即時更新,讓使用者能在切換不同功能頁面時進行頁面更新
    • 技術: Angular 8 + TypeScript + rxjs + Bootstrap + Scss 
Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

鴻揚科技 - 網頁全端開發工程師 (2016 年 3月  2018 年 6 月)

  • 開發遠傳電信門市/客服系統
    • 能與客戶進行需求分析以及討論
    • 開發 WebService 供其他廠商使用
    • 負責重要模組開發
    • 技術: Angular Js + Java (Struts / Spring / Hibernate) + Oracle
  • 開發遠傳內部 Line RichMenu 設定頁面
    • 負責前端頁面設計以及開發
    • 技術:Angular Js + Java (Struts / Spring / Hibernate) + Oracle
  • 協助開發台新銀行視訊系統
    • 協助前端頁面設計修改
    • 技術: Vue Js
  •  獲得一次每季評價優秀公司員工
Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

台北科技大學 - 資訊工程系(2010 年 9月  2014年 6月)

  • Kinect 協助肢障專案
    • 技術:Kinect + C++
Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a


作品

社交平台

仿造 IG 頁面,並在製作中,找尋優化 UX 的方法以及效能問題


技術使用: React + Redux + Redux Toolkit + Redux-saga  + Tailwind CSS

使用 GitLab 實現 CI/CD ,並將專案部屬在 Vercel 平台上


進入網站

自傳


        我叫孫柏恩,本人畢業於國立臺北科技大學資訊工程系,我目前有約六年的工作經歷在前端工程師有四年的經歷,目前我的前端框架主要專精於 React ,目前主流框架 Angular 跟 Vue 也有接觸過,也有一定的了解。


        最近一份的工作在遊戲橘子任職,擔任資深前端工程師,由我自己一個人依照專案的需求建置架構,也有帶領過約聘人員協同開發跟 Code Review 的經驗,我非常注重團隊合作,在部門中跟後端以及 UIUX 設計人員會一同討論專案的架構以及開發時程等,一起討論不同的可行性,並討論出最佳的解法,一起合作開發將近十個專案,主要都是使用 React 做開發,自己對於開發 RWD 跟提升效能非常熟練,透過 gzip, Code Splitting 以及跟後端團隊討論優化 API 結構,使網頁速度提升 30% 左右,在疫情期間居家上班期間,研究串接第三方套件實作線上會議功能,讓公司部門同仁能夠在居家上班期間使用自家內部平台進行線上會議,我也樂於分享,在職期間自己開課,分享給不同團隊的同仁,讓他們認識到現今前端的開發工具以及概念。


        在前端工程師技術外我也喜歡研究其他技術,像是自己在上班期間與同事提出了無人商店 Prototype 的實作提案,使用 Python 以及 tensflow 等技術實作,上述的等等經歷也讓自己在部門年度評比拿到優秀的成績。


      在開發過程中我也很喜歡鑽研用戶體驗,我相信好的資深前端工程師不僅要掌握前端知識,也能有很好的用戶體驗和設計眼光,透過工作上跟 UI/UX 設計師溝通討論交換想法,積極地訓練自己,讓自己能在專案上,站在使用者的角度去開發網頁,讓自己成為一位有專業 UI/UX 觀念的資深前端工程師,除了能帶領其他前端工程師開發外,也能擔任協助 UIUX 設計師以及前端工程師溝通的角色,並期望未來自己能成為一位優秀的 UX Engineer。