//assets.cake.me/assets/contentarea/contentarea-2d64eca8dae2a1ffb31e0fb1df887bbad072c7c19734d7d30fa14884bbcc299a.css

- 學習 JS function/method
- 了解 Functional component 概念
- 使用常見 Hook 控制 DOM，e.g. useState, useEffect, props, etc.
- 了解 Hook 特性，e.g. useEffect 中 set/cleanup function, dependencies 間的關係, etc.
- 嘗試 React Three.js 套件渲染環景及動畫模型

3D 個人自介網站 (React)

專員

黃勁偉

- 多欄位、連續表單
- TypeScript 定義變數/參數型別 => 檢查表單欄位
- 建置可彈性擴充/調整的元件供多處使用
- 集中管理可共用的 API req function
- 集中管理常調用的 utils function
- 實現後台編輯約診的 Table

診所約診服務 (React)

- 模仿 Notion 功能供使用者撰寫 MD 文件
- TypeScript 定義變數/參數型別 => 更良好控制 Functional component
- 建置可彈性擴充/調整的元件供多處使用
- 建置微服務環境提供 AI API 功能
- 集中管理常調用的 utils function
- 集中管理可共用的 API req function
- 使用 Liveblocks 套件實現即時協作鼠標、輸入提醒

Notion-clone（React，採 Google 登入驗證）

黃勁偉 Frontend Developer 台灣新竹市 您好我是黃勁偉 (Mikey)，一名對技術有熱忱的前端開發者，擅長： ✅ 使用 HTML/CSS/JavaScript/TypeScript (React) 等語言及技術開發網站 ✅ 跨部門合作、溝通，針對問題找出最好的解決方案 ✅ 持...

Mikey's Resume

逢甲大學

竹慶建設股份有限公司

產品企劃

黃勁偉 Frontend Developer 台灣新竹市 您好我是黃勁偉 (Mikey)，一名對技術有熱忱的前端開發者，擅長： ✅ 使用 HTML/CSS/JavaScript/TypeScript (React) 等語言及技術開發網站 ✅ 跨部門合作、溝通，針對問題找出最好的解決方案 ✅ 持續精進自己的開發技術 Email: currygeigei@gmail.com #熱衷軟體技術 #自主學習 #獨立思考 #跨部門合作/溝通 技能（持續學習） 前端語言/框架/庫 HTML CSS JavaScript TypeScript React 套件 React Hook Form Zod Zustand Redux Toolkit Tailwind shadcn/ui MUI Ant Design Emotion Three.js (React Three Fiber) 後端 Node.js (Express.js/Hono) JWT Database（使用 AaaS/BaaS 操作登入驗證及 DB） MongoDB ( Mongoose) MySQL（了解 RDBMS 基礎概念/語法） Clerk Convex Appwrite Firebase 其他開發工具/技術 Postman Swagger Notion Figma 專案 診所約診服務 (React) 多欄位、連續表單 TypeScript 定義變數/參數型別 => 檢查表單欄位 建置可彈性擴充/調整的元件供多處使用 集中管理可共用的 API req function 集中管理常調用的 utils function 實現後台編輯約診的 Table Deployment Source Code Notion-clone（React，採 Google 登入驗證） 模仿 Notion 功能供使用者撰寫 MD 文件 TypeScript 定義變數/參數型別 => 更良好控制 Functional component 建置可彈性擴充/調整的元件供多處使用 建置微服務環境提供 AI API 功能 集中管理常調用的 utils function 集中管理可共用的 API req function 使用 Liveblocks 套件實現即時協作鼠標、輸入提醒 Deployment 前端 Source Code 微服務 So...

<img class="avatar fr-rounded fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/705f5354-3094-4b42-849b-1bc37dcf6095.png" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/705f5354-3094-4b42-849b-1bc37dcf6095.png" data-fr-old-height="175"><h1>黃勁偉</h1><h4>Frontend Developer</h4>&nbsp; 台灣新竹市

