Skip to main content
[ Frontend portfolio ]

Apex Flow

React / Next.js / TypeScript product interfaces with strong SEO, accessibility, and content structure.

把作品展示、內容策略與技術落地整合進同一個前端作品集,讓招聘方可以快速理解我處理介面、 需求與交付品質的方式。

Positioning

About Apex Flow

Frontend developer focused on React, Next.js, and shipping polished product experiences.

Apex Flow 用作品集的形式整理我在前端開發上的實作脈絡,包含產品介面、資料串接、 SEO 基礎與可近性細節。每個案例都以實際交付為核心,說明我如何拆解需求、 定義優先順序,並把設計方向轉成可部署的網站體驗。

  • 把視覺稿轉成可維護的 React / Next.js 元件與互動流程。
  • 在作品案例裡清楚交代任務、技術決策與交付結果。
  • 兼顧 SEO、可近性與前端體驗,而不是只追求畫面完成。
技能 // 面試證據

用專案成果證明技能

能力不靠百分比說明,而是透過已完成的頁面區塊、型別化資料、API 流程、驗證習慣與可維護的實作選擇來呈現。

核心前端技術

React / Next.js

用於作品集頁面、App Router 版面與可重用頁面區塊。

  • 以元件化方式拆分作品集區塊,讓每個區塊責任清楚。
  • 使用 Next.js App Router 組合頁面結構與部署流程。
  • 把專案敘事和可維護的 React 結構連在一起。
可維護性

TypeScript

用於型別化專案資料、元件 props 與前端資料契約。

  • 用明確型別描述專案內容與共用資料結構。
  • 讓作品集資料在區塊調整時仍維持可預測。
  • 把資料形狀寫清楚,降低 review 與維護成本。
UI 實作

樣式系統

使用 Tailwind CSS、styled-components、SCSS 與響應式版面。

  • 把視覺方向轉成可重用、可響應的 UI 區塊。
  • 在不同斷點維持深色、高對比的作品集風格。
  • 優先沿用既有樣式做法,不額外加入 UI library。
產品流程

API 整合

用於天氣資料、後端 API 流程與 Supabase 資料串接。

  • 把前端畫面接到真實 API 驅動的專案案例。
  • 在需要時處理使用者看得到的 loading、empty、error state。
  • 讓資料整合集中在目標功能流程,避免擴散到無關區塊。
品質訊號

測試 / 驗證

使用 lint、build、聚焦 UI 驗證與可 review 的 diff。

  • 在送出實作 PR 前執行 repo 檢查。
  • 用聚焦驗證取代大範圍、無關的重寫。
  • 把變更維持在 code review 能有效檢查的大小。
系統思維

前端架構

用於功能邊界、資料模組與頁面層級組合。

  • 在有實際幫助時拆分頁面區塊、資料與共用型別。
  • 避免沒有必要的抽象,等它能降低複雜度時才加入。
  • 優先維持清楚結構,方便後續維護與交接。

Career Timeline

從測試思維到前端開發的實作累積。

LAP 2022 - 2023

自我實踐與技術啟蒙

@ 學習與個人專案

  • /建立 HTML5、CSS3 與 JavaScript (ES6+) 基礎,理解網頁結構、樣式與互動邏輯。
  • /完成多個 Side Projects,練習響應式版面、資料呈現與基本使用流程設計。
  • /開始使用 React,熟悉元件拆分、props 傳遞與狀態管理的開發模式。
LAP 2023 - 2024

測試工程師

@ 緲思網路科技有限公司

  • 負責產品手動測試與 Bug 追蹤,培養對介面細節、流程斷點與使用情境的敏感度。
  • 與前端團隊協作回報可重現問題,提供具體畫面、步驟與改善建議。
  • 使用 XMind 規劃測試流程與問題脈絡,提升需求理解與跨部門溝通效率。
  • 持續進修 HTML、CSS、JavaScript 與 React,將測試視角轉化為前端開發判斷。
LAP 2025 - PRESENT

前端工程師

