我是蔡旻樺,畢業於高雄海洋科技大學微電子工程系,本身喜歡畫畫,於是毅然決然地決定從穩定的公職,轉戰設計的行業,因此有了美術方面的薰陶,後來因緣際會走向web前端,從此奠定未來想走的方向。web前端的工作經驗大約七年。
以下是個人作品網址:
https://minhuatsai.github.io/mhdesign/
誠摯地感謝您在百忙之中撥冗閱讀,在此致上萬分的謝意。
讓網頁能在各式裝置下皆能正常且流暢的瀏覽
利用函示庫簡化JS程式碼,加速網頁開發
使用前端的主流框架,了解React生態的操作以及Virtual DOM帶來的流暢速度
使用不同於React的前端框架,加速工作效率及維護成本,並做到前後端分離的便利性
分散式版本控制,讓開發團隊不會互相干擾專案,讓專案更有秩序的管理
使用webpack進行前端專案的打包,並藉由webpack-dev-server的熱加載功能,來增加開發時的速度及便利性
使用更快速於webpack的vite進行前端專案的打包
React專案中的狀態管理,保持專案單一資料流
Vue專案中的狀態管理,保持專案單一資料流
單元測試,讓撰寫的function在修改、調整時,減少bug的出現
React專案中的元件測試,讓撰寫的component在修改、調整時,減少bug的出現
Vue專案中的元件測試,讓撰寫的component在修改、調整時,減少bug的出現
1. 維護台新人壽官網
2. 使用vue2框架開發保戶E園地平台
3. 使用vue3框架從0開始開發傭獎系統
專案框架:Vue2、Vue3
單元測試:Vitest、Vue Test Utils
樣式處理:Less、Scss
UI Library:Element UI、Element Plus
狀態管理:Vuex、Pinia
額外知識:IIS ARR、AP server之間的關係、Checkmarx原始碼弱點掃描修復
專案貢獻:
1. 協助台新人壽官網取得無障礙網站A級標章
2. 建立專案樣板、coding standard,供公司未來其他從0開始的新專案,可以以此為樣板來開發 https://hackmd.io/@evantsai/rklx7vqd2
3. 建立共用元件,並撰寫元件使用說明
https://hackmd.io/@evantsai/r1Mq4gxtn
4. 撰寫前端單元測試、元件測試
5. 將過去ios行動裝置引起的bug但前人無法修正的項目,逐一排除
6. 規劃假資料的前端開發流程於npm腳本中,使開發人員可以執行腳本即可運行假資料環境,而不用自行建置
以React 框架開發 Litloyal 會員忠誠系統,並藉由串接 Line Liff Api,幫B2B客戶蒐集消費者的消費習慣,以及提供商品、點數活動的消費贈點、點數兌換等功能。
專案框架:React
單元測試:Jest + React Testing Library
樣式處理:styled components
UI Library:Bootstrap
額外知識:Redux、Vuex、Storybook、Web worker、Qwik框架
專案貢獻:
1. 建立共用元件,並撰寫元件使用說明 https://hackmd.io/@evantsai/HyBhEQTp_
2. 制定coding style 讓團隊代碼趨向一致性
3. 對所創建的共用元件,撰寫單元測試
4. 整理抽出可以共用的function,而不是各頁重複撰寫相同程式碼
使用 jQuery + Bootstrap 開發醫療器材的ERP管理系統,並藉由mustach.js對此系統做元件化設計。
專案框架:Mustache.js + jQuery
UI Library:Bootstrap
額外知識:Vue
專案貢獻:
1. 建立共用元件
2. 協助調整 api JSON結構的合理性
3. 提醒網站有被xss攻擊的疑慮並進行防禦
NMS網路管理系統的設計,使連接Switch轉換器的裝置,可透過web介面來遠端偵測、控制裝置。
專案框架:React
樣式處理:styled components
UI Library:Semantic UI
額外知識:Next.js
專案貢獻:
1. 從無到有建立專案
2. 網頁UI視覺設計
3. 建立共用元件
4. 提醒網站有被CSRF攻擊的疑慮並進行防禦
以Angular為框架,製作Hybrid App
專案框架:Angular
樣式處理:SCSS
UI Library:MDB(Material Design for Bootstrap)
額外知識:Ionic、RxJS、 Lottie、Hybrid App設計、Angular Universal(SSR)
專案貢獻:
1. 分享 Angular Universal 的使用方式
2. 協助撰寫元件使用說明
3. 將團隊討論的coding style 撰寫成文件
製作網頁動態特效、網站RWD規劃設計、與後端資料串接
專案框架:無(使用jQuery)
UI Library:Bootstrap
額外知識:git、scss、cordova
專案貢獻:
1. 藉由cordova phonegap,將網頁打包成app
2. 網頁UI視覺設計
3. RWD規劃
我是蔡旻樺,畢業於高雄海洋科技大學微電子工程系,本身喜歡畫畫,於是毅然決然地決定從穩定的公職,轉戰設計的行業,因此有了美術方面的薰陶,後來因緣際會走向web前端,從此奠定未來想走的方向。web前端的工作經驗大約七年。
以下是個人作品網址:
https://minhuatsai.github.io/mhdesign/
誠摯地感謝您在百忙之中撥冗閱讀,在此致上萬分的謝意。
讓網頁能在各式裝置下皆能正常且流暢的瀏覽
利用函示庫簡化JS程式碼,加速網頁開發
使用前端的主流框架,了解React生態的操作以及Virtual DOM帶來的流暢速度
使用不同於React的前端框架,加速工作效率及維護成本,並做到前後端分離的便利性
分散式版本控制,讓開發團隊不會互相干擾專案,讓專案更有秩序的管理
使用webpack進行前端專案的打包,並藉由webpack-dev-server的熱加載功能,來增加開發時的速度及便利性
使用更快速於webpack的vite進行前端專案的打包
React專案中的狀態管理,保持專案單一資料流
Vue專案中的狀態管理,保持專案單一資料流
單元測試,讓撰寫的function在修改、調整時,減少bug的出現
React專案中的元件測試,讓撰寫的component在修改、調整時,減少bug的出現
Vue專案中的元件測試,讓撰寫的component在修改、調整時,減少bug的出現
1. 維護台新人壽官網
2. 使用vue2框架開發保戶E園地平台
3. 使用vue3框架從0開始開發傭獎系統
專案框架:Vue2、Vue3
單元測試:Vitest、Vue Test Utils
樣式處理:Less、Scss
UI Library:Element UI、Element Plus
狀態管理:Vuex、Pinia
額外知識:IIS ARR、AP server之間的關係、Checkmarx原始碼弱點掃描修復
專案貢獻:
1. 協助台新人壽官網取得無障礙網站A級標章
2. 建立專案樣板、coding standard,供公司未來其他從0開始的新專案,可以以此為樣板來開發 https://hackmd.io/@evantsai/rklx7vqd2
3. 建立共用元件,並撰寫元件使用說明
https://hackmd.io/@evantsai/r1Mq4gxtn
4. 撰寫前端單元測試、元件測試
5. 將過去ios行動裝置引起的bug但前人無法修正的項目,逐一排除
6. 規劃假資料的前端開發流程於npm腳本中,使開發人員可以執行腳本即可運行假資料環境,而不用自行建置
以React 框架開發 Litloyal 會員忠誠系統,並藉由串接 Line Liff Api,幫B2B客戶蒐集消費者的消費習慣,以及提供商品、點數活動的消費贈點、點數兌換等功能。
專案框架:React
單元測試:Jest + React Testing Library
樣式處理:styled components
UI Library:Bootstrap
額外知識:Redux、Vuex、Storybook、Web worker、Qwik框架
專案貢獻:
1. 建立共用元件,並撰寫元件使用說明 https://hackmd.io/@evantsai/HyBhEQTp_
2. 制定coding style 讓團隊代碼趨向一致性
3. 對所創建的共用元件,撰寫單元測試
4. 整理抽出可以共用的function,而不是各頁重複撰寫相同程式碼
使用 jQuery + Bootstrap 開發醫療器材的ERP管理系統,並藉由mustach.js對此系統做元件化設計。
專案框架:Mustache.js + jQuery
UI Library:Bootstrap
額外知識:Vue
專案貢獻:
1. 建立共用元件
2. 協助調整 api JSON結構的合理性
3. 提醒網站有被xss攻擊的疑慮並進行防禦
NMS網路管理系統的設計,使連接Switch轉換器的裝置,可透過web介面來遠端偵測、控制裝置。
專案框架:React
樣式處理:styled components
UI Library:Semantic UI
額外知識:Next.js
專案貢獻:
1. 從無到有建立專案
2. 網頁UI視覺設計
3. 建立共用元件
4. 提醒網站有被CSRF攻擊的疑慮並進行防禦
以Angular為框架,製作Hybrid App
專案框架:Angular
樣式處理:SCSS
UI Library:MDB(Material Design for Bootstrap)
額外知識:Ionic、RxJS、 Lottie、Hybrid App設計、Angular Universal(SSR)
專案貢獻:
1. 分享 Angular Universal 的使用方式
2. 協助撰寫元件使用說明
3. 將團隊討論的coding style 撰寫成文件
製作網頁動態特效、網站RWD規劃設計、與後端資料串接
專案框架:無(使用jQuery)
UI Library:Bootstrap
額外知識:git、scss、cordova
專案貢獻:
1. 藉由cordova phonegap,將網頁打包成app
2. 網頁UI視覺設計
3. RWD規劃