目前擔任國泰世華銀行前端工程師,在每一次的專案開發中,不斷精進程式架構、模組規劃、提高程式的複用性,過程中像海綿一樣不斷的吸收新知識,喜愛深入了解程式的基本原理,也樂於學習新技術與同事分享及討論,來共同成長及提升自我。
Taipei City, Taiwan
[email protected]
1. 熟悉HTML5 + CSS3
2. 善於手刻 RWD 響應式網站
3. 透過 SCSS 來提高程式碼易維護性
4. 使用 Tailwind Utility first 來撰寫樣式
5. Chakra UI、Shadcn
1. JavaScript
2. TypeScript
3. React
4. Jotai
5. Axsio 串接 RESTful API
6. jQuery
1. Git 版本控制
2. Chrome Developer Tool
3. Vite
職務內容:
。前端新功能實作開發、維護、優化
。各種工具技術研究、評估及導入
。與其他前端合作規劃及開發前端專案架構及後端工程師協作溝通串接 API
。與 UI/UX 設計合作與溝通實作元件、並建立完整 Storybook 文件
專案:
「官網架構翻新為前後端分離」 2024/02-至今
。使用技術:React 18、Typescript、Jotai、Axios、TanStack Query、Shadcn UI、React Form Hook、Zod ...etc
。初始專案架構規劃及規範建立
。使用 Husky + ESlint + prettier
。改採用 Shadcn UI 搭配 Tailwind 及各種 Headless UI 建立客製化元件,也讓無障礙使用者更易於操作
「網路銀行架構翻新為前後端分離」 2022/07-至今
。 使用技術:React 18、Typescript、Jotai、Axios、TanStack Query、TanStack Table、Chakra、React Form Hook、Yup ...etc
。 React 18 建立網路銀行全新專案
。建置規劃新專案檔案結構及規範建立
。採用 Chakra UI 建立客製化元件,降低開發時間成本 撰寫共用元件及功能使用說明文件
。導入 Gzip & Brotli 壓縮格式,大幅減少打包後的檔案大小約 60%
。與同仁使用 Node JS 建置 Mock API 平台,讓前端開發串接 API 更順暢,減少後端環境壞掉造成開發及測試延遲問題
「網路銀行舊專案維護」2021/01-2022/06
。 無框架專案,使用 JQuery 及原生 Javascript 做開發
。透過重構,將部分新舊畫面樣式做整合共用
。導入 Sass 7-1 架構,改善不易維護的零散樣式
。導入 CSS Utility first 觀念, 提高 CSS 的可重用性及易維護性
。導入 ESlint, 並協助前端團段建立規範
。協助建立團隊 Code review 機制,提升彼此之間程式碼可讀性
。維護舊有網站及新功能開發
。與後端配合開發後台功能介面
。從 0
開始規劃網站架構及功能模組化到開發完成。
。能夠盡量減少重複程式來完成響應式網站,並支援不同瀏覽器及裝置。
。依據設計稿完成功能以及與設計師討論可行性。
。與後端協作串接
API。
。公司網站維護。
。Banner 、產品 DM 設計。
。提供印刷代工及相關耗材報價,評估客戶印刷素材可行性。
。與客戶溝通理解需求到校稿開版印刷。
。耗材接單及安排公司內部人力資源安排與執行。
。產品品質管控及出貨事宜。
。協助相關耗材品庫存調貨。
設計品牌官網
・使用 ngx-translate + localize-router 實作多國語系
・使用 Angular 開發專案
・Router + Lazy-loading 路由規劃
・與後端配合串接後台上稿 API
工業用機種品牌官網,提供 RWD 響應式官網
・使用 ngx-translate + localize-router 實作多國語系
・使用 Angular 開發專案
・Router + Lazy-loading 路由規劃
・Reactive form 表單 + 自定義驗證
・全站串接後台上稿 API
提供 3D 列印愛好者互相分享創作的平台。
負責全站的架構及模組規劃,開發上傳 / 下載模型、3D預覽、收藏以及留言等功能。
・透過 three.js 達成各種模型檔案的預覽
・SCSS 管理樣式模組
・使用 Angular 開發專案 / Router 規劃
・i18n 多國語系建置
・檔案上傳驗證 / 表單驗證
・串接後端 API
目前擔任國泰世華銀行前端工程師,在每一次的專案開發中,不斷精進程式架構、模組規劃、提高程式的複用性,過程中像海綿一樣不斷的吸收新知識,喜愛深入了解程式的基本原理,也樂於學習新技術與同事分享及討論,來共同成長及提升自我。
Taipei City, Taiwan
[email protected]
1. 熟悉HTML5 + CSS3
2. 善於手刻 RWD 響應式網站
3. 透過 SCSS 來提高程式碼易維護性
4. 使用 Tailwind Utility first 來撰寫樣式
5. Chakra UI、Shadcn
1. JavaScript
2. TypeScript
3. React
4. Jotai
5. Axsio 串接 RESTful API
6. jQuery
1. Git 版本控制
2. Chrome Developer Tool
3. Vite
職務內容:
。前端新功能實作開發、維護、優化
。各種工具技術研究、評估及導入
。與其他前端合作規劃及開發前端專案架構及後端工程師協作溝通串接 API
。與 UI/UX 設計合作與溝通實作元件、並建立完整 Storybook 文件
專案:
「官網架構翻新為前後端分離」 2024/02-至今
。使用技術:React 18、Typescript、Jotai、Axios、TanStack Query、Shadcn UI、React Form Hook、Zod ...etc
。初始專案架構規劃及規範建立
。使用 Husky + ESlint + prettier
。改採用 Shadcn UI 搭配 Tailwind 及各種 Headless UI 建立客製化元件,也讓無障礙使用者更易於操作
「網路銀行架構翻新為前後端分離」 2022/07-至今
。 使用技術:React 18、Typescript、Jotai、Axios、TanStack Query、TanStack Table、Chakra、React Form Hook、Yup ...etc
。 React 18 建立網路銀行全新專案
。建置規劃新專案檔案結構及規範建立
。採用 Chakra UI 建立客製化元件,降低開發時間成本 撰寫共用元件及功能使用說明文件
。導入 Gzip & Brotli 壓縮格式,大幅減少打包後的檔案大小約 60%
。與同仁使用 Node JS 建置 Mock API 平台,讓前端開發串接 API 更順暢,減少後端環境壞掉造成開發及測試延遲問題
「網路銀行舊專案維護」2021/01-2022/06
。 無框架專案,使用 JQuery 及原生 Javascript 做開發
。透過重構,將部分新舊畫面樣式做整合共用
。導入 Sass 7-1 架構,改善不易維護的零散樣式
。導入 CSS Utility first 觀念, 提高 CSS 的可重用性及易維護性
。導入 ESlint, 並協助前端團段建立規範
。協助建立團隊 Code review 機制,提升彼此之間程式碼可讀性
。維護舊有網站及新功能開發
。與後端配合開發後台功能介面
。從 0
開始規劃網站架構及功能模組化到開發完成。
。能夠盡量減少重複程式來完成響應式網站,並支援不同瀏覽器及裝置。
。依據設計稿完成功能以及與設計師討論可行性。
。與後端協作串接
API。
。公司網站維護。
。Banner 、產品 DM 設計。
。提供印刷代工及相關耗材報價,評估客戶印刷素材可行性。
。與客戶溝通理解需求到校稿開版印刷。
。耗材接單及安排公司內部人力資源安排與執行。
。產品品質管控及出貨事宜。
。協助相關耗材品庫存調貨。
設計品牌官網
・使用 ngx-translate + localize-router 實作多國語系
・使用 Angular 開發專案
・Router + Lazy-loading 路由規劃
・與後端配合串接後台上稿 API
工業用機種品牌官網,提供 RWD 響應式官網
・使用 ngx-translate + localize-router 實作多國語系
・使用 Angular 開發專案
・Router + Lazy-loading 路由規劃
・Reactive form 表單 + 自定義驗證
・全站串接後台上稿 API
提供 3D 列印愛好者互相分享創作的平台。
負責全站的架構及模組規劃,開發上傳 / 下載模型、3D預覽、收藏以及留言等功能。
・透過 three.js 達成各種模型檔案的預覽
・SCSS 管理樣式模組
・使用 Angular 開發專案 / Router 規劃
・i18n 多國語系建置
・檔案上傳驗證 / 表單驗證
・串接後端 API