@ 伊利諾芝加哥教育股份公司

  • /參與官方網站建置與優化,改善 SEO 表現、LCP 載入速度與主要頁面可讀性。
  • /開發並維護內部 UI 元件,兼顧互動效果、可重用性與無障礙細節。
  • /整理前端開發流程與維護規範,協助提升專案穩定性與後續交接效率。

精選專案作品

以可公開的前端案例整理產品定位、任務拆解、技術選型與交付結果,讓每個專案不只展示畫面,也能說明實作深度。

全端 MVP

TicketFlow 全端工單管理系統

可操作的工單管理系統,前端使用 Vue 3 + Vite,後端為 ASP.NET Core Minimal API + EF Core,支援 JWT 登入流程與工單 CRUD。

Task
定義登入、工單列表、篩選與 CRUD 流程,讓前端與 API 邏輯可以穩定串接。
Result
完成可部署的 MVP,涵蓋 Auth、Ticket CRUD 與多環境資料庫設定,並整理為可公開說明的案例。
  • 前後端契約以實際畫面與 API 流程對齊,不只展示靜態 UI。
  • 保留 MVP 範圍,優先完成登入、列表與編輯等核心使用路徑。
Vue 3ASP.NET CoreEF CoreSupabaseJWT全端
Case Study
企業前端專案

企業前端專案(公開摘要)

以公開摘要方式整理內部 Web 專案經驗,聚焦 UI 實作、RWD 與 API 串接,避免揭露不可公開資訊。

Task
將專案拆成可公開的任務描述,交代我負責的畫面、互動與資料串接範圍。
Result
形成一個可在作品集中引用的案例摘要,讓讀者能快速理解我的角色與實作方式。
  • 用公開摘要代替敏感畫面與資料,保留真實工作型態。
  • 說明 RWD、狀態處理與 API 接口整合的前端責任。
前端維護JavaScript企業專案RWD
作品集網站

Red Bull / Apex Flow 作品集網站

以 Next.js App Router、TypeScript 與 Tailwind CSS 建構的前端作品集,聚焦 SEO、可近性與高識別度視覺風格。

Task
定義首頁敘事、專案展示方式、語意結構與技術 SEO 基礎設定。
Result
完成可部署的作品集網站,具備 metadata、sitemap、robots、JSON-LD 與結構化內容區塊。
  • 以前端工程與內容策略一起設計,而不是只做靜態視覺頁。
  • 將專案卡、About 區塊與聯絡入口整理成可索引的資訊層。
Next.jsSEOAccessibilityPortfolio
Case Study
SaaS MVP

My Brand Workspace SaaS

面向個人品牌工作室的 SaaS MVP,整合客戶、專案、任務與收入管理,並以 Supabase 提供 Auth 與 PostgreSQL RLS。

Task
整理 CRUD、權限、儀表板與報表需求,建立可維護的 React 元件與狀態流程。
Result
完成多模組 SaaS MVP,並用 Vitest / Testing Library 補齊主要 UI 行為驗證。
  • 把產品需求拆成 Projects / Clients / Tasks / Income 等核心模組。
  • 以前端測試輔助後續重構,而不是只靠手動點擊。
SaaS MVPSupabase AuthPostgreSQL RLSDashboard
Case Study
品牌網站

MG MOTOR React 品牌網站

以 React 打造的品牌網站,負責前端畫面、RWD 與後端 API 串接,支援車款內容與表單互動。

Task
將品牌視覺轉成可維護的元件結構,並處理 API 串接與裝置相容性。
Result
完成可部署的品牌網站,兼顧版面呈現、互動流程與實際資料輸出。
  • 把品牌視覺語言轉成前端元件與可重用版型。
  • 在不同裝置下維持一致的資訊層次與 CTA 能見度。
ReactRWDAPI 串接品牌網站
Case Study
Contact / Hiring

讓作品成為下一次面試的起跑點

如果你正在尋找前端工程師,這裡提供目前可驗證的聯絡入口。歡迎透過 Email 安排面試,也可以先從 GitHub 檢視實作方式與專案脈絡。