Skip to content

feat: create Mayasalu watercolor gallery - #2

Open
ethan-CCY wants to merge 1 commit into
mainfrom
codex/customize-landing-page-for-mayasalu-b7590t
Open

feat: create Mayasalu watercolor gallery#2
ethan-CCY wants to merge 1 commit into
mainfrom
codex/customize-landing-page-for-mayasalu-b7590t

Conversation

@ethan-CCY

Copy link
Copy Markdown
Owner

Motivation

  • 將原有通用 Landing template 客製化為水彩藝術家個人線上畫廊(Mayasalu),突顯透明層疊、流動暈染與自然光感的畫風。
  • 提供線上作品展示(Gallery)與 Lightbox 放大檢視,並保留簡潔、留白多的視覺風格以利作品呈現。
  • 支援 RWD(行動裝置至少 1–2 欄 Gallery)並確保資產路徑相容 GitHub Pages 子路徑 /Landing_Page/。
  • 避免引入大型框架,採用純 HTML/CSS/vanilla JS 實作互動功能。

Description

  • 更新 index.html 為繁體中文頁面並加入 Hero / About / Gallery / Visit / Contact / Footer 等區塊與導覽連結(含捲動定位)。
  • 新增 dist/js/gallery.js(純 JS)實作作品分類篩選、Lightbox 放大、聯絡表單前端驗證與年份自動顯示等互動行為。
  • 擴充樣式 dist/css/style.css(新增水彩感配色、Gallery grid、卡片樣式、Lightbox 與 RWD 規則),並新增佔位 SVG 資產於 dist/images/gallery/hero-watercolor.svg, art-01.svgart-08.svg)。
  • 更新 README.md(專案簡介、Demo 連結、功能列表)並以相對路徑維持對 GitHub Pages 的相容性。

Testing

  • 在本機以 python -m http.server 8000 啟動靜態伺服器並以 headless Playwright 擷取頁面快照(產生檔案:artifacts/mayasalu-gallery.png),頁面可載入與呈現(成功)。
  • 已用瀏覽器檢查主要互動:分類按鈕可切換、點擊卡片會開啟 Lightbox、Esc 或關閉按鈕可關閉(手動/自動化檢查)。
  • 未新增單元測試或後端測試;本 PR 為靜態前端內容與前端互動的修改。
  • 已提交變更並建立 commit(訊息:feat: customize Mayasalu watercolor gallery)。

Codex Task

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant