從零打造現代化個人作品集：React 19 + Three.js 技術實踐

在這個前端技術日新月異的時代，一個優秀的個人作品集不僅是展示技能的窗口，更是技術實力的直接體現。本文將深度剖析一個基於 React 19 + Vite 的現代化作品集專案，從架構設計到動畫實現，完整呈現「前端審美」與「工程實踐」的結合。

🔗 線上預覽：typelin.pages.dev

Part 1：技術架構總覽#

為什麼選擇 Vite 而非 Next.js？#

這個專案選擇了 Vite + React 19 的純前端架構，而不是更流行的 Next.js。這個選擇背後有明確的考量：

考量點	Vite	Next.js
構建速度	⚡ 極快 (ESBuild)	較慢
複雜度	輕量	全端框架
SEO 需求	作品集不需要 SSR	內建 SSR/SSG
部署	純靜態，任意平台	需要 Node.js 或 Vercel

對於純展示型的作品集網站，Vite 的輕量與極速是更優解。

專案結構#

1
react-portfolio/
2
├── src/
3
│   ├── App.tsx              # 主應用入口 + 路由配置
4
│   ├── components/          # 所有 UI 組件
5
│   │   ├── Background/      # 背景效果
6
│   │   ├── 3D/              # Three.js 3D 組件
7
│   │   └── *.tsx            # 頁面區塊
8
│   ├── pages/               # 子路由頁面
9
│   ├── hooks/               # 自定義 Hooks
10
│   ├── store/               # Zustand 狀態管理
11
│   └── styles/              # CSS 樣式
12
└── dist/                    # 構建輸出

核心依賴#

類別	技術
框架	Vite + React 19
語言	TypeScript
樣式	TailwindCSS 3.4
動畫	Framer Motion + GSAP
3D	React Three Fiber + Drei
滾動	Lenis
狀態	Zustand
路由	React Router DOM
部署	Cloudflare Pages

Part 2：動畫系統深度解析#

這個作品集最令人印象深刻的是其流暢的動畫體驗。讓我們逐一拆解其實現方式。

A) 捲動動畫 — Framer Motion#

1
import { motion } from 'framer-motion';
2

3
<motion.div
4
    initial={{ opacity: 0, x: -50 }}
5
    whileInView={{ opacity: 1, x: 0 }}
6
    viewport={{ once: true }}
7
    transition={{ duration: 0.6 }}
8
>
9
    {/* 內容 */}
10
</motion.div>

whileInView 配合 viewport={{ once: true }} 實現「進入視窗時觸發一次」的效果，既優雅又節省效能。

B) 平滑捲動 — Lenis#

1
import Lenis from 'lenis';
2

3
useEffect(() => {
4
    const lenis = new Lenis({
5
        lerp: 0.1,        // 插值係數
6
        smoothWheel: true  // 滑鼠滾輪平滑
7
    });
8

9
    function raf(time: number) {
10
        lenis.raf(time);
11
        requestAnimationFrame(raf);
12
    }
13
    requestAnimationFrame(raf);
14
}, []);

Lenis 是目前最流行的平滑滾動庫，它使用 lerp（線性插值）實現「慣性滾動」效果。

C) 星空背景 — React Three Fiber#

1
import { Canvas, useFrame } from '@react-three/fiber';
2
import { Points, PointMaterial } from '@react-three/drei';
3

4
const TwinklingStars = () => {
5
    const materialRef = useRef();
6

7
    useFrame((state) => {
8
        // 使用 sin 波動實現閃爍效果
9
        materialRef.current.opacity =
10
            0.6 + Math.sin(state.clock.getElapsedTime()) * 0.4;
11
    });
12

13
    return (
14
        <Points>
15
            <PointMaterial
16
                ref={materialRef}
17
                size={0.002}
18
                color="#ffffff"
19
            />
20
        </Points>
21
    );
22
};

D) 純 CSS 銀河效果（效能優化版）#

為了在低端設備上也能流暢運行，專案還提供了純 CSS 的銀河背景作為備選：

1
<motion.div
2
    style={{
3
        background: 'conic-gradient(from 0deg, transparent, rgba(136,204,255,0.1), transparent)',
4
    }}
5
    animate={{ rotate: 360 }}
6
    transition={{ duration: 60, repeat: Infinity, ease: 'linear' }}
7
/>

使用 conic-gradient + rotate 動畫，完全不需要 WebGL，效能消耗極低。

Part 3：自定義 Hooks 與 UI 組件#

完全手工打造的 UI#

這個專案沒有使用任何 UI 組件庫（如 shadcn/ui），所有視覺效果都是手工實現：

玻璃質感卡片 (Glassmorphism)#

1
<div className="bg-zinc-900/80 backdrop-blur-xl border border-white/10 rounded-3xl">
2
    {/* 內容 */}
3
</div>

發光邊框#

1
style={{
2
    borderColor: item.color,
3
    boxShadow: `0 0 20px ${item.color}30`
4
}}

實用 Hooks 封裝#

1
// 1. 滾動動畫 Hook
2
export const useScrollAnimation = (threshold, exitThreshold) => {
3
    // 使用 IntersectionObserver 實現
4
};
5

6
// 2. 滑鼠位置追蹤（含節流）
7
export const useMousePosition = () => {
8
    // 60fps 節流的 mousemove 監聽
9
};
10

11
// 3. Hover 狀態
12
export const useHover = () => {
13
    // 返回 [ref, isHovered]
14
};
15

16
// 4. 視差滾動
17
export const useParallax = (speed) => {
18
    // 根據滾動位置計算偏移
19
};

這些 Hooks 遵循單一職責原則，可以輕鬆在其他專案中複用。

Part 4：狀態管理與路由#

Zustand — 輕量級狀態管理#

1
import { create } from 'zustand';
2

3
export type Theme = 'stars' | 'grid' | 'galaxy' | 'random';
4

5
export const useStore = create<AppState>((set) => ({
6
    theme: 'stars',
7
    setTheme: (theme) => set({ theme }),
8
    nextTheme: () => set((state) => {
9
        const themes: Theme[] = ['stars', 'grid', 'galaxy', 'random'];
10
        const currentIndex = themes.indexOf(state.theme);
11
        return { theme: themes[(currentIndex + 1) % themes.length] };
12
    }),
13
}));

相比 Redux，Zustand 的優勢在於：

零樣板代碼
不需要 Provider 包裹
天然支援 TypeScript

React Router DOM 路由配置#

1
import { Routes, Route } from 'react-router-dom';
2

3
<Routes>
4
    <Route path="/" element={<HomePage />} />
5
    <Route path="/stust" element={<StustResources />} />
6
    <Route path="/tools/*" element={<ToolsLayout />} />
7
</Routes>

Part 5：效能優化實踐#

在有大量動畫的網站中，效能優化至關重要。以下是專案中採用的優化策略：

優化技術	實現方式
圖片懶加載	`<img loading="lazy">`
動畫節流	60fps 限制的事件監聽
GPU 加速	僅使用 `transform` / `opacity`
減少重繪	移除高成本的 `blur-3xl`
純 CSS 背景	Galaxy 使用 `conic-gradient` 取代 Three.js

節流函數實現#

1
const throttle = (func, limit) => {
2
    let inThrottle = false;
3
    return (...args) => {
4
        if (!inThrottle) {
5
            func(...args);
6
            inThrottle = true;
7
            setTimeout(() => (inThrottle = false), limit);
8
        }
9
    };
10
};
11

12
// 使用
13
window.addEventListener('scroll', throttle(handleScroll, 16)); // ~60fps

Part 6：部署到 Cloudflare Pages#

配置方式#

專案使用標準 Vite 構建，無需複雜的 wrangler.toml：

1
{
2
    "build": "tsc -b && vite build"
3
}

SPA 路由處理#

為了讓 React Router 在 Cloudflare Pages 上正常工作，需要添加 _redirects 規則：

1
/*  /index.html  200

這確保所有路徑都回退到 index.html，由前端路由接管。

總結#

這個作品集專案展示了現代前端開發的多個面向：

架構選擇：根據需求選擇 Vite 而非 Next.js
動畫實現：Framer Motion + Three.js + Lenis 的組合運用
狀態管理：Zustand 的輕量化方案
效能意識：從 GPU 動畫到純 CSS 替代方案的多層次優化
部署實踐：Cloudflare Pages 的靜態網站部署

希望這篇技術分析能為你的作品集開發提供參考。如果你對任何技術細節有疑問，歡迎留言討論！

資源	連結
線上預覽	typelin.pages.dev
Vite 官方文檔	vitejs.dev
Framer Motion	framer.com/motion
React Three Fiber	r3f.docs.pmnd.rs
Lenis	github.com/studio-freight/lenis