# 個人作品集網站重建說明書
**目標網站**: rakumario.com  
**重建方式**: AI Agent 自主開發（非模板）  
**核心原則**: 專業設計需兼顧 SEO、可用性與技術規範  

---

## 1. 網站核心定位
### 1.1 基本概念與價值
| 要素             | 說明                                                                 |
|------------------|----------------------------------------------------------------------|
| **身份定位**     | 獨立設計師/創作者作品集                                              |
| **設計哲學**     | 視覺簡約 + 技術嚴謹（拒絕純視覺導向）                                |
| **目標用戶**     | 潛在客戶/合作方/招聘方                                               |
| **核心優勢**     | • 多語言無縫切換（日英雙語）<br>• 技術矩陣可視化<br>• SEO 深度集成    |

---

## 2. 核心功能架構
### 2.1 頁面系統
```mermaid
flowchart LR
A[首頁] --> B[About Me]
A --> C[Portfolio]
A --> D[Contact]
2.1.1 首頁
標語系統：楽・マリオ | RAKU·MARIO + 作品ポートフォリオ（雙語動態加載）

導航設計：固定式極簡導航欄（About/Portfolio/Contact）

2.1.2 About Me 頁
個人宣言：保留原文核心語句

技能矩陣：
類別,技術項
設計工具,Figma, Photoshop, Illustrator
3D/動畫,Cinema 4D, Maya, Blender
音視頻,Logic Pro X, After Effects
開發語言,HTML/CSS/JavaScript

2.1.3 Portfolio 頁
功能	技術實現
三維分類	UI設計/3D作品/視頻獨立分類
作品彈窗	點擊卡片展開高清圖+技術說明
響應式佈局	自動適配桌面/平板/手機
2.1.4 Contact 頁
直連方式：
📞 +8180-3178-4832
✉️ rakumario@yahoo.co.jp

智能表單：
{
  "字段": ["姓名", "邮箱", "消息"],
  "驗證": ["非空檢測", "郵箱格式驗證"],
  "反饋": "提交成功Toast提示"
}

2.2 擴展系統（可選）
輕博客模塊：

Markdown 即時渲染

分類標籤系統

服務看板：

設計服務清單（網站/3D建模等）

在線報價入口

3. 技術實現規範
3.1 前端架構
模塊	技術方案
核心框架	React + Bootstrap 5
動畫引擎	wow.js + animate.css
多語言系統	JSON 語言包動態切換
3.2 後端集成
graph TB
  A[SEO自動化] --> B[Meta標籤生成]
  A --> C[Schema.org結構化數據]
  D[數據追踪] --> E[Google Analytics]
  D --> F[Search Console]

3.3 關鍵技術節點
節點類型	功能說明	應用場景示例
LLM 接口	動態生成SEO描述	作品頁面AI摘要
知識檢索	本地化內容快速索引	博客文章關鍵詞檢索
HTTP請求	表單數據對接郵件API	用戶消息即時通知
4. 設計與體驗規範
4.1 視覺系統
要素	規範值
主色系	深灰 #333 + 提亮橙 #FF6B35
字體方案	日文：Noto Sans JP
英文：Inter
交互反饋	表單提交Toast提示
4.2 無障礙設計
csv
要求,實施方案
視覺輔助,所有圖片添加alt文本
操作兼容,完整鍵盤導航支持
媒體可訪問,視頻內嵌字幕

5. 部署運維方案
5.1 實施流程
託管平台：Vercel（自動CI/CD）

域名配置：

綁定 rakumario.com

全站301重定向

安全協議：

HTTPS強制跳轉

GDPR合規聲明

5.2 維護計劃
timeline
  title 運維週期
  每月  ： 流量分析報告（GA數據導出）
  每季度： 作品更新 + 死鏈檢測

6. 執行優先級
核心頁面開發（首頁 → About → Portfolio → Contact）

多語言系統 + 移動端適配

SEO基礎優化（Meta標籤/結構化數據）

擴展模塊實現

7. 測試清單
跨瀏覽器兼容性測試（Chrome/Firefox/Safari）

移動端觸控操作驗證

日英語言切換一致性檢查

HTTPS證書有效性驗證

表單提交成功率測試

注：现有网站内容可通过 [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) 爬取文本/图片资源，加速迁移过程。