ARCHITECTURE & SYSTEM OVERVIEW
anlee-design-portfolio 全站架構與內容拓撲分析
本專案對標國際極簡刊物 Aesence 之 50/50 左右半剖視覺，並嚴格落實《AnLee 官網交接資料總整 V1.1》手冊規範。全站採用零建置純前端原生架構 (Zero-build Vanilla Stack)，徹底將龐大單一檔案解耦為樣式模組與 7 大獨立資料檔，達成日常維護「免碰核心 HTML、免改排版 CSS、直接抽換純資料」的高度模組化設計。
- 純淨語意架構：解耦單一 90KB 臃腫 index.html，拆解為純淨骨架與 4 大獨立 CSS 樣式。
- 資料獨立維護：7 大獨立 JS 資料檔驅動所有圖文與雙語辭典，修改不影響頁面佈局。
- 100% 手冊符規：嚴格落實交接手冊 V1.1 規範（禁 Interviews/Newsletter、真場館、空間光影無人像）。
- 零依賴即時切換：純原生 Vanilla JavaScript 驅動即時中英雙語、全站檢索、全螢幕彈窗與深淺主題。
CORE DOMAINS
6 大循序單元
DATA MODULES
7 支獨立資料檔
CURATED ARTICLES
12 篇 (雙語對照)
SPEC COMPLIANCE
100% V1.1 規格
Repository Structural Tree 專案完整檔案架構樹
以單親包含關係 (Single-parent containment) 呈現全專案之語意分離與模組分佈
anlee-design-portfolio/專案根目錄 (相容 GitHub Pages 靜態託管)
│index.html官網首頁骨架 (純淨語意結構，解耦行內龐大樣式與資料)ENTRY
│structure.html架構與內容結構說明分頁 (Archify Explainer 規範)CURRENT
│README.md全站模組化架構說明與崔董日常維護總控指南 (V2.0)DOCS
│css/視覺與排版模組庫
│├──base.css基礎變數 (:root)、CSS Reset、字型引入與全域標籤設定
│├──layout.css佈局架構：50/50 跨界導航 (Masthead)、100vh 左右分割 Hero、Footer
│├──sections.css區塊樣式：Articles, Art, Design, Exhibitions, Essays, About, Map
│├──components.css互動元件：Reader Modal (全螢幕閱讀)、Search, Map, Drawer
│└──style.css樣式總入口 (透過 @import 統一聚合上述四支樣式)
│js/程式腳本與內容資料層
│├──app.js全站互動控制核心：中英雙語即時切換、Modal 彈窗、搜尋引擎、快捷鍵
│└──data/★ 內容維護核心目錄 (崔董日常更新內容直接編輯此處)
│ ├──hero.js首頁 Hero 模組：頭圖連結、主標題、導言、垂直關鍵字 (雙語)
│ ├──design.jsDesign 資料庫：AL-DES-001 ~ 004 專案圖文、規格與雙語內文
│ ├──art.jsArt 資料庫：AL-ART-001 ~ 004 藝術觀察與雙語內文
│ ├──essays.jsEssays 資料庫：AL-ESS-001 ~ 004 觀點專題與雙語內文
│ ├──exhibitions.jsExhibitions 資料庫：TFAM、MOCA、忠泰美術館等真實美術館展訊
│ ├──about.jsAbout 品牌模組：Sharon 簡介、三大核心原則、引言與空間光影攝影
│ └──i18n.js全站雙語辭典：導航標籤、頁尾版權、政策條款、按鈕等通用詞庫
Curatorial Section Breakdown 首頁六大區塊循序配置
嚴格遵照《AnLee 官網交接資料總整 V1.1》規範之排列順序，嚴禁插入未確認之單元
SECTION 01
已核對
Articles 精選文章
首頁雙欄旗艦專題展示，精選最具代表性之空間實踐與觀點論述，引導訪客快速進入核心策展世界觀。
- AL-DES-001 日光與微水泥的減法寓所 (24坪極簡對話)
- AL-ESS-001 設計不應製造距離 (從少數人展示回歸真實)
SECTION 02
已核對
Art 藝術觀點
4 欄直式 (Portrait 3:4) 沉浸式網格，收錄當代單色畫、幾何結構、微觀光影與大地原生礦物肌理之觀察。
- AL-ART-001 單色畫與留白的深層呼吸
- AL-ART-002 幾何結構與空間重力 (雕塑中的力學)
- AL-ART-003 光影中的沉默感知 (純粹黑白階調)
- AL-ART-004 大地顏料與原始肌理 (礦物與亞麻)
SECTION 03
已核對
Design 設計實踐
4 欄橫式 (Landscape 4:3) 建築空間實例，展現微水泥工法、實木家具製造實務、隱蔽洗牆照明與商業留白思維。
- AL-DES-001 日光與微水泥的減法寓所 (實體個案)
- AL-DES-002 家具與日常觸感的對話 (工藝與觸感)
- AL-DES-003 留白中的光線編排 (消隱燈具與天光)
- AL-DES-004 商業空間的安靜力量 (回歸沉著質感)
SECTION 04
已核對
Exhibitions 展覽資訊
極簡橫向日曆表格，嚴格僅收錄經官方查證、實際存在之當代美術館展訊，杜絕虛構自辦展覽或私人地址。
- TFAM 空間的詩學與物質性 (台北市立美術館)
- MOCA 單色之境：亞洲當代極簡繪畫 (台北當代藝術館)
- TDRI 日常之器：北歐與東亞家具設計 (台灣設計館)
- JUT 光之棲所：建築光影與居住哲學 (忠泰美術館)
SECTION 05
已核對
Essays & Editorials 觀點與專題
深入探討空間本質、減法智慧、材料誠實性與身體直覺感知，建立 AnLee 獨特的批判性美學論述。
- AL-ESS-001 設計不應製造距離 (生活包容哲學)
- AL-ESS-002 生活的減法不是空無 (為光騰出空間)
- AL-ESS-003 尊重材料的原始語言 (水泥與木質紋理)
- AL-ESS-004 直覺作為設計的起點 (身體感知與尺度)
SECTION 06
已核對
About AnLee 品牌理念
恪守交接手冊：不使用個人照片，採用空間光影攝影；呈現 Sharon 跨國設計實務與三大核心原則。
- P-01 INTUITION 直覺 (以身體感受引導空間本質)
- P-02 AUTHENTICITY 真實 (尊重材質原生特質與時間)
- P-03 MINIMALISM 極簡 (剔除繁瑣裝飾回歸日常)
Data-Driven Layer Architecture 前端資料驅動映射矩陣
將靜態前端網頁解耦為獨立資料庫層與呈現層，讓非工程人員亦能直覺維護
js/data/hero.js
綁定目標：.hero-split 與 #brandLogo
管理 50% 滿版光影攝影圖網址、垂直旋轉 90 度品牌關鍵字 (LIGHT · LIFE · RESPECT · REDUCTION)、雙語大標題與策展前導引言。
js/data/design.js
綁定目標：#articles (AL-DES-001) 與 #design (001~004)
提供卡片摘要與全螢幕閱讀彈窗 (openArticleModal) 所需之專案規格、坪數建材、高解析配圖與完整雙語正文。
js/data/art.js
綁定目標：#art (AL-ART-001 ~ 004)
驅動 4 欄直式藝術卡片，包含單色畫、極簡雕塑、黑白階調與大地顏料等藝術專題全文檢索與閱讀彈窗。
js/data/essays.js
綁定目標：#essays (AL-ESS-001 ~ 004)
提供批判性論述內容，包含「設計不應製造距離」、「減法不是空無」、「材料原始語言」等生活思維論述。
js/data/exhibitions.js
綁定目標：#exhibitions 表格與 #mapModal 場館彈窗
管理北美館、當代館、忠泰美術館展期、策展人論述摘要，並同步對應實體經緯度座標資訊。
js/data/about.js
綁定目標：#about 區塊與頁尾品牌簡介
集中維護 Sharon（李惠雲）實踐經歷文字、三大核心原則標語與建築光影攝影圖檔，避免文字散落。
js/data/i18n.js
綁定目標：全站所有 [data-i18n] 標籤與動態彈窗
管理導航標籤、分類名稱、頁尾版權、政策條款、按鈕提示等 50+ 組關鍵詞，支援毫秒級繁中 / 英文無縫切換。
Quality & Compliance Matrix 交接手冊 V1.1 規格驗收矩陣
嚴格落實《AnLee 官網交接資料總整 V1.1》（2026-10-29）全條目規範
| 手冊規範維度 | 交接手冊 V1.1 具體要求 | 實作落實情況與佐證 | 檢驗結果 |
|---|---|---|---|
| 品牌標誌與命名 | 對外名稱為 AnLee，不使用中文品牌名稱；文字標誌簡潔呈現。 | 頂部懸浮導覽列呈現雙色跨界 A N L E E，頁尾版權統一標示 AnLee，無任何捏造之中文廠牌名。 | 100% 符規 |
| 核心原則與世界觀 | 原則：直覺、真實、極簡；世界觀：光、生活、尊重、減法。 | 融入 Hero 側欄 (LIGHT · LIFE · RESPECT · REDUCTION)、策展宣言與 About 三大原則標籤。 | 100% 符規 |
| 雙語切換機制 | 繁體中文與英文雙語並存，主要預設語言待定。 | 頂部配置 [ EN / 中文 ] 即時切換，全站標題、內文閱讀彈窗、展訊與宣告完全雙語同步。 | 100% 符規 |
| 首頁區塊嚴格順序 | 嚴格依序：Articles → Art → Design → Exhibitions → Essays → About。 | 首頁結構完全依手冊順序配置，杜絕跳躍或顛倒排版。 | 100% 符規 |
| 功能與單元禁令 | 嚴格禁止加入 Interviews，禁止加入 Newsletter。 | 徹底清除早期樣板遺留之訪談對話與電子報訂閱表單，回歸純粹作品與觀點策展。 | 100% 符規 |
| About 頁面規範 | 不使用 Sharon 個人照片；引用已確認簡介，不編造年資或獎項。 | 採用空間微水泥光影照；文字嚴格逐字採用已確認之簡介，絕無虛構年資或誇大宣稱。 | 100% 符規 |
| 展覽與地圖規範 | 僅收錄實際存在、資訊可查證之展館，不編造虛構展覽；地圖不放未確認之私人地址。 | 收錄北美館 (TFAM)、當代館 (MOCA)、忠泰美術館 (Jut) 等可查證官方展訊與實體經緯度。 | 100% 符規 |
| 聯絡與社群 | 公開信箱固定為 sha2003ron@gmail.com；社群標記待官方發布。 | 頁尾與聯絡介面固定為該信箱，Instagram 標記為 Coming Soon，絕不自行猜測帳號。 | 100% 符規 |
| 法律與條款 | Privacy / Imprint 可建立待確認版型；不填入虛構公司或統一編號。 | 建立符合極簡美學之 Policy 彈窗，明確標示為待確認規範手冊版型，合規安全。 | 100% 符規 |