From cf13128ee041e37903e749897c55eb92435df563 Mon Sep 17 00:00:00 2001 From: chong Date: Sun, 29 Mar 2026 23:02:44 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E8=AA=BF=E6=95=B4HTML=20=E7=B5=90=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 332 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 302 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 6a09c3c..f0c04be 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,309 @@ - - - + + + Leon · Frontend Dev | 前端開發者個人品牌網站 + + + - - - + +
+
+
+ +
+
+ +
+
+
+
+

建立卓越的網頁體驗

+

+ 這裡目前是 Hero 區的占位內容。未來會放上一句吸引人的自我介紹、核心職稱（例如：Junior Frontend Engineer）以及引導按鈕。 +

+ 瀏覽我的作品 +
+

💡 開發者提示： 之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把新的 section 程式碼整段貼在兩個註解中間，完全取代現在這一區。

+
+
+
+
+
+
+

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

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

這裡目前是 About 區的占位內容，未來會介紹我的技術熱情與學習背景。

+

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

+
+
+
+
+
+

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

+
+

這裡未來會展示我的技術棧（例如：React, Vite, CSS Frameworks）。

+

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

+
+
+
+
+
+

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

+
+ 展示於螢幕上的網頁設計作品 +

這裡未來會展示 My-Shelter 或電商專案等開發成果。

+

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

+
+
+
+
+
+

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

+
+

準備好開始合作了嗎？請透過以下連結找到我。

+
+ 寄信給我 + GitHub + 電話聯繫 +
+

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

+
+
+
+
+ +
+
+

© 2026 Leon · Frontend Dev. 內政與開發中。保留所有權利。

+
+
+
+ \ No newline at end of file From 1fbb7aeb51f2fae4c48dab74d0d010bc434a527c Mon Sep 17 00:00:00 2001 From: chong Date: Sun, 29 Mar 2026 23:10:42 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=AA=BF=E6=95=B4HTML=20=E7=B5=90=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index f0c04be..a20f211 100644 --- a/index.html +++ b/index.html @@ -173,7 +173,6 @@ .section-projects { background-color: rgba(255, 255, 255, 0.02); } - /* CSS:PROJECTS-END */ /* CSS:CONTACT-START */ .section-contact { From d7da1cd4c3b740e4e6b79130a0e0c122cb91b117 Mon Sep 17 00:00:00 2001 From: chong Date: Sun, 29 Mar 2026 23:16:11 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E8=AA=BF=E6=95=B4HTML=20=E7=B5=90=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 138 ++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 110 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index a20f211..7eb253d 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ * { box-sizing: border-box; -webkit-font-smoothing: antialiased; + max-width: 100%; } body { @@ -31,6 +32,7 @@ color: var(--text-main); line-height: 1.6; overflow-x: hidden; + width: 100%; } .page { @@ -61,16 +63,6 @@ font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; - text-align: center; - } - - .placeholder-text { - color: var(--text-muted); - background: rgba(255, 255, 255, 0.05); - padding: 20px; - border-radius: 8px; - border: 1px dashed var(--text-muted); - text-align: center; } /* 導覽列 */ @@ -87,7 +79,9 @@ display: flex; justify-content: space-between; align-items: center; - height: 70px; + flex-wrap: wrap; + padding: 10px 0; + min-height: 70px; } .logo { @@ -99,7 +93,7 @@ .nav-list { display: flex; - gap: 20px; + gap: 15px; list-style: none; margin: 0; padding: 0; @@ -110,6 +104,7 @@ text-decoration: none; font-size: 0.9rem; transition: color 0.3s; + white-space: nowrap; } .nav-link:hover { @@ -165,14 +160,74 @@ .section-about { background-color: rgba(255, 255, 255, 0.02); } + + .about-grid { + display: flex; + flex-direction: column; + gap: 40px; + } + + .about-text-content p { + margin-bottom: 1.5rem; + color: var(--text-main); + } + + .about-list { + list-style: none; + padding: 0; + margin: 20px 0 30px; + } + + .about-list-item { + position: relative; + padding-left: 25px; + margin-bottom: 10px; + color: var(--text-muted); + } + + .about-list-item::before { + content: "▹"; + position: absolute; + left: 0; + color: var(--primary-color); + font-weight: bold; + } + + .about-btn-group { + display: flex; + gap: 15px; + flex-wrap: wrap; + } + + .btn-outline { + display: inline-block; + padding: 10px 24px; + border: 1px solid var(--primary-color); + color: var(--primary-color); + text-decoration: none; + border-radius: 4px; + transition: all 0.3s; + } + + .btn-outline:hover { + background-color: rgba(0, 209, 255, 0.1); + } + + .about-image-box img { + width: 100%; + height: 400px; + object-fit: cover; + box-shadow: 20px 20px 0px rgba(0, 209, 255, 0.1); + } /* CSS:ABOUT-END */ /* CSS:SKILLS-START */ - + /* CSS:PROJECTS-START */ .section-projects { background-color: rgba(255, 255, 255, 0.02); } + /* CSS:PROJECTS-END */ /* CSS:CONTACT-START */ .section-contact { @@ -193,7 +248,6 @@ /* CSS:CONTACT-END */ /* CSS:RWD-START */ - /* 手機優先設計，以下為大螢幕優化 */ @media (min-width: 768px) { :root { --section-padding: 100px 20px; @@ -210,6 +264,20 @@ .nav-link { font-size: 1rem; } + + /* About 區塊雙欄切換 */ + .about-grid { + flex-direction: row; + align-items: center; + } + + .about-text-content { + flex: 1.2; + } + + .about-image-box { + flex: 0.8; + } } @media (min-width: 1440px) { @@ -243,29 +311,45 @@

建立卓越的網頁體驗

- 這裡目前是 Hero 區的占位內容。未來會放上一句吸引人的自我介紹、核心職稱（例如：Junior Frontend Engineer）以及引導按鈕。 + 專注於打造直觀、高效且美觀的前端介面。我是 Leon，一名熱愛轉化創意為程式碼的開發者。

瀏覽我的作品 -
-

💡 開發者提示： 之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把新的 section 程式碼整段貼在兩個註解中間，完全取代現在這一區。

-
-

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

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

這裡目前是 About 區的占位內容，未來會介紹我的技術熱情與學習背景。

-

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

+
+
+

關於我

+

+ 你好！我是 Leon。目前專注於前端開發、技術教學與專案接案。我擅長利用 React 與 Vite 構建現代化的 Web 應用程式，並持續探索更優雅的介面解決方案。 +

+

+ 我熱衷於解決問題，並深信軟體開發的核心在於「人的連接」。我的做事風格重視高效溝通與知識共享，喜歡將複雜的技術邏輯轉化為清晰易懂的語言，確保開發過程與最終產出都能完美契合需求。 +

+ +
    +
  • 現代化開發： 熟練運用 ES6+、React 以及 Tailwind CSS 等主流前端工具。
    • +
  • 清晰溝通： 具備將技術語言翻譯成商業邏輯的能力，縮短溝通成本。
    • +
  • 品質至上： 重視程式碼的可讀性與響應式效能，確保全裝置的使用體驗。
    • +
+ +
+ 查看作品集 + 聯絡我 +
+
+
+ 正在筆電前專注開發網頁的前端工程師 +

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

-
+

這裡未來會展示我的技術棧（例如：React, Vite, CSS Frameworks）。

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

@@ -274,8 +358,7 @@

專業技能（之後會用 Sectio

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

-
- 展示於螢幕上的網頁設計作品 +

這裡未來會展示 My-Shelter 或電商專案等開發成果。

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

@@ -284,14 +367,13 @@

作品集（之後會用 Section

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

-
+

準備好開始合作了嗎？請透過以下連結找到我。

寄信給我 GitHub 電話聯繫
-

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

From edd0e754c38cf2a0a70938c37be0609bf244f98b Mon Sep 17 00:00:00 2001 From: chong Date: Sun, 29 Mar 2026 23:43:32 +0800 Subject: [PATCH 4/4] feat: achieve 100/100 on website check --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 7eb253d..549ce92 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ +