工作經歷
光沅數位創意有限公司, 前端工程師（2021/04 ~ 2022/01）
CBS 災防告警細胞廣播訊息 網站：https://cbs.tw/
主要負責項目：
- jQuery - 使用 jQuery 完成專案。
- API 串接 - 與後端工程師合作，透過 AJAX 取得資料並顯示於前端網頁。
- Leaflet 地圖套件 - 取得後端 KML 資料，透過 Leaflet API 把圖形 Render 於畫面上。
霹靂布袋戲 線上看網站：https://play.pili.com.tw/
主要負責項目：
- Nuxt.js - 使用 Nuxt.js 做 Server side render(SSR)，提升 SEO。
- API 串接 - 與後端工程師合作，透過 Axios 取得資料並顯示於前端網頁。
- vue-videojs7 - 使用 video.js 套件，處理 m3u8 格式檔案，主要負責音樂播放器功能。
- Git - 版本控制，使用 Vscode Git Graph 搭配 git 指令。
國際企業需求單發佈平台
主要負責項目：
- RESTful API - 依照前端畫面資料需求，與後端工程師討論符合 REST 風格的 Web API。
- Vue - 使用 Vue CLI 起專案。
- Vuex - 使用 Vuex 做全域資料管理。
- i18n - 處理多國語系（中、英）。
- highcharts - 資料視覺化，將需求單狀態與數量轉換成圖表型式。
- vee-validate - 表單欄位驗證，前端送出 API 前針對表單欄位做即時驗證，提升使用者體驗。
- Git - 版本控制，使用 Vscode Git Graph 搭配 git 指令。
公視兒童影展 - 報名活動平台（活動到期，專案已下線）
主要負責項目：
- Vue - 使用 Vue CLI 起專案。
- Vuex - 使用 Vuex 做全域資料管理。
- vue-gtm - 使用 vue-gtm 套件，設定 SPA 網站追蹤網站內各頁面的訪問流量。
- Paypal 金流串接 - 依照 Paypal 官方提供文件串接金流，與後端合作，完成報名費繳交服務。
- i18n - 處理多國語系（中、英）。
- Git - 版本控制，使用 Vscode Git Graph 搭配 git 指令。
威昇多媒體設計公司, 前端工程師（2019/10 ~ 2020/10）
跟 PM 與設計師討論案件相關事宜、客戶需求的可行性等等，並將設計稿轉換成響應式網頁。
使用技術/套件：
HTML(Pug) , CSS(SASS), JQuery, Swiper.js
主要負責項目：前端首內頁切版及動畫特效製作
V-KOOL 官方網站：http://v-kool.dyndns.biz/m/
朱希補習班 官方網站：https://joesenglish.com.tw/
冠榮咖啡企業：http://ws015.so-buy.com/
近期個人作品
旅遊規劃網站（2022/05）
簡介
因為喜歡旅遊，想做一個操作方便的旅遊規劃網站，給家人朋友還有自己使用。
除了前端相關技術之外，大多是有興趣但還沒在工作上使用過的技術，
藉著做中學，增加自己對這些技術的掌握。
- 專案使用前後端分離架構
- Frontend
- Vue3，Composition API 處理有狀態的共用邏輯（表單驗證）。
- Pinia 管理全域資料。
- 封裝 axios，處理 loading 與 token 過期時呼叫 refreshToken API 並 recall 先前呼叫失敗的 API。
- Backend
- Node.js + Express.js 使用 MVC 模式，Controller 處理程式流程與回應，Model 跟資料庫進行存取。
- 使用 Migration 同步資料庫的結構，並紀錄 DB 設計過程。
- 透過 Middleware，在進到 Controller 前先進行 JWT Token 解析、資料驗證（搭配 express-validator） 等等。
- 密碼透過 bcrypt 進行加密後，再存進 DB
主要功能
- 會員註冊（需 email 驗證）、登入、上傳/編輯頭照、可刪除帳號
- 新增主行程，可上傳編輯主行程照片
- 輸入名稱搜尋目的地，透過 google map api 取得該地點詳細資訊，並顯示於畫面
- 搜尋到目的地資訊後，可點擊加入當日行程
- 當日行程可透過拖曳調整排序
- 透過 google map api 計算行程之間的車程時間並顯示於畫面
- 只需設定行程開始時間，系統會透過 google map api 計算行程之間的車程，將最晚停留時間顯示於畫面
- 設定 google map 連結參數，點擊連結後，會將當日行程地點帶到 google map，可直接進行導航
主要使用框架與技術
- Frameworks：Vue3(Composition API), Tailwind CSS, Express.js
- Libraries/APIs：Pinia, Node.js, RESTful API, Google Map API
- Tools：Vite, Git
- Platforms：Google Cloud Platform(GCP)、Docker
- Web Server：Nginx
- Storage：PostgreSQL, Google Cloud Storage
- Other：JWT Token, SendGrid, RWD
（若不方便 email 註冊，
測試帳號：[email protected]
密碼：11111111
）
GitHub 連結：https://github.com/RhinoLee/travel_app
技能
Languages
CSS3, HTML5, ECMAScript (ES6), JavaScript
Frameworks
Vue2(Option API), Vue3(Composition API), TailwindCSS, Express.js
Libraries/APIs
Vuex, Pinia, Leaflet, Google Map API, REST APIs, Node.js
Tools
Git, Vue CLI
Platforms
Google Cloud Platform(GCP), GitHub, GitLab
Storage
Google Cloud Storage, PostgreSQL
Other
Responsive Design(RWD), Visual Studio Code, JWT Token
學歷
南臺科技大學 機械工程系 2013/09 - 2017/06
