廖柏錩 Richard

擁有豐富的前端工作經驗約 6 年,目前任職於昕力資訊擔任前端工程師,負責前端網站規劃與開發,使用 React 框架 (2018~2021) 開發過形象官網和一些後台系統,使用 Angular (2021年至今) 開發金融人壽相關系統,熟悉前後端分離,由前端串接後端 API。

前端工程師
台中、遠距工作
[email protected]

https://github.com/bnmghjtyu0

Skill

專業技能

前端框架

 使用 Angular2/React

 使用 ngxs/redux 狀態管理工具

 使用 TypeScript 開發

 瞭解 Unit Test / E2E Test

  


JavaScript

 瞭解 ES6+ 語法以提昇 Coding 品質

 使用 lodash 和 rxjs 第三方套件

 




前端排版

 熟悉 HTML 標籤和使用情境

 瞭解 CSS 屬性以優化介面

 熟悉 RWD 原理與佈局配置

 使用 SCSS 提升開發效率

 瞭解 BS4、Material UI

 使用 tailwindcss



輔助工具

 瞭解 git 版控原理和流程

 瞭解 gitlab 和 gitlab cicd 使用

 瞭解 Node.js 和 Npm

 瞭解 Eslint, Prettier, Tsdoc 
 瞭解 Swagger、Postman 

 瞭解 ngrok 與 nginx 服務


合作習慣

 使用 gitlab flow

 使用 gitlab、trello 看板軟體

 

 


資安相關

 瞭解 CSP 內容安全政策 

 瞭解 XSS、CSRF

 使用過 SonarQube

 


Hydrate APP

 使用 Flutter (1y)

 使用 React Native(1y)

  


 



 

 

 

Experience

學經歷

Angular 前端工程師 • 昕力資訊 台中

2023/12/18 - 現在

  • 專案:中國信託 - 風險數據服務平台
  • 開發微前端
    使用 lit + material

2022/01/03 - 2023/12/15

  • 專案:安達人壽前後台
  • 職責
    擔任專案小組長,帶領前端 4~6 人開發銀行人壽專案

  • 前端框架
    使用 Angular 12 建立專案架構

  • Code Review
    我們使用 gitlab merge request 指派 2~3 人負責

  • Git 版控
    我們使用 gitlab flow 主線分支為 develop, release, master 輔助分支為 pre-dev, shared
     - pre-dev: 公司測試機,給 QA 測試
     - develop: 系統整合測試
     - release: 使用者驗收測試
     - shared: 放 mock server 和共用元件

  • 協作工具
    使用 jira 看版軟體管理專案與協作,使用 jenkins 自動化部屬專案

  • 跨部門溝通
    和 SD 討論 API 設計
    和 infra 討論 jenkins 自動化部署專案
    和客戶討論功能開發的可行性與流程 (例如:SSO, 動態權限管理)
    和 QA 討論測試和前後端上版問題
    和 PM 討論時程

  • 遇到難題1:前後端上版時,版本不一致導致網頁出現錯誤
    如何解決:使用 jira 訂定版本號碼,QA 測試沒問題後,建立 jira 版本為 0.2.0 (
    前端版本號 0.1.0、後端版本號 0.1.2) 之後上版以 jira 版本號為主 ~
  • 遇到難題 2 : API 文件更新後,前後端程式碼尚未同步
    如何解決:API 文件更新後建立 jira 牌卡,前後端更新後建立版本號碼 QA 測試通過後才會上版

  • 遇到難題 3 : 部署後才能測試 SonarQube 
    如何解決:使用 docker image 在本地建立環境,開發環境修改並測試是否通過
  • 遇到難題 4 : 前端後端同時開發時,前端還不能接後端 API 資料
    如何解決:使用 json-server 套件,建立前端的 api mock data 先進行開發,之後再串接 API
  • 遇到難題 5 : 公司內部的共用元件管理
    如何解決:使用 gitlab registry 管理。類似 npm 套件
  • 遇到難題 6 : 共用元件維護
    如何解決:使用 storybook

React 前端工程師 • 微程式資訊股份有限公司 台中

2018/09 - 2021/08

  • 開發流程:PM 和設計、前端、後端討論需求後,會將需求整理成規格書並提供給設計師和前後端, 設計師設計好網頁後並切版,將檔案 (HTML、CSS) 交給前端,後端建立文件 (swagger) 交給前端, 前端工程師會拿到設計檔案和 swagger 後, 將 HTML、CSS 加入前端框架、製作組件, 然後撰寫頁面功能和看 swagger 和 規格書串接後端 API, 檔案上傳到 gitlab 後,QA 會用 jenkins 選擇需要測試的分支進行測試,測試沒問題後由 PM 驗收。
  • 地磁後台管理系統。使用 react 串接 API
  • Ri-Connect app。使用 React-Native
  • 維護 Youbike APP 1.0。使用 React-Native
  • 後台系統 VDS 。使用 react
  • Youbike 無障礙官網 2.0。使用 Next.js

