浩呆 - 全端工程師

浩呆 - 全端工程師

我是一位熱愛技術、擁有高度自我驅動力的全端工程師

個人簡介

我是一位熱愛技術、擁有高度自我驅動力的全端工程師。

從自學程式開始,便對於「將想法具體實現」充滿熱情,並且在學習與實作中不斷磨練自己的技術能力。

熟悉使用 Vue3、Nuxt3、TypeScript 進行現代化網頁開發,並能靈活運用 SPA 與 SSR 架構,打造高效能且符合 SEO 的網站。


技能樹

前端開發

  • JavaScript (ES6+)、TypeScript、HTML5、CSS3、SCSS、Sass

  • Vue3 (Composition API / Options API)、Nuxt3(SSR/SPA 混合開發)

  • Vue Router 4、Pinia、Vuex

  • Tailwind CSS、Element Plus、Vant

  • Vite、Webpack、Rollup(打包與建置)

  • RWD 響應式設計、SEO 最佳化

  • 頁面效能優化(Lighthouse 指標調教)

  • 前端安全防護(XSS、CSRF 基礎理解與防護)

前端工程化

  • 專案模組化、組件化開發設計

  • ESLint + Prettier 自動化格式規範

  • Husky + lint-staged 提交前檢查(Pre-commit hook)

  • Git Commit Message 標準化(Conventional Commits)

  • 單元測試 (Jest, Vue Test Utils)、E2E 測試 (Cypress)

  • 打包優化(Tree-shaking, Code Splitting, Lazy-loading)

  • 多環境變數管理(dotenv / Vite.env) 

後端開發

  • Node.js、NestJS(架構化開發)

  • RESTful API 設計與開發

  • JWT/OAuth2 驗證流程設計

  • Prisma ORM 操作 MySQL 資料庫

  • Redis 快取設計

  • API Error Handling 與 Validation (class-validator, class-transformer)

DevOps 工具與流程

  • Git(版本控制、Branch管理、Git Flow/Trunk Based)

  • Docker、Docker Compose、Dockerfile 撰寫

  • Jenkins:CI/CD 自動化建置與部署流程

  • Nginx 反向代理(Reverse Proxy)設定

  • PM2 Node.js 進程管理

  • GCP 部署經驗

  • 基本 DNS、SSL 憑證設定(Let’s Encrypt)


工作經歷

前端工程師|尚玄國際股份有限公司

2023/02 — 2025/4

負責企業 ERP 系統與電商平台的前端開發。

ERP系統模組開發:

  • 進銷存管理:庫存管理、進貨單、銷貨單作業流程設計與串接。

  • 會計系統:對帳明細、沖帳系統、科目管理、帳務報表開發。

  • 人事管理系統:員工資料、出勤記錄、簽核流程

  • 系統架構以 Vue3 + TypeScript + Pinia + Axios 為主,搭配 SCSS 進行樣式管理。

  • 導入模組化開發與元件化設計,提升系統擴充性與維護性。

  • 打包與開發流程使用 Vite 優化,並配置 ESLint + Prettier 保持代碼一致性。

  • 前端資料管理以 Pinia 作為全局狀態管理解決方案,串接 API 進行動態資料渲染與更新。

  • 本地與測試環境使用 Docker 容器化建置,提升團隊開發一致性與環境部署效率。

電商平台開發:

  • 建置前台購物流程、後台商品管理與訂單管理模組,支援購物車、會員中心、訂單系統等功能。

  • 前端技術選用 Nuxt3 + TypeScript + Tailwind CSS,實作高效能且 SEO 友善的 SSR + SPA 混合模式網站。

  • 文章管理系統支援 SEO 優化,使用 Nuxt3 動態生成 meta 資訊(title、description、Open Graph 資料)。

  • 金流串接:綠界,並整合物流配送服務。

  • 響應式設計(RWD)優化,提升多裝置使用體驗。

  • 搭配 Jenkins 自動化部署至 GCP。


作品集

Mini997(外包平台)

Mini997 是一個結合了接案、發案、服務提供與SEO內容佈局的 C2C 外包媒合平台,用戶可以同時扮演「業主」(發案者)與「小人物」(接案者),平台設計以彈性角色、雙向通訊、服務邀約、結案付款為主軸,並結合內容行銷(找故事)強化 SEO,自然提升平台曝光。

 