您好我是黃勁偉 (Mikey)，一名對技術有熱忱的前端開發者，擅長：✅ 使用 HTML/CSS/JavaScript/TypeScript (React) 等語言及技術開發網站✅ 跨部門合作、溝通，針對問題找出最好的解決方案✅ 持續精進自己的開發技術&nbsp; Email: <a href="mailto:currygeigei@gmail.com" rel="noopener noreferrer" target="_blank">currygeigei@gmail.com</a>#熱衷軟體技術 #自主學習 #獨立思考 #跨部門合作/溝通

<h2>前端語言/框架/庫</h2>&nbsp; HTML&nbsp; &nbsp;&nbsp;&nbsp; CSS&nbsp; &nbsp;&nbsp;&nbsp; JavaScript&nbsp; &nbsp;&nbsp;&nbsp; TypeScript&nbsp; &nbsp;&nbsp;&nbsp; React&nbsp; &nbsp;

<h2>套件</h2><img src="https://images.cakeresume.com/Pam7a4/mikeyj/0cc7a0ab-a679-4a75-8899-5dace2a9a177.png" style="width: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/0cc7a0ab-a679-4a75-8899-5dace2a9a177.png"> React Hook Form&nbsp; &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/521624a4-f69e-4110-822f-7eda9f38aca5.jpg" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/521624a4-f69e-4110-822f-7eda9f38aca5.jpg">&nbsp;Zod&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/30ed4505-128a-47eb-a08a-fca5ce33764d.png" style="width: 39px;" class="fr-fic fr-dii" data-fr-old-height="24" data-fr-old-width="39" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/30ed4505-128a-47eb-a08a-fca5ce33764d.png">&nbsp;Zustand&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/c3742a4d-beb5-499f-9283-7ced960f4ecb.png" style="width: 39px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/c3742a4d-beb5-499f-9283-7ced960f4ecb.png">&nbsp;Redux Toolkit&nbsp; &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/e4f11f8c-d29e-4de4-b4f6-47b97ad1dd3c.png" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-fr-old-src="https://images.cakeresume.com/Pam7a4/mikeyj/72f65ec3-4c63-4340-b784-4b8cb9d77976.jpg" data-fr-old-height="22" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/e4f11f8c-d29e-4de4-b4f6-47b97ad1dd3c.png">Tailwind&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/eed49cdd-3568-4279-8b26-316fc108207b.png" style="width: 36px; height: 36px;" class="fr-fic fr-dii" data-fr-old-src="https://images.cakeresume.com/Pam7a4/mikeyj/521624a4-f69e-4110-822f-7eda9f38aca5.jpg" data-fr-old-height="40" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/eed49cdd-3568-4279-8b26-316fc108207b.png">&nbsp; shadcn/ui&nbsp; &nbsp;&nbsp; MUI&nbsp; &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/aeb9bd05-56e8-4829-bb7a-110746869d95.png" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/aeb9bd05-56e8-4829-bb7a-110746869d95.png">&nbsp;Ant Design&nbsp; &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/db4d3b06-628c-4201-9fb9-edd8aa1c909c.png" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-fr-old-src="https://images.cakeresume.com/Pam7a4/mikeyj/aeb9bd05-56e8-4829-bb7a-110746869d95.png" data-fr-old-height="40" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/db4d3b06-628c-4201-9fb9-edd8aa1c909c.png">&nbsp;Emotion&nbsp; &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/aa83cae8-349a-4f94-ab8e-bf777f709260.png" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-fr-old-height="40" data-fr-old-width="40" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/aa83cae8-349a-4f94-ab8e-bf777f709260.png">&nbsp;Three.js (React Three Fiber)

<h2>後端</h2>&nbsp; Node.js (Express.js/Hono)&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/66eab3e7-67ef-4866-ad5f-0a7c7b142e77.jpg" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/66eab3e7-67ef-4866-ad5f-0a7c7b142e77.jpg">&nbsp; JWT

<h2>Database（使用 AaaS/BaaS 操作登入驗證及 DB）</h2>&nbsp;&nbsp;MongoDB (Mongoose)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; MySQL（了解 RDBMS 基礎概念/語法）&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/49f6195d-84aa-429b-bf36-1ad424129bbe.png" style="width: 39px;" class="fr-fic fr-dii" data-fr-old-src="https://images.cakeresume.com/Pam7a4/mikeyj/c3742a4d-beb5-499f-9283-7ced960f4ecb.png" data-fr-old-height="35" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/49f6195d-84aa-429b-bf36-1ad424129bbe.png">&nbsp;Clerk&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/545dccfc-9af1-40df-b0a8-48675c5f4658.png" style="width: 39px;" class="fr-fic fr-dii" data-fr-old-src="https://images.cakeresume.com/Pam7a4/mikeyj/4e324f3f-08c4-4e86-9969-99db8cb5e2fc.jpg" data-fr-old-height="15" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/545dccfc-9af1-40df-b0a8-48675c5f4658.png">&nbsp;Convex &nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/15eeec67-7d17-41a7-80a6-3efbfdaf0b95.png" style="width: 39px;" class="fr-fic fr-dii" data-fr-old-height="39" data-fr-old-width="39" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/15eeec67-7d17-41a7-80a6-3efbfdaf0b95.png">&nbsp;Appwrite&nbsp; &nbsp;&nbsp; Firebase

<h2>其他開發工具/技術</h2><img src="https://images.cakeresume.com/Pam7a4/mikeyj/7a376a1d-2e8a-4fcd-a6d0-f63edb733c43.jpg" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/7a376a1d-2e8a-4fcd-a6d0-f63edb733c43.jpg">&nbsp;Postman&nbsp; &nbsp;&nbsp;<img src="https://images.cakeresume.com/Pam7a4/mikeyj/f7c43e0a-7f19-4f7c-8fbc-5af5e6b1bb7d.jpg" style="width: 40px; height: 40px;" class="fr-fic fr-dii" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/f7c43e0a-7f19-4f7c-8fbc-5af5e6b1bb7d.jpg">&nbsp;Swagger&nbsp; &nbsp;&nbsp;&nbsp; Notion&nbsp; &nbsp;&nbsp;&nbsp; Figma

<a href="https://carepulse-virid.vercel.app/" rel="noopener noreferrer" target="_blank"><img class="project-2-img fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/cece91eb-8bce-4cdd-808a-9278171383d3.jpeg" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/cece91eb-8bce-4cdd-808a-9278171383d3.jpeg" data-fr-old-height="236"></a><h3><a href="https://carepulse-virid.vercel.app/" rel="noopener noreferrer" target="_blank">診所約診服務 (React)</a></h3><ul><li>多欄位、連續表單</li><li>TypeScript 定義變數/參數型別 =&gt; 檢查表單欄位</li><li>建置可彈性擴充/調整的元件供多處使用</li><li>集中管理可共用的 API req function</li><li>集中管理常調用的 utils function</li><li>實現後台編輯約診的 Table</li><li><a class="fr-green" href="https://carepulse-virid.vercel.app/" rel="noopener noreferrer" target="_blank">Deployment</a></li><li><a href="https://github.com/MikeyJinWei/carepulse.git" rel="noopener noreferrer" target="_blank">Source Code</a></li></ul>