網頁設計師 • 富研智醫(舊皚霖資訊) 台中

2016/05 - 2018/08

  • 政府與醫院專案
  • 設計網頁前後台 、bootstrap3 框架製作網站、jQuery, JavaScript 做動畫、D3.js 製作圖表
  • 無障礙網頁、SEO
  • 跨瀏覽器 ie8以上 · safari · chrome · firefox
  • 後端 Asp.net mvc5

網頁設計師 • 傳奇數位 台中

2015/09 - 2016/05

  • 維護企業形象官網 
  • 網站流程規劃、Photoshop 與 Illustrator 設計網頁、Responsive Web Design、CSS 切版

大學• 亞洲大學 (畢業) 台中

2008/09 - 2012/06

  • 光電與通訊科系 (主修通訊、副修光電)
  • C++  、 8051 、 計算機概論 、光學概論

高中 • 文興高中 (畢業) 彰化田中

2005/09 - 2008/06

  • 自然組
  • 忠孝仁愛信義和平禮為教育方針

Skill

專業技能
IDE
VSCode Visual Studio
版控
git 2years+

gitlab flow

前端
HTML5 SCSS  5years+

JavaScript 3years+

react  2years+

react native 1years+

Next.js  1years+

Angular 12   0.6 years +

後端
node.js 1year+

寫過 註冊、登入
寫過爬蟲
寫過 ejs + express + heroku + mySQL 製作 server side rendering 的 side project
寫過 node express 製作 api,react 串接 api

python 1year

寫過爬蟲
寫過 flask 製作網站 api
other
gulp webpack bootstap

Portfolio

threejs side project 

分類 : side project

開發 : 2024 ~ 持續更新中~~


React  


前端

1. react & react/fiber & react/drei


樂光 2.0 side project 

分類 : side project

開發 : 2022 ~ 2023


Angular12  


前端

1. Angular 架構

2. 蒐藏 Youtube 音樂和 Youtuber。


後端
1. 獨立開發

2. Node.js + Express + Sequelize + MySQL
3. 架設 GCP 主機 + Nginx 

4. 遠振 Domain

Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

Youbike app

分類 : 公司專案、功能網站

開發 : 2020


react native 


負責項目

1. 2~3 人共同開發與維護。扮演執行者

2. 開發時程約 3 個月

3. 使用 react native + react navigation + firebase

Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

地磁系統前台

分類 : 公司專案、功能網站

開發 : 2019


react redux 


負責項目

1. 1~2 人共同開發與維護。扮演規劃者

2. 開發時程約 3 個月

3. 使用 react + redux

4. 多國語系

Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

地磁系統後台

分類 : 公司專案、功能網站

開發 : 2019


react redux 


負責項目

1. 獨立開發。扮演規劃者、執行者

2. 開發時程約 3 個月

3. 使用 react + redux

4. 多國語系

資料視覺化圖表

avancevl 

分類 : avancevl

開發 : 2020


react redux 


負責項目

1. 獨立開發

2. 開發時程約 2.5 /h

3. 使用 react + context + material ui + react highcharts

Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

富霖台股教學網 

分類 : 公司專案、功能網站

開發 : 2017


scss bootstrap3 javascript d3


負責項目

1. 接收到設計圖 html 切版與 scss 美化網頁

2. KN線、長條圖、Speedometer 使用 d3js 函式庫,使用資料渲染圖型

3. 獨立開發

4. 開發時程約 1 個月

企業形象官網
Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

皚霖資訊官網

分類 : 公司專案、企業形象官網

開發 : 2016


scss bootstrap3


負責項目 

1. 接收到設計圖 html 切版與 scss 美化網頁, 使用 SVG 製作動畫與特效

2. 與 1 位網頁設計師共同開發 

3. 開發時程約 3 個月

Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

台中市人民陳情 

分類 : 公司專案、政府

開發 : 2017


無障礙2.0 scss bootstrap3 javascript 


負責項目 

1. 接收到設計圖 html 切版與 scss 美化網頁 

2. 與 1 位網頁設計師共同開發 

3. 開發時程約 3 個月

串接API
Profile 05 00@2x e43b73b215f9745a5acb523ff5a7eedc10885283df60390263f6c02c19a38c6e

防災資訊查詢 

分類 : 六角學院專案、功能網站

開發 : 2018


Google Api bootstrap4 Type Angular 5


負責項目 

1. 接收到設計圖 html 切版與 scss 美化網頁 

2. 使用 JavaScript 串接政府的 Open Data 與功能撰寫 

3. 獨立開發

4. 開發時程小於 1 天

TARGET 2023

今年的目標

1. 區塊鏈
2. 深入學習 TypeScript 
3. LeetCode 刷題

Certificate

Profile 06 00@2x

Kent 老師從基礎的測試觀念開始教起,提供很多測試範例讓我能夠快速進入狀況。
寫單元測試,不僅可以提升程式碼的品質與效能,也可以設計出更有彈性的組件

老師 Kent C. Dodds

課程網站 https://testingjavascript.com