# Story 1-10 Portfolio - UX Pixel-Perfect Specifications

> **UX Expert Review Document**
> 參考來源: `research/www.enchun.tw/website-portfolio.html`
> 設計系統: `apps/frontend/src/styles/theme.css`
> 目標視覺保真度: 95%+

---

## 🎨 Design Token 驗證

### 色彩系統

| 用途 | 變數名稱 | Hex Color | CSS Variable | 驗證狀態 |
|------|----------|-----------|--------------|----------|
| 主品牌色 | Enchun Blue | `#23608c` | `--color-enchunblue` | ✅ 已定義 |
| 深品牌色 | Enchun Blue Dark | `#3083bf` | `--color-enchunblue-dark` | ✅ 已定義 |
| 深灰文字 | Tarawera | `#2d3748` | `--color-tarawera` | ✅ 已定義 |

---

## 📐 Section 詳細規格

### 1. Portfolio 列表頁

#### 頁面路徑: `/website-portfolio`

#### 標題區塊
```css
.portfolio-header {
    text-align: center;
    padding: 60px 20px;
}

.portfolio-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-enchunblue);
    margin-bottom: 8px;
}

.portfolio-subtitle {
    font-size: 1.125rem;
    color: var(--color-gray-700);
}

.divider-line {
    width: 100px;
    height: 2px;
    background-color: var(--color-enchunblue);
    margin: 24px auto;
}
```

#### 作品卡片網格
```css
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

@media (max-width: 767px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
```

---

### 2. 作品卡片組件

#### 組件檔案: `components/PortfolioCard.astro`

```css
.portfolio-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 300ms ease-in-out;
    display: block;
    text-decoration: none;
    color: inherit;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.portfolio-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
}

.portfolio-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease-in-out;
}

.portfolio-card:hover .portfolio-image {
    transform: scale(1.05);
}

.portfolio-content {
    padding: 24px;
}

.portfolio-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-tarawera);
    margin-bottom: 8px;
}

.portfolio-description {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.5;
    margin-bottom: 16px;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portfolio-tag {
    padding: 4px 10px;
    background-color: var(--color-gray-100);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-700);
}
```

---

### 3. 作品詳情頁

#### 頁面路徑: `/website-portfolio/[slug]`

```css
.portfolio-detail {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

.portfolio-detail-header {
    margin-bottom: 40px;
}

.portfolio-detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-tarawera);
    margin-bottom: 16px;
}

.portfolio-detail-meta {
    display: flex;
    gap: 24px;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.portfolio-detail-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.portfolio-detail-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.portfolio-detail-description p {
    margin-bottom: 20px;
}
```

---

## 📱 響應式斷點總結

| Breakpoint | Grid Columns | 字體大小 |
|------------|--------------|----------|
| Desktop (>991px) | 2x2 | 19px |
| Tablet (767px) | 2x1 | 19px |
| Mobile (≤767px) | 1x1 | 16px |
| Small Mobile (≤479px) | 1x1 | 13px |

---

## 🎯 互動效果規格

### Hover 效果
```css
.portfolio-card {
    transition: all 300ms ease-in-out;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.portfolio-image {
    transition: transform 300ms ease-in-out;
}

.portfolio-card:hover .portfolio-image {
    transform: scale(1.05);
}
```

---

## 🏗️ 組件實現清單

### ✅ 已實現
- [x] `website-portfolio.astro` - 基礎框架
- [x] `webdesign-profolio/[slug].astro` - 詳情頁框架

### ⏳ 需新增/修改
- [ ] `PortfolioCard.astro` - 作品卡片組件
- [ ] 更新列表頁使用網格佈局
- [ ] 更新詳情頁樣式

---

## 📋 驗收標準

### 視覺保真度檢查
- [ ] 標題區塊「案例分享」+ 雙線裝飾
- [ ] 2x2 網格佈局（桌面端）
- [ ] 作品卡片 Hover 效果
- [ ] 標籤浮動效果

### 響應式檢查
- [ ] Desktop: 2x2 網格
- [ ] Tablet: 2x1 網格
- [ ] Mobile: 1x1 網格

### 功能檢查
- [ ] 外部連結新分頁打開
- [ ] 圖片 WebP 格式
- [ ] 圖片懶加載

---

*此文件由 UX Expert 創建，最後更新：2026-02-10*