From 29d5d028b8d56ed8b9399aab364928612e06aab9 Mon Sep 17 00:00:00 2001 From: HOLISNOW Date: Sat, 6 Dec 2025 13:22:05 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E8=AA=BF=E6=95=B4=20Html=20=E7=B5=90?= =?UTF-8?q?=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 654 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 620 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 6a09c3c..8ef0956 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,623 @@ - - - - - - - - - - + + + + + Your Name · Frontend Dev — 個人品牌網站 + + + + + + +
+ + +
+ +
+
+
+

+ 個人品牌 — 前端工程師作品集骨架 +

+

+ 這是 Phase 1 的網站骨架（單一 index.html）。此區為 Hero + 區的占位內容，包含唯一的 h1 與簡短導引。 +

+

+ 核心職稱：Frontend + Developer。未來會放一句話自我介紹、主要角色與行動呼籲（瀏覽作品集 + / 下載履歷）。 +

+ +
+ 瀏覽作品集 + 聯絡我（Email） +
+ +

+ 之後會用 Section SDD 的 Prompt + 產生正式文案與版面，請把新的 section + 程式碼整段貼回來取代這一區。 +

+
+ +
+ 在筆電前撰寫程式碼的前端開發者 +
+
+
+ + + +
+
+
+

+ 關於我（之後會用 Section SDD 替換） +

+

+ 這裡目前是 About + 區的占位內容。未來會放個人介紹、工作經歷與設計 / + 程式相關背景說明。 +

+

+ 之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 + section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。 +

+
+ + +
+
+ + + +
+
+

+ 技能（之後會用 Section SDD 替換） +

+

+ 這裡目前是 Skills 區的占位內容，將列出前端相關技能、工具與熟練程度。 +

+

+ 之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 + section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。 +

+ +
+ HTML + CSS + Responsive Design + Accessibility + React（計劃） + Design Systems +
+
+
+ + + +
+
+

+ 作品集（之後會用 Section SDD 替換） +

+

+ 這裡目前是 Projects + 區的占位內容，示意會展示數個專案卡片，包含標題、簡短描述與示意圖。 +

+

+ 之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 + section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。 +

+ +
+
+

專案範例 A

+

+ 專案 A + 的簡短說明—這裡是占位文字，未來會替換成專案內容與連結。 +

+
+ +
+

專案範例 B

+

+ 專案 B + 的簡短說明—這裡是占位文字，未來會替換成專案內容與連結。 +

+
+
+
+
+ + + +
+
+

+ 聯絡我（之後會用 Section SDD 替換） +

+

+ 這裡目前是 Contact + 區的占位內容，將提供 Email、電話，以及社群（GitHub、LinkedIn）連結。 +

+

+ 之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 + section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。 +

+ +
+
+ Email： + hello@example.com +
+ +
+ Phone： + +886 900 000 000 +
+ +
+ GitHub： + github.com/yourname +
+ +
+ LinkedIn： + linkedin.com/in/yourname +
+
+
+
+ +
+ +
+
+
+ © Your Name · Frontend Dev +
+ +
+ 此檔為 Phase 1 骨架 — 含 Section 與 CSS 插槽，方便以 Section SDD 替換內容 +
+
+
+
+ \ No newline at end of file From a1f753ff36a1fe7e99ce5fdb04b0bca3d30c2511 Mon Sep 17 00:00:00 2001 From: HOLISNOW Date: Sat, 6 Dec 2025 14:15:14 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E8=AA=BF=E6=95=B4=20=E7=B6=B2=E9=A0=81titl?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 8ef0956..ae4a792 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Your Name · Frontend Dev — 個人品牌網站 + CHU LI · UIUX — 個人品牌網站 Date: Sat, 6 Dec 2025 14:39:59 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E8=AA=BF=E6=95=B4=20=E5=85=A7=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 506 ++++++----------------------------------------------- 1 file changed, 50 insertions(+), 456 deletions(-) diff --git a/index.html b/index.html index ae4a792..8be92fc 100644 --- a/index.html +++ b/index.html @@ -81,7 +81,6 @@ outline: none; } - /* 小型排版輔助 */ .section { padding: 48px 0; } @@ -92,107 +91,10 @@ } /* CSS:BASE-END */ - /* CSS:HERO-START */ - .site-header { - position: sticky; - top: 0; - z-index: 30; - backdrop-filter: blur(6px); - background: linear-gradient( - 180deg, - rgba(11, 18, 32, 0.88), - rgba(11, 18, 32, 0.72) - ); - border-bottom: 1px solid rgba(255, 255, 255, 0.03); - box-shadow: 0 6px 18px rgba(2, 6, 12, 0.6); - } - - .nav { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 12px 0; - } - - .site-logo { - font-weight: 700; - letter-spacing: 0.2px; - font-size: 0.95rem; - color: #cfeefe; - } + /* HERO ...（保留原樣，不重貼） */ + /* ... */ - .nav-list { - display: flex; - gap: 12px; - align-items: center; - } - - .nav-link { - padding: 8px 10px; - border-radius: 8px; - font-size: 0.95rem; - color: #cfeefe; - opacity: 0.88; - } - - .nav-link:hover, - .nav-link:focus { - background: rgba(42, 122, 163, 0.12); - color: #eaffff; - outline: none; - } - - .section-hero { - padding: 64px 0 56px 0; - background: linear-gradient( - 180deg, - rgba(6, 18, 30, 0.6) 0%, - rgba(4, 12, 22, 0.6) 100% - ); - } - - .hero-inner { - display: grid; - grid-template-columns: 1fr; - gap: 24px; - align-items: center; - } - - .hero-title { - margin: 0 0 12px 0; - font-size: 1.5rem; - line-height: 1.05; - color: #eaf9ff; - letter-spacing: -0.2px; - } - - .hero-lead { - margin: 0 0 18px 0; - color: #c9dbe6; - } - - .hero-cta { - display: flex; - gap: 12px; - flex-wrap: wrap; - } - - .hero-figure { - border-radius: 12px; - overflow: hidden; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.02), - rgba(255, 255, 255, 0.01) - ); - border: 1px solid rgba(255, 255, 255, 0.03); - max-width: 560px; - margin-left: auto; - } - /* CSS:HERO-END */ - - /* CSS:ABOUT-START */ + /* CSS:ABOUT-START（可調整區） */ .section-about { padding-top: 40px; padding-bottom: 40px; @@ -201,154 +103,50 @@ .about-grid { display: grid; grid-template-columns: 1fr; - gap: 18px; + gap: 28px; align-items: start; } - .profile-photo { - border-radius: 10px; - overflow: hidden; - max-width: 420px; - } - .about-text p { - margin: 0 0 12px 0; + margin: 0 0 14px 0; color: #cddde8; - } - /* CSS:ABOUT-END */ - - /* CSS:SKILLS-START */ - .section-skills { - padding-top: 40px; - padding-bottom: 40px; - } - - .skill-list { - display: flex; - gap: 8px; - flex-wrap: wrap; + line-height: 1.7; } - .skill-pill { - padding: 8px 10px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.02); - font-size: 0.9rem; - color: #d4eefc; + .about-list { + padding-left: 18px; + margin: 12px 0 18px 0; } - /* CSS:SKILLS-END */ - /* CSS:PROJECTS-START */ - .section-projects { - padding-top: 40px; - padding-bottom: 40px; - } - - .projects-grid { - display: grid; - grid-template-columns: 1fr; - gap: 16px; - } - - .project-card { - padding: 16px; - border-radius: 10px; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.012), - rgba(255, 255, 255, 0.008) - ); - border: 1px solid rgba(255, 255, 255, 0.03); + .about-list li { + margin-bottom: 8px; + color: #d3e6f4; } - .project-title { - margin: 0 0 8px 0; - font-weight: 700; - } - - .project-desc { - margin: 0; - color: #cbdde9; - } - /* CSS:PROJECTS-END */ - - /* CSS:CONTACT-START */ - .section-contact { - padding-top: 40px; - padding-bottom: 64px; - } - - .contact-list { - display: flex; - flex-direction: column; - gap: 8px; - } - - .contact-item { - display: inline-flex; - gap: 10px; - align-items: center; - } - - .contact-link { - text-decoration: underline; - color: #bfefff; + .profile-photo { + border-radius: 12px; + overflow: hidden; + max-width: 420px; + border: 1px solid rgba(255,255,255,0.04); + background: rgba(255,255,255,0.02); } - /* CSS:CONTACT-END */ - - /* CSS:RWD-START */ - /* 手機優先，然後在較寬裝置做調整 */ - @media (min-width: 640px) { - .hero-title { - font-size: 2rem; - } - - .hero-inner { - grid-template-columns: 1fr 1fr; - gap: 32px; - } + /* CSS:ABOUT-END */ - .hero-figure { - margin: 0; - } - } + /* 其他 CSS 全部保留原樣（Skills / Projects / Contact / RWD） */ + /* ... */ @media (min-width: 768px) { - .container { - padding: 0 28px; - } - .about-grid { grid-template-columns: 1fr 360px; - gap: 28px; - } - - .projects-grid { - grid-template-columns: 1fr 1fr; - gap: 20px; - } - - .nav-list { - gap: 14px; + gap: 36px; } } - - @media (min-width: 1100px) { - .container { - max-width: 1180px; - } - - .hero-title { - font-size: 2.4rem; - } - } - /* CSS:RWD-END */
+
- -
- 設計師工作情境示意照片 -
- - - - - - （以下略） - - - - + App/Web 介面設計、動態視覺、品牌圖像與使用者 diff --git a/style.css b/style.css new file mode 100644 index 0000000..44c90aa --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +/* CSS:BASE-START */ +/* 全站基底樣式（禁止使用 ID 選擇器） */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + height: 100%; +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", + sans-serif; + background-color: #0b1220; /* 深色背景 */ + color: #e6eef8; /* 淺灰白文字 */ + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + min-width: 0; +} + +.page { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.container { + width: 100%; + max-width: 1100px; + padding: 0 20px; + margin: 0 auto; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +/* 小按鈕 / 連結風格 */ +.btn { + display: inline-block; + padding: 10px 16px; + border-radius: 10px; + background-color: rgba(42, 122, 163, 0.14); + border: 1px solid rgba(42, 122, 163, 0.18); + color: #dff4ff; + text-decoration: none; + font-weight: 600; + transition: background-color 160ms ease, transform 120ms ease; +} + +.btn:focus, +.btn:active { + transform: translateY(1px); + outline: none; +} + +.section { + padding: 48px 0; +} + +.section-title { + margin: 0 0 12px 0; + font-size: 1.25rem; +} +/* CSS:BASE-END */ + +/* HERO 保留（你未貼出，我不改） */ +/* ... */ + +/* CSS:ABOUT-START（可調整區） */ +.section-about { + padding-top: 40px; + padding-bottom: 40px; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr; + gap: 28px; + align-items: start; +} + +.about-text p { + margin: 0 0 14px 0; + color: #cddde8; + line-height: 1.7; +} + +.about-list { + padding-left: 18px; + margin: 12px 0 18px 0; +} + +.about-list li { + margin-bottom: 8px; + color: #d3e6f4; +} + +.profile-photo { + border-radius: 12px; + overflow: hidden; + max-width: 420px; + border: 1px solid rgba(255, 255, 255, 0.04); + background: rgba(255, 255, 255, 0.02); +} +/* CSS:ABOUT-END */ + +/* 其他 Section CSS（Skills / Projects / Contact）保留 */ +/* ... */ + +@media (min-width: 768px) { + .about-grid { + grid-template-columns: 1fr 360px; + gap: 36px; + } +} From ea593a4dce7dbaba05d75592fed9bf271ba24831 Mon Sep 17 00:00:00 2001 From: HOLISNOW Date: Sat, 6 Dec 2025 15:36:16 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E8=AE=8A=E6=9B=B4=20Html=20=E8=B7=9F=20CSS?= =?UTF-8?q?=20=E6=A8=A3=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 306 +++++++++++++++++++++++++++----- style.css | 130 -------------- styles.css | 502 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 761 insertions(+), 177 deletions(-) delete mode 100644 style.css create mode 100644 styles.css diff --git a/index.html b/index.html index 03d4027..b243727 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,262 @@ - - - - - CHU LI · UIUX — 個人品牌網站 - - - - - - -
- - - -
- - （此區原樣保留，省略） - - - -
-
-
-

關於我

- -

- 我是一位 UI/UX 設計師，同時擅長動畫與平面視覺。過去的作品橫跨 - App/Web 介面設計、動態視覺、品牌圖像與使用者 +

+
+ + + +
+
+

精選作品

+

以下是我近期完成的部分專案，涵蓋品牌設計、介面設計與動畫製作等不同領域。每個專案都是獨特挑戰的解決方案。

+ +
+
+
+ 電商平台介面設計展示 +
+

電商平台 UI/UX 重新設計

+

為新創電商品牌打造全新的購物體驗，透過使用者研究優化購物流程，提升 35% 的轉換率。採用現代化的視覺語言，讓品牌更具辨識度。

+
+ UI/UX Design + 使用者研究 + Figma +
+
+ +
+
+ 品牌識別系統設計 +
+

咖啡品牌識別系統

+

從零開始建立完整的品牌識別，包含 Logo 設計、色彩系統、字體規範到應用設計。創造溫暖且具現代感的品牌形象，完美詮釋品牌精神。

+
+ 品牌設計 + 視覺識別 + Illustrator +
+
+ +
+
+ 行動應用程式介面設計 +
+

健康管理 App 設計

+

設計直覺易用的健康追蹤應用程式，整合數據視覺化與互動動畫，讓使用者能輕鬆記錄並了解自己的健康狀態。獲得 App Store 編輯推薦。

+
+ App Design + 動畫設計 + 原型設計 +
+
+ +
+
+ 動態圖形設計作品 +
+

產品介紹動畫影片

+

為 SaaS 產品製作 90 秒的介紹動畫，運用流暢的轉場與動態圖形，清楚傳達產品價值與功能特色。影片在社群媒體獲得超過 50 萬次觀看。

+
+ Motion Graphics + After Effects + 腳本設計 +
+
+
+
+
+ + + +
+
+

讓我們聊聊

+

無論是專案合作、設計諮詢，或只是想交流設計想法，都歡迎與我聯繫。我通常會在 24 小時內回覆訊息。

+ +
+
+
+
📧
+
+
Email
+ hello@design-portfolio.com +
+
+ +
+
📱
+
+
電話
+ +886 912-345-678 +
+
+ +
+
📍
+
+
位置
+ 台北市，台灣 +
+
+
+ + +
+
+
+ +
+ +
+
+
© 2025 林小美 · UI/UX Designer
+
用心設計每一個細節 ✨
+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 44c90aa..0000000 --- a/style.css +++ /dev/null @@ -1,130 +0,0 @@ -/* CSS:BASE-START */ -/* 全站基底樣式（禁止使用 ID 選擇器） */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html, -body { - height: 100%; -} - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", - sans-serif; - background-color: #0b1220; /* 深色背景 */ - color: #e6eef8; /* 淺灰白文字 */ - line-height: 1.6; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; - min-width: 0; -} - -.page { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.container { - width: 100%; - max-width: 1100px; - padding: 0 20px; - margin: 0 auto; -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -a { - color: inherit; - text-decoration: none; -} - -/* 小按鈕 / 連結風格 */ -.btn { - display: inline-block; - padding: 10px 16px; - border-radius: 10px; - background-color: rgba(42, 122, 163, 0.14); - border: 1px solid rgba(42, 122, 163, 0.18); - color: #dff4ff; - text-decoration: none; - font-weight: 600; - transition: background-color 160ms ease, transform 120ms ease; -} - -.btn:focus, -.btn:active { - transform: translateY(1px); - outline: none; -} - -.section { - padding: 48px 0; -} - -.section-title { - margin: 0 0 12px 0; - font-size: 1.25rem; -} -/* CSS:BASE-END */ - -/* HERO 保留（你未貼出，我不改） */ -/* ... */ - -/* CSS:ABOUT-START（可調整區） */ -.section-about { - padding-top: 40px; - padding-bottom: 40px; -} - -.about-grid { - display: grid; - grid-template-columns: 1fr; - gap: 28px; - align-items: start; -} - -.about-text p { - margin: 0 0 14px 0; - color: #cddde8; - line-height: 1.7; -} - -.about-list { - padding-left: 18px; - margin: 12px 0 18px 0; -} - -.about-list li { - margin-bottom: 8px; - color: #d3e6f4; -} - -.profile-photo { - border-radius: 12px; - overflow: hidden; - max-width: 420px; - border: 1px solid rgba(255, 255, 255, 0.04); - background: rgba(255, 255, 255, 0.02); -} -/* CSS:ABOUT-END */ - -/* 其他 Section CSS（Skills / Projects / Contact）保留 */ -/* ... */ - -@media (min-width: 768px) { - .about-grid { - grid-template-columns: 1fr 360px; - gap: 36px; - } -} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..832effb --- /dev/null +++ b/styles.css @@ -0,0 +1,502 @@ +/* CSS:BASE-START */ +*, *::before, *::after { + box-sizing: border-box; +} +html, body { + height: 100%; +} +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; + background-color: #0a0e1a; + color: #e8edf5; + line-height: 1.7; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + min-width: 0; +} +.page { + display: flex; + flex-direction: column; + min-height: 100vh; +} +.container { + width: 100%; + max-width: 1100px; + padding: 0 20px; + margin: 0 auto; +} +img { + max-width: 100%; + height: auto; + display: block; +} +a { + color: inherit; + text-decoration: none; +} +.btn { + display: inline-block; + padding: 12px 24px; + border-radius: 12px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + color: #ffffff; + text-decoration: none; + font-weight: 600; + font-size: 0.95rem; + transition: all 200ms ease; + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); +} +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); +} +.btn:focus, .btn:active { + transform: translateY(0); + outline: none; +} +.btn-secondary { + background: rgba(102, 126, 234, 0.15); + border: 2px solid rgba(102, 126, 234, 0.3); + box-shadow: none; +} +.btn-secondary:hover { + background: rgba(102, 126, 234, 0.25); + border-color: rgba(102, 126, 234, 0.5); +} +.section { + padding: 48px 0; +} +.section-title { + margin: 0 0 16px 0; + font-size: 1.75rem; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +/* CSS:BASE-END */ + +/* CSS:HERO-START */ +.site-header { + position: sticky; + top: 0; + z-index: 30; + backdrop-filter: blur(12px); + background: rgba(10, 14, 26, 0.85); + border-bottom: 1px solid rgba(102, 126, 234, 0.1); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); +} +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 16px 0; +} +.site-logo { + font-weight: 700; + letter-spacing: 0.5px; + font-size: 1.1rem; + background: linear-gradient(135deg, #667eea 0%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.nav-list { + display: flex; + gap: 8px; + align-items: center; +} +.nav-link { + padding: 8px 14px; + border-radius: 8px; + font-size: 0.95rem; + color: #d4dce8; + opacity: 0.9; + transition: all 180ms ease; +} +.nav-link:hover, .nav-link:focus { + background: rgba(102, 126, 234, 0.15); + color: #f093fb; + opacity: 1; + outline: none; +} + +.section-hero { + padding: 80px 0 64px 0; + background: linear-gradient(180deg, rgba(102, 126, 234, 0.05) 0%, rgba(10, 14, 26, 0.8) 100%); + position: relative; + overflow: hidden; +} +.section-hero::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%); + pointer-events: none; +} +.hero-inner { + display: grid; + grid-template-columns: 1fr; + gap: 32px; + align-items: center; + position: relative; +} +.hero-title { + margin: 0 0 16px 0; + font-size: 2rem; + line-height: 1.15; + color: #ffffff; + letter-spacing: -0.5px; + font-weight: 800; +} +.hero-subtitle { + font-size: 1.25rem; + color: #a8b5d1; + margin: 0 0 12px 0; + font-weight: 500; +} +.hero-lead { + margin: 0 0 24px 0; + color: #b8c5db; + font-size: 1.05rem; + line-height: 1.7; +} +.hero-cta { + display: flex; + gap: 14px; + flex-wrap: wrap; +} +.hero-figure { + border-radius: 16px; + overflow: hidden; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1)); + border: 1px solid rgba(102, 126, 234, 0.2); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + max-width: 560px; + margin-left: auto; +} +.hero-figure img { + width: 100%; + height: auto; +} +/* CSS:HERO-END */ + +/* CSS:ABOUT-START */ +.section-about { + padding-top: 64px; + padding-bottom: 64px; + background: rgba(15, 20, 35, 0.4); +} +.about-grid { + display: grid; + grid-template-columns: 1fr; + gap: 32px; + align-items: start; +} +.about-text { + order: 1; +} +.about-text p { + margin: 0 0 18px 0; + color: #c5d2e8; + line-height: 1.8; + font-size: 1.05rem; +} +.about-highlights { + margin: 28px 0 32px 0; + padding: 0; + list-style: none; +} +.about-highlights li { + margin-bottom: 16px; + padding-left: 32px; + position: relative; + color: #d4e1f4; + line-height: 1.7; +} +.about-highlights li::before { + content: "✦"; + position: absolute; + left: 0; + color: #667eea; + font-size: 1.2rem; + top: 2px; +} +.about-cta { + display: flex; + gap: 14px; + flex-wrap: wrap; + margin-top: 28px; +} +.profile-photo { + border-radius: 16px; + overflow: hidden; + max-width: 480px; + order: 2; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1)); + border: 1px solid rgba(102, 126, 234, 0.2); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); +} +.profile-photo img { + width: 100%; + height: auto; +} +/* CSS:ABOUT-END */ + +/* CSS:SKILLS-START */ +.section-skills { + padding-top: 64px; + padding-bottom: 64px; +} +.skills-intro { + margin: 0 0 32px 0; + color: #b8c5db; + font-size: 1.05rem; + max-width: 700px; +} +.skill-categories { + display: grid; + grid-template-columns: 1fr; + gap: 28px; +} +.skill-category { + background: rgba(102, 126, 234, 0.05); + border: 1px solid rgba(102, 126, 234, 0.15); + border-radius: 16px; + padding: 24px; +} +.skill-category-title { + margin: 0 0 16px 0; + font-size: 1.15rem; + color: #f093fb; + font-weight: 600; +} +.skill-list { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.skill-pill { + padding: 10px 18px; + border-radius: 999px; + background: rgba(102, 126, 234, 0.12); + border: 1px solid rgba(102, 126, 234, 0.25); + font-size: 0.95rem; + color: #dce4f5; + transition: all 180ms ease; +} +.skill-pill:hover { + background: rgba(102, 126, 234, 0.2); + border-color: rgba(102, 126, 234, 0.4); + transform: translateY(-2px); +} +/* CSS:SKILLS-END */ + +/* CSS:PROJECTS-START */ +.section-projects { + padding-top: 64px; + padding-bottom: 64px; + background: rgba(15, 20, 35, 0.4); +} +.projects-intro { + margin: 0 0 32px 0; + color: #b8c5db; + font-size: 1.05rem; + max-width: 700px; +} +.projects-grid { + display: grid; + grid-template-columns: 1fr; + gap: 24px; +} +.project-card { + padding: 28px; + border-radius: 16px; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(240, 147, 251, 0.05)); + border: 1px solid rgba(102, 126, 234, 0.2); + transition: all 250ms ease; +} +.project-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px rgba(102, 126, 234, 0.25); + border-color: rgba(102, 126, 234, 0.4); +} +.project-image { + border-radius: 12px; + overflow: hidden; + margin-bottom: 20px; + border: 1px solid rgba(102, 126, 234, 0.15); +} +.project-image img { + width: 100%; + height: auto; +} +.project-title { + margin: 0 0 12px 0; + font-weight: 700; + font-size: 1.3rem; + color: #ffffff; +} +.project-desc { + margin: 0 0 16px 0; + color: #b8c5db; + line-height: 1.7; +} +.project-tags { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.project-tag { + padding: 6px 12px; + border-radius: 6px; + background: rgba(102, 126, 234, 0.15); + color: #c5d2e8; + font-size: 0.85rem; +} +/* CSS:PROJECTS-END */ + +/* CSS:CONTACT-START */ +.section-contact { + padding-top: 64px; + padding-bottom: 80px; +} +.contact-intro { + margin: 0 0 32px 0; + color: #b8c5db; + font-size: 1.15rem; + max-width: 600px; +} +.contact-grid { + display: grid; + grid-template-columns: 1fr; + gap: 32px; + max-width: 800px; +} +.contact-methods { + display: flex; + flex-direction: column; + gap: 16px; +} +.contact-item { + display: flex; + gap: 16px; + align-items: center; + padding: 16px; + border-radius: 12px; + background: rgba(102, 126, 234, 0.05); + border: 1px solid rgba(102, 126, 234, 0.15); + transition: all 180ms ease; +} +.contact-item:hover { + background: rgba(102, 126, 234, 0.1); + border-color: rgba(102, 126, 234, 0.3); + transform: translateX(4px); +} +.contact-icon { + font-size: 1.5rem; + min-width: 28px; +} +.contact-info { + flex: 1; +} +.contact-label { + font-weight: 600; + color: #f093fb; + font-size: 0.9rem; + margin-bottom: 4px; +} +.contact-link { + color: #d4e1f4; + font-size: 1.05rem; + transition: color 180ms ease; +} +.contact-link:hover { + color: #667eea; +} +.social-links { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 20px; +} +.social-link { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + border-radius: 10px; + background: rgba(102, 126, 234, 0.1); + border: 1px solid rgba(102, 126, 234, 0.2); + color: #d4e1f4; + transition: all 180ms ease; +} +.social-link:hover { + background: rgba(102, 126, 234, 0.2); + border-color: rgba(102, 126, 234, 0.4); + transform: translateY(-2px); +} +/* CSS:CONTACT-END */ + +/* CSS:RWD-START */ +@media (min-width: 640px) { + .hero-title { + font-size: 2.5rem; + } + .hero-inner { + grid-template-columns: 1fr 1fr; + gap: 40px; + } + .hero-figure { + margin: 0; + } + .projects-grid { + grid-template-columns: 1fr 1fr; + gap: 28px; + } +} +@media (min-width: 768px) { + .container { + padding: 0 28px; + } + .about-grid { + grid-template-columns: 1fr 400px; + gap: 40px; + } + .about-text { + order: 1; + } + .profile-photo { + order: 2; + } + .nav-list { + gap: 12px; + } + .skill-categories { + grid-template-columns: 1fr 1fr; + gap: 24px; + } + .contact-grid { + grid-template-columns: 1fr 1fr; + } +} +@media (min-width: 1100px) { + .container { + max-width: 1180px; + } + .hero-title { + font-size: 3rem; + } + .section-title { + font-size: 2rem; + } +} +/* CSS:RWD-END */ \ No newline at end of file From 2e96e646f33f4f79394e3badacba75d5e38f190a Mon Sep 17 00:00:00 2001 From: HOLISNOW Date: Sat, 6 Dec 2025 16:09:21 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20=E6=B0=B4=E5=B9=B3?= =?UTF-8?q?=E6=8D=B2=E5=8B=95=20=E8=B7=9F=20Description?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- styles.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 57 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index b243727..cf33f21 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ 林小美 · UI/UX 設計師 — 作品集 - + diff --git a/styles.css b/styles.css index 832effb..c9d8881 100644 --- a/styles.css +++ b/styles.css @@ -15,6 +15,7 @@ body { -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; min-width: 0; + overflow-x: hidden; } .page { display: flex; @@ -53,7 +54,8 @@ a { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } -.btn:focus, .btn:active { +.btn:focus, +.btn:active { transform: translateY(0); outline: none; } @@ -118,8 +120,10 @@ a { color: #d4dce8; opacity: 0.9; transition: all 180ms ease; + white-space: nowrap; } -.nav-link:hover, .nav-link:focus { +.nav-link:hover, +.nav-link:focus { background: rgba(102, 126, 234, 0.15); color: #f093fb; opacity: 1; @@ -128,7 +132,11 @@ a { .section-hero { padding: 80px 0 64px 0; - background: linear-gradient(180deg, rgba(102, 126, 234, 0.05) 0%, rgba(10, 14, 26, 0.8) 100%); + background: linear-gradient( + 180deg, + rgba(102, 126, 234, 0.05) 0%, + rgba(10, 14, 26, 0.8) 100% + ); position: relative; overflow: hidden; } @@ -139,7 +147,11 @@ a { left: 0; right: 0; bottom: 0; - background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%); + background: radial-gradient( + circle at 20% 50%, + rgba(102, 126, 234, 0.1) 0%, + transparent 50% + ); pointer-events: none; } .hero-inner { @@ -177,7 +189,11 @@ a { .hero-figure { border-radius: 16px; overflow: hidden; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1)); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.1), + rgba(240, 147, 251, 0.1) + ); border: 1px solid rgba(102, 126, 234, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); max-width: 560px; @@ -241,7 +257,11 @@ a { overflow: hidden; max-width: 480px; order: 2; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1)); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.1), + rgba(240, 147, 251, 0.1) + ); border: 1px solid rgba(102, 126, 234, 0.2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } @@ -320,7 +340,11 @@ a { .project-card { padding: 28px; border-radius: 16px; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(240, 147, 251, 0.05)); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.08), + rgba(240, 147, 251, 0.05) + ); border: 1px solid rgba(102, 126, 234, 0.2); transition: all 250ms ease; } @@ -499,4 +523,28 @@ a { font-size: 2rem; } } -/* CSS:RWD-END */ \ No newline at end of file +/* CSS:RWD-END */ + +/* 320px 防水平捲動調整 */ +@media (max-width: 480px) { + .nav { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .nav-list { + flex-wrap: wrap; + justify-content: flex-start; + row-gap: 4px; + } + + .nav-link { + padding: 6px 10px; + font-size: 0.85rem; + } + + .container { + padding: 0 16px; + } +} \ No newline at end of file