個人品牌網站

01 / Context

背景與需求

02 / Challenge

需要解決的問題

1. C1

   SEO 架構規劃

   個人網站需要具備良好的搜尋能見度，同時兼顧內容維護與頁面效能。

2. C2

   頁面轉場體驗

   頁面切換過於生硬，容易降低整體瀏覽體驗。

3. C3

   內容架構設計

   隨著作品數量增加，若缺乏統一資料結構，容易造成維護成本提高與版面不一致。

03 / Decision

技術方案與取捨

1. C1 → Search Optimization

   透過 Nuxt SSR、Meta 管理與 Sitemap 建立，提升搜尋引擎索引效率與網站曝光度。

   • Nuxt SEO
   • Sitemap

2. C2 → User Experience

   使用 GSAP 建立 Page Transition 與動畫效果，提升網站的互動感與品牌印象。

   • GSAP
   • Vue Transition

3. C3 → Content Architecture

   使用 Nuxt Content 與 Markdown 建立內容驅動架構，將作品資料結構化管理，讓頁面能透過相同模板快速產生內容。

   • Nuxt Content
   • Markdown

技術組成

frontend

Nuxt 4 · Vue 3 · TypeScript · Tailwind CSS

animation

GSAP · Vue Transition

content

Nuxt Content · Markdown

analytics

GA4 · GTM

04 / Implementation

實作過程

1. F1

   Case Study 展示

   以案例研究形式展示專案內容，清楚呈現問題、解決方案與技術實作。

   • 專案分類
   • 圖片展示
   • 技術標籤
   • 專案細節頁
2. F2

   SEO 與內容管理

   透過 Nuxt Content 與 Meta 設定，提升搜尋引擎收錄效果與內容維護效率。

   • Sitemap
   • Meta Tags
   • Open Graph
   • 搜尋引擎收錄
3. F3

   流量分析

   在網站導入 Google Tag Manager 與 Google Analytics 4，學習追蹤網站流量與使用者行為。

4. F4

   動畫與使用體驗

   使用 GSAP 建立頁面轉場與互動效果，強化品牌網站的視覺體驗。

   • Page Transition
   • Scroll Animation
   • Responsive Layout

實際畫面

點擊放大檢視，可用左右鍵或滑動切換。

05 / Validation

測試與驗證

• 以 Google Search Console 確認網站收錄與搜尋成效
• 上線後依實際操作修正導覽列、漢堡選單延遲等問題
• GTM 改為自行載入後，上線確認自訂事件有進到 GA4

06 / Reflection

限制與後續