PortfolioCase Study

作品集網站

Red Bull / Apex Flow 作品集網站

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

Demo GitHub

Goal

把前端能力、內容策略與產品敘事整合成單一作品集體驗，方便招聘與搜尋引擎理解。

Scope

  • 建立以 Apex Flow 為品牌語彙的 Next.js frontend portfolio。
  • 整理首頁 hero、about、performance、project gallery 與 contact flow。
  • 補齊 metadata、structured data、crawler-facing routes 與社群分享預覽。

Architecture

  • Next.js App Router 管理首頁、metadata、sitemap、robots 與 project case-study routes。
  • React component sections 分層呈現 portfolio narrative，project data 集中於 typed data file。
  • Tailwind CSS 與既有 Red Bull-inspired token 維持高對比、動態且可維護的視覺系統。

Key Features

  • 以前端工程與內容策略一起設計，而不是只做靜態視覺頁。
  • 將專案卡、About 區塊與聯絡入口整理成可索引的資訊層。
  • 補上 technical SEO、authority signals 與可近性細節。

Problems

  • 作品集需要同時服務求職瀏覽、SEO crawler 與社群分享情境，不能只依賴單頁視覺展示。
  • 專案卡資訊缺少可分享的 detail URL，面試或履歷連結無法直接指向特定案例。

Solutions

  • 以集中化 SEO constants 對齊 metadata、JSON-LD、OG image、robots 與 sitemap。
  • 新增 static case-study routes，讓每個指定作品都有固定 section 與可分享網址。

Result

完成可部署的作品集網站，具備 metadata、sitemap、robots、JSON-LD 與結構化內容區塊。