林家齊 前端工程師

求職中,錄取後一週可上班

林家齊

前端工程師/全端工程師

從行政與資料處理工作轉職前端。以 Angular 19 + TypeScript 為主力,擔任過多角色 POS 點餐系統的團隊前端負責人,也獨立完成 Angular + Spring Boot 前後端分離專案。作品影片、測試紀錄和每一段經歷都整理在這裡,可以直接驗證。

前端框架
  • Angular 19
  • Vue 3
  • React 19
  • TypeScript
  • Pinia
後端串接
  • Spring Boot
  • MySQL
  • RESTful API
測試部署
  • Playwright E2E
  • Vitest
  • GitHub Actions
  • n8n

專案作品

兩個 Angular + Spring Boot 全端專案是主要代表作,其餘作品展示 Vue 3、React 19 與純前端的實作廣度。有影片的作品可以直接在這裡播放操作過程。

團隊專案,前端負責人

懶飽飽智慧點餐系統

餐飲管理系統,涵蓋客戶端、員工 POS 與管理後台三種角色介面。團隊在一個月內完成主要功能,我負責前端架構與整合。

  • 規劃前端架構,用 Angular Signals 管理跨元件狀態,讓客戶下單、訂單狀態與 POS 看板同步
  • 串接 Spring Boot + MySQL RESTful API,設計 Mock/真實 API 切換機制,前後端可以並行開發
  • 實作點餐、購物車、結帳、信用卡互動、行動支付 QR Code 與角色權限控制
  • 導入 Playwright E2E 與 API Mock,涵蓋登入、角色導向、權限、POS 與後台,25 項 regression 全數通過
  • 用 AI Agent 輔助測試規劃、案例產生、失敗分析與 test healing,結果由我人工確認
  • Angular 19
  • TypeScript
  • Angular Signals
  • Spring Boot
  • MySQL
  • Playwright

獨立完成,前後端分離

QSDemo 問卷管理系統

前端 Angular 19 Standalone Components,後端 Spring Boot + MySQL,涵蓋一般使用者、會員中心與管理員流程,前後端 repository 分開管理。

  • 獨立完成問卷建立、發佈與取消發佈、填答、預覽、歷史紀錄及管理後台
  • 用 Angular Router state 在填答頁和預覽頁之間傳遞資料,不依賴 localStorage 保存流程狀態
  • 串接 Spring Boot RESTful API,處理表單資料、權限與錯誤流程
  • 從 v1.0.0 迭代到 v2.5.0,共 60 次提交,保留功能擴充與問題修正紀錄
  • Angular 19
  • Standalone Components
  • Spring Boot
  • MySQL
  • RESTful API

其他作品

個人 Side Project

Vue 日式電商 Demo

完整購物流程:登入註冊、商品瀏覽、購物車、結帳、訂單紀錄。結帳表單用 vee-validate + Zod 驗證,計價邏輯抽成 usePricing composable,並配置 Vitest 與 Playwright。

  • Vue 3
  • Vite
  • Pinia
  • Vue Router
  • Zod
  • Vitest
  • GitHub Actions

個人專案,前後端

智慧餐飲進銷存管理系統

React 19 + Spring Boot 前後端分離的連鎖餐飲進銷存系統:多門市與總部/店長/員工權限、JWT 登入;出餐扣庫存以交易與樂觀鎖防止超賣;依同星期銷量預測明日用量並一鍵產生採購單。前端 48 項單元+7 項 Playwright E2E、後端 18 項測試,GitHub Actions CI;路由延遲載入讓主程式包縮小 66%,Lighthouse 效能 94、無障礙 100;線上展示以 MSW 模擬後端,可直接操作。

  • React 19
  • TypeScript
  • TanStack Query
  • Spring Boot
  • MySQL
  • JWT
  • Docker
  • Playwright
  • n8n

公司前端試題

Vue 模擬遊戲大廳

受遊戲公司邀請完成的 H5 前端試題。實作分類篩選、300ms 防抖即時搜尋、跨分類同步的收藏管理,並設計 RESTful API 服務層與 Mock 資料後備機制。

  • Vue 3
  • Vite
  • Pinia
  • GSAP
  • GitHub Actions

早期練習作品

日本美食推薦網

轉職初期的切版作品,依東京、京都、大阪三區整理餐廳推薦。練習 RWD 排版、輪播元件與多頁面結構,也是第一個對外部署的作品。

  • HTML5
  • CSS3
  • JavaScript
  • RWD

求職作品集

這個網站

純 HTML、CSS、Vanilla JavaScript 手刻,無框架、無建置工具。淺色/深色主題用 localStorage 記住偏好,IntersectionObserver 處理導覽高亮與經歷動畫,三個斷點 RWD,部署於 GitHub Pages。

  • HTML5
  • CSS3
  • JavaScript
  • IntersectionObserver

工作經歷與轉職歷程

