楊玗真 Lucy

前端工程師 Front-End

目前擔任國泰世華銀行前端工程師，在每一次的專案開發中，不斷精進程式架構、模組規劃、提高程式的複用性，過程中像海綿一樣不斷的吸收新知識，喜愛深入了解程式的基本原理，也樂於學習新技術與同事分享及討論，來共同成長及提升自我。

Taipei City, Taiwan
[email protected]

Skills

Web Layout

1. 熟悉HTML5 ＋ CSS3

2. 善於手刻 RWD 響應式網站

3. 透過 SCSS 來提高程式碼易維護性

4. 使用 Tailwind Utility first 來撰寫樣式

5. Chakra UI、Shadcn

Javascript / React

1. JavaScript

2. TypeScript

3. React

4. Jotai

5. Axsio 串接 RESTful API

6. jQuery

Tool

1. Git 版本控制

2. Chrome Developer Tool

3. Vite

Experience

國泰世華商業銀行 | 前端工程師 Jan 2021 ~ 現在

職務內容：

。前端新功能實作開發、維護、優化

。各種工具技術研究、評估及導入

。與其他前端合作規劃及開發前端專案架構及後端工程師協作溝通串接 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 機制，提升彼此之間程式碼可讀性

金寶電子工業股份有限公司 | 前端工程師 Oct 2016 ~ Oct 2020

。維護舊有網站及新功能開發
。與後端配合開發後台功能介面
。從 0 開始規劃網站架構及功能模組化到開發完成。
。能夠盡量減少重複程式來完成響應式網站，並支援不同瀏覽器及裝置。
。依據設計稿完成功能以及與設計師討論可行性。
。與後端協作串接 API。

佳因企業 | 平面設計 Oct 2012 ~ Oct 2015

。公司網站維護。
。Banner 、產品 DM 設計。
。提供印刷代工及相關耗材報價，評估客戶印刷素材可行性。
。與客戶溝通理解需求到校稿開版印刷。
。耗材接單及安排公司內部人力資源安排與執行。
。產品品質管控及出貨事宜。
。協助相關耗材品庫存調貨。

Works

#Renyi (網站連結)

設計品牌官網

・使用 ngx-translate + localize-router 實作多國語系

・使用 Angular 開發專案

・Router + Lazy-loading 路由規劃

・與後端配合串接後台上稿 API

#XYZprinting Pro (網站連結)

工業用機種品牌官網，提供 RWD 響應式官網

・使用 ngx-translate + localize-router 實作多國語系

・使用 Angular 開發專案

・Router + Lazy-loading 路由規劃

・Reactive form 表單 + 自定義驗證

・全站串接後台上稿 API

#3D模型 Gallery (尚上線)

提供 3D 列印愛好者互相分享創作的平台。

負責全站的架構及模組規劃，開發上傳 / 下載模型、3D預覽、收藏以及留言等功能。

・透過 three.js 達成各種模型檔案的預覽

・SCSS 管理樣式模組

・使用 Angular 開發專案 / Router 規劃

・i18n 多國語系建置

・檔案上傳驗證 / 表單驗證

・串接後端 API

#集團官網 (網站連結)

公司集團官網，與同事協作，從前端切好不同的版型，讓使用者可以從後台控制該頁面要選擇的呈現方式，如新聞列表 / 檔案列表 / 站內PDF預覽 / 缺職列表 .. 等。

・使用 PDF viewer 套件完成站內預覽 PDF

・HTML5 + CSS3 RWD 切版

・使用 Angular 開發專案

・i18n 多國語系建置

・串接後端 API