docs: separate documentation and specs into initial commit

Establish baseline for project documentation including BMAD specs, PRD, and system architecture notes.
2026-02-11 11:49:49 +08:00
parent 8c87d71aa2
commit e9897388dc
34 changed files with 11920 additions and 8777 deletions
--- a/specs/001-users-pukpuk-dev/ux-story-1-10-portfolio-spec.md
+++ b/specs/001-users-pukpuk-dev/ux-story-1-10-portfolio-spec.md
@@ -0,0 +1,271 @@
+# 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*