由新到舊排列,時間前後銜接。主線是工作與轉職,旁支是兩段空檔期,以及那段時間實際在做什麼。

  1. HEAD

    前端工程轉職:進修與專案實作

    確認以前端/軟體開發為長期方向後,從 HTML、CSS、JavaScript 一路學到 TypeScript、Angular、Vue 與 React,再用 840 小時全端培訓補上後端與整合能力。目前以前端工程師方向求職。

    1. 完成 React 19 + Spring Boot 全端專案,第三個框架進入實戰
    2. 懶飽飽智慧點餐系統,擔任團隊前端負責人
    3. 獨立完成 QSDemo 前後端分離問卷系統
    4. Java 全端整合實務運用就業養成班,840 小時結訓
    5. 受遊戲公司邀請完成 Vue 前端試題並部署上線
    6. 開始 Vue 3 日式電商 Side Project
    7. 六角學院 30 天軟體工程師體驗營,100% 任務完賽
    8. 投入前端學習:HTML、CSS、JavaScript
  2. 6 個月

    兼職資訊行政助理

    匠星工程有限公司,建築工程業

    整理工程照片、把部落格文章搬到新網站、協助粉絲團貼文與回覆、在正航系統輸入與修正報價單,並處理同事的電腦軟硬體問題。

  3. 空檔期

    職涯探索與設計技能自學

    結束約聘工作後,原本規劃往室內設計發展,自學繪圖軟體與 3D 建模。之後透過工程相關工作與業界交流重新評估工作型態,把長期方向轉向網頁設計與軟體開發。

  4. 7 個月

    約聘助理(資料輸入)

    交通部航港局南部航務中心

    船舶資料建檔與歸檔、調閱資料、註冊船舶商標。處理與歸檔 200 份以上船舶資料,並用 Excel 自動化把行政作業時間縮短約 20%。

  5. 空檔期

    健康休養與職涯恢復

    因健康因素需要較長期的治療與復健,離開學校行政工作。這段期間以恢復身體狀況為主,狀況穩定後重新投入職場,經就業服務站媒合進入航港局任職。

  6. 1 年 8 個月

    教務處行政人員

    高雄市立楠梓國民中學

    學生資料輸入、記功嘉獎與轉學資料處理、文書排版與檔案管理。

  7. 高雄市立海青工商,電子科畢業

技術能力

每一項都能對應到上面至少一個作品。

主力

Angular 19

Standalone Components、Signals、Router、表單驗證。兩個全端專案的主要框架。

次專長

Vue 3

Vite、Pinia、Vue Router、Composition API。可獨立完成整個專案。

已實作

React 19

TanStack Query、React Hook Form+Zod、code splitting。完成含 JWT、測試與 CI 的全端作品。

語言
HTML5、CSS3/SCSS、JavaScript、TypeScript
前端能力
RESTful API 串接、狀態管理、表單驗證、RWD、角色權限控制
測試
Vitest、Playwright E2E、MSW API Mock、JUnit、Regression Testing
工程化
Git、GitHub Actions CI/CD、GitHub Pages 自動部署、版本與 CHANGELOG 紀錄
後端串接
Java、Spring Boot、Spring Security/JWT、MySQL、Docker
自動化
n8n 資料同步與通知流程
AI 與協作
Claude Code、ChatGPT、Gemini、AI Agent 輔助開發與測試;Figma、Notion

轉職背景帶來的工作習慣

把文件和紀錄當成產出的一部分

行政工作讓我重視流程、資料整理與文件完整度。寫程式後,延伸成對 README、CHANGELOG、版本紀錄和測試可重現性的要求。

先拆角色與資料,再開始切版

多角色系統先釐清權限與資料流,再決定元件與狀態怎麼切。Mock/真實 API 切換機制,讓前後端不用互相等待。

用 AI 加速,但每個結果都自己確認

AI 用在測試規劃、案例產生與失敗分析,最後是否採用由我判斷,並用實際的 regression 結果驗證。

學歷、培訓與證照

培訓與學歷

  • Java 全端整合實務運用就業養成班(第四梯次)台南應用科技大學國際產訓中心,840 小時,取得結訓證書
  • 30 天軟體工程師體驗營六角學院,100% 任務達成,鐵人完賽證書
  • 高雄市立海青高級工商職業學校電子科畢業

證照

  • Autodesk AutoCAD 國際認證Autodesk Certified User
  • 乙級儀表電子技術士勞動部
  • 丙級電腦硬體裝修技術士勞動部
  • 丙級工業電子技術士勞動部
  • TQC 雲端技術及網路服務電腦技能基金會
  • TQC-OA Word、Excel、PowerPoint 與中英文輸入電腦技能基金會

有適合的職缺,歡迎聯絡我

正在找前端工程師或全端工程師的職位,高雄、台北、新北、台中都可以,也接受遠端。錄取後一週可以上班。

a437777@gmail.com
電話
0967-187-303
GitHub
github.com/AtayalLin
履歷
線上瀏覽下載 PDF
所在地
高雄市左營區