pkupuk
e9897388dc
Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
272 lines
5.0 KiB
Markdown
272 lines
5.0 KiB
Markdown
# 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*
|