<a href="https://notion-clone-2ck4b78vu-mikeys-projects-efce8450.vercel.app/" rel="noopener noreferrer" target="_blank"><img class="project-2-img fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/e6dc5714-84e1-40c4-9fa9-6c0527f4ab7b.jpeg" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/e6dc5714-84e1-40c4-9fa9-6c0527f4ab7b.jpeg" data-fr-old-height="236"></a><h3 data-e2e="project-list__title" data-v-4d73d893="" style=" font-weight: 700; color: rgb(41, 41, 41); font-style: normal;"><a href="https://notion-clone-2ck4b78vu-mikeys-projects-efce8450.vercel.app/" rel="noopener noreferrer" target="_blank">Notion-clone（React，採 Google 登入驗證）</a></h3><ul><li>模仿 Notion 功能供使用者撰寫 MD 文件</li><li>TypeScript 定義變數/參數型別 =&gt; 更良好控制 Functional component</li><li>建置可彈性擴充/調整的元件供多處使用</li><li>建置微服務環境提供 AI API 功能</li><li>集中管理常調用的 utils function</li><li>集中管理可共用的 API req function</li><li>使用 Liveblocks 套件實現即時協作鼠標、輸入提醒</li><li><a href="https://notion-clone-2ck4b78vu-mikeys-projects-efce8450.vercel.app/" rel="noopener noreferrer" target="_blank">Deployment</a></li><li><a href="https://github.com/MikeyJinWei/notion-clone.git" rel="noopener noreferrer" target="_blank">前端 Source Code</a></li><li><a href="https://github.com/MikeyJinWei/notion-clone-cloudflare-worker.git" rel="noopener noreferrer" target="_blank">微服務 Source Code</a></li></ul>

<a href="https://react-3d-portfolio.zeabur.app/" rel="noopener noreferrer" target="_blank"><img class="project-2-img fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/51a3160b-50ff-4f7c-92bf-fbbeaf8b2265.jpeg" data-fr-old-height="236" data-fr-old-width="419" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/51a3160b-50ff-4f7c-92bf-fbbeaf8b2265.jpeg"></a><h3><a href="https://react-3d-portfolio.zeabur.app/" rel="noopener noreferrer" target="_blank">3D 個人自介網站 (React)</a></h3><h3><a href="https://carepulse-virid.vercel.app/" rel="noopener noreferrer" target="_blank"></a></h3><ul><li>學習 JS function/method</li><li>了解 Functional component 概念</li><li>使用常見 Hook 控制 DOM，e.g. useState, useEffect, props, etc.</li><li>了解 Hook 特性，e.g. useEffect 中 set/cleanup function, dependencies 間的關係, etc.</li><li>嘗試 React Three.js 套件渲染環景及動畫模型</li><li><a href="https://react-3d-portfolio.zeabur.app/" rel="noopener noreferrer" target="_blank">Deployment</a></li><li><a href="https://github.com/MikeyJinWei/react-3d-portfolio-vol.1/tree/feat" rel="noopener noreferrer" target="_blank">Source Code</a></li></ul>

<a href="https://mern-blog.zeabur.app/login" rel="noopener noreferrer" target="_blank"><img class="project-2-img fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/ac07d5e7-f843-4c64-bacd-1ba853a2ef88.jpeg" data-fr-old-width="419" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/ac07d5e7-f843-4c64-bacd-1ba853a2ef88.jpeg"></a><h3 style=" font-weight: 700; color: rgb(51, 51, 51); font-style: normal;"><a href="https://mern-blog.zeabur.app/login" rel="noopener noreferrer" target="_blank">部落格網站 (MERN)</a></h3><h3 data-e2e="project-list__title" data-v-4d73d893="" style=" font-weight: 700; color: rgb(41, 41, 41); font-style: normal;"><a href="https://notion-clone-2ck4b78vu-mikeys-projects-efce8450.vercel.app/" rel="noopener noreferrer" target="_blank"></a></h3><ul><li>Node.js (Express.js) 連結 MongoDB 實現驗證功能</li><li>Firebase 提供 Google 認證功能</li><li>應用 NOSQL 資料庫觀念</li><li>應用 Mongoose ODM 操作 MongoDB</li><li>嘗試 JWT, bcryptjs 等套件簽證 token cookie，驗證權限</li><li>存取 token，提供使用者後台更新功能</li><li>Redux Toolkit 在全域傳遞並渲染使用者資訊</li><li>Redux Toolkit 在全域傳遞顏色主題，切換深淺模式</li><li><a href="https://mern-blog.zeabur.app/login" rel="noopener noreferrer" target="_blank">Deployment</a></li><li><a href="https://github.com/MikeyJinWei/MERN-Blog/tree/dev" rel="noopener noreferrer" target="_blank">Source Code</a></li></ul>