Nuxt 3 + Vue 3

  • 採用 Nuxt 3 建構平台,結合 SSR(伺服器端渲染) 與 SPA(單頁應用) 模式,

  • 提升 SEO 收錄表現,強化自然流量來源(尤其針對找故事模組)。

  • 加快首屏載入速度,提升首次互動時間(First Input Delay)。

靜態與動態混合生成

  • 找故事、找服務頁面採用 預渲染(SSG),加速讀取與收錄。

Pinia

  • 使用者登入狀態。

  • 案件列表、案件詳情、服務列表、服務詳情。

  • 邀約報價流程狀態(進行中、完成、取消)。

  • 聊天室訊息流與未讀訊息管理。

  • 支付訂單資料與付款狀態追蹤。

Tailwind CSS

  • 使用 Tailwind CSS 建立一致的設計規範,搭配自訂按鈕、卡片、表單元件。

  • 項目色系、按鈕樣式、字體排版自訂,保持平台品牌一致性。

Loading Skeleton 與預載入動畫

  • 重要頁面(如案件詳情、聊天室)提供骨架屏 (Skeleton Loader),提升載入體感流暢度。

 

安心顧365(看護媒合平台)

一個專為家屬與看護設計的 C2C 服務媒合平台,提供雙方能夠方便快速媒合、即時溝通與安排服務的環境。平台致力於解決傳統看護媒合市場流程繁瑣、溝通斷層、資訊不透明等問題,讓需要照護服務的人能夠更快速地找到合適的人選。

  • 採用 Nuxt 3 進行 SSR 加速首屏渲染,提升 SEO 表現與使用者體驗。

  • 採用 Pinia 作為狀態管理,集中管理用戶登入狀態、聊天室訊息、訂單資料等。

  • 使用 Tailwind CSS 打造響應式設計,確保在手機、平板、桌機都有良好體驗。

  • Vite 作為開發與打包工具,加快開發時的熱更新速度。

  • 即時聊天室功能,讓家屬可以和看護在平台內即時對話、溝通服務細節。

  • 確保訊息即送即達,並支援未讀訊息提示、聊天室歷史紀錄。

  • 整合線上付款,可能串接如 TapPay、藍新金流、綠界科技等服務。

 

TruthForum(揭弊平台)

一個專注於檢舉事件處理的 B2C 平台,主要提供使用者(大眾)一個可以匿名或具名檢舉案件的窗口,並由公司/單位接收案件後進行調查處理。

在整個處理流程中,平台提供完整的案件追蹤、即時雙向通訊、上傳錄音檔佐證,以及最終案件結案與三方支付功能,確保資訊透明、安全可信。

  • 運用 Nuxt 3 建立 SPA + SSR 混合應用,兼顧 SEO 和互動體驗。

  • 靜態生成部分頁面(如公司介紹、平台公告),動態渲染檢舉案件與聊天室內容。

  • 案件流程、聊天室、錄音管理、支付結算,各功能模組獨立設計。

  • 錄音檔支援直接串流播放,無需完整下載。


自傳

從學習程式的第一天起,我就對「如何把一個想法變成真正能運作的產品」充滿熱情。

在自學過程中,我從基本的 HTML、CSS、JavaScript 開始,逐步掌握 Vue.js、TypeScript 等現代前端技術,並且深入理解 SPA(單頁應用)與 SSR(伺服器端渲染)架構的差異與應用。

 

在尚玄國際股份有限公司擔任前端工程師期間,我參與了企業 ERP 系統與電商平台的完整開發流程。

ERP 系統涵蓋進銷存、會計、人事管理等模組,這段經歷讓我對企業內部運作流程有了深刻理解,也鍛鍊了我設計資料流與複雜邏輯處理的能力。

電商平台開發則讓我熟悉了商品管理、購物流程、會員中心與金流串接,學會在使用者體驗與後端效能之間取得平衡。

 

技術之外,我非常重視工程品質與開發流程的優化。

熟悉使用 Git 進行團隊協作,並透過 Docker 容器化、Jenkins 自動化部署,確保開發、測試、上線各階段的穩定性與效率。

 

未來,我希望能進一步深入大型系統設計、微前端架構(Micro-Frontends)、以及更進階的雲端 DevOps 流程(例如 Kubernetes,Serverless 等技術)。

我相信持續學習與不斷挑戰自我,是成長最重要的動力。