<a href="https://react-3d-portfolio.zeabur.app/" rel="noopener noreferrer" target="_blank"><img class="project-2-img fr-fic fr-dii" src="https://images.cakeresume.com/Pam7a4/mikeyj/214a12ca-8750-4aaf-bb54-03106305064e.jpeg" data-fr-old-height="236" data-fr-old-width="419" data-src="https://images.cakeresume.com/Pam7a4/mikeyj/214a12ca-8750-4aaf-bb54-03106305064e.jpeg"></a><h3 data-e2e="project-list__title" data-v-4d73d893="" style=" font-weight: 700; color: rgb(41, 41, 41); font-style: normal;"><a href="https://mikeyjinwei.github.io/ta-king.github.io/index.html" rel="noopener noreferrer" target="_blank">公司官方網站（原生 HTML/CSS/JavaScript, 套件庫）</a></h3><h3><a href="https://react-3d-portfolio.zeabur.app/" rel="noopener noreferrer" target="_blank"></a></h3><h3><a href="https://carepulse-virid.vercel.app/" rel="noopener noreferrer" target="_blank"></a></h3><ul><li>使用原生 HTML/CSS/JavaScript 開發</li><li>嘗試使用 Swiper.js, AOS 等套件實現動畫／互動效果</li><li>整合公司需求，與設計師協作規劃</li><li>評估開發時程，在時限內準時交件</li><li>完成主管後續維護、功能擴充的需求</li><li><a href="https://mikeyjinwei.github.io/ta-king.github.io/index.html" rel="noopener noreferrer" target="_blank">Deployment</a></li><li><a href="https://github.com/MikeyJinWei/ta-king.github.io/tree/dev" rel="noopener noreferrer" target="_blank">Source Code</a></li></ul>

Jul 2024 - Sep 2024

<h3>網頁前端工程師</h3><h4>創創數位科技股份有限公司</h4><ol><li>重構 API request 函數，為 Request 必要資料設定 params (e.g. userId, url, episodeId, etc.)，將重複或相似 Statement/expression 整合進函數中，減少人為撰寫錯誤的可能性，簡化重複撰寫相似程式碼的流程</li><li>修改前手錯誤的 State 解決表單提交錯誤</li><li>使用 State, props 管理列表渲染之 Card list 或 Table row 數量、實現換頁/查看更多功能</li><li>使用狀態管理及第三方 Lib 實現全域 Podcast 播放器換集、音量調整等功能</li><li>與後端工程師討論，使用 Swagger 測試確保資料交互格式正確</li><li>引入 BEM 提高舊專案樣式可維護性</li><li>使用 Notion 撰寫 MD 文件紀錄專案開發歷程</li></ol>

Feb 2022 - May 2024

<h3>產品企劃</h3><h4>竹慶建設股份有限公司</h4><ul><li>網頁管理：建置公司網頁（自行開發、發包管理）、定期由後台上傳施工進度（至前台）</li><li>規劃：目標市場分析、參與平面規劃、討論建材選用、參與建築外觀／公設／景觀設計</li><li>行銷/銷售：參與推案行銷會議、官方 LINE 帳號管理（撰寫自動回覆訊息, 圖文案上架）、整理/撰寫建材清單</li><li>工程：協助現場施工端對圖 (AutoCAD)、現勘協助監督設備安裝（公設設施, 衛浴, 廚具, 室裝, 擺設）、拍照留存竣工照片</li><li>行政：整理/撰寫送審公文 (Excel, PowerPoint , Word, PDF)、施工詢/議價、合約協審/簽署、核對施工進度請款（與會計人員/工地主任溝通）、上傳報價/合約歸檔</li></ul>

2017 - 2022<h3>逢甲大學 Feng Chia University (FCU)</h3><h4>國際經營與貿易學系</h4>