From ecf4a82c0bd53dd8775e1335e0c5c55360bac51d Mon Sep 17 00:00:00 2001 From: jennypan102 Date: Sat, 22 Nov 2025 16:57:27 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E8=AA=BF=E6=95=B4HTML=E5=85=A7=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 385 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 350 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 6a09c3c..1a24954 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,352 @@ - - - - - - - - - - - + Your Name · Frontend Dev — 個人品牌網站
+
+ +
+
+

個人品牌網站骨架 — Frontend Developer

+

歡迎來到我的個人網站骨架。此檔為 Phase 1，已預留區塊插槽與 CSS 插槽，方便日後逐區替換為正式內容。

+

職稱：Frontend Developer ／ 行動呼籲：瀏覽作品集或下載履歷（後續會加上實際連結）。

+ +

+ 開發者提示：之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把整個新的 <section id="hero" …> 區段整段貼回來，完全取代這一區。 +

+ +
+ 瀏覽作品集 + 聯絡我 +
+
+ +
+
+ 在筆電前專注工作的前端開發者 +
+
+
+ + + +
+
+

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

+

這裡目前是 About 區的占位內容，會放置個人簡介、工作經驗摘要與職涯目標等資訊。

+

開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。

+
+
+ + + +
+
+

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

+

這裡目前是 Skills 區的占位內容，將列出前端技術、工具與擅長領域。

+
+ HTML + CSS + Responsive + Accessibility + Design Systems +
+ +

+ 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 +

+
+
+ + + +
+
+

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

+

這裡目前是 Projects 區的占位內容，會展示卡片式作品預覽與簡短描述。

+ +
+
+

專案範例 A

+

占位說明：專案 A 的簡短摘要（之後會被完整 project card 取代）。

+
+ +
+

專案範例 B

+

占位說明：專案 B 的簡短摘要（之後會被完整 project card 取代）。

+
+
+ +

+ 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 +

+
+
+ + + +
+
+

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

+

這裡目前是 Contact 區的占位內容，會放上聯絡表單、Email、電話、與社群連結等資訊。

+ +
+ Email: hello@example.com + 電話: +886 900 000 000 + GitHub + LinkedIn +
+ +

+ 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 +

+
+
+ + +
+ + +
\ No newline at end of file From 3bd0f2e9c6aa49e44595ec1cbfac529642f9caa4 Mon Sep 17 00:00:00 2001 From: jennypan102 Date: Sat, 22 Nov 2025 17:22:17 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E8=A7=A3=E6=9E=90?= =?UTF-8?q?=E5=BA=A6=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 436 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 264 insertions(+), 172 deletions(-) diff --git a/index.html b/index.html index 1a24954..da3cc17 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,20 @@ - Your Name · Frontend Dev — 個人品牌網站
-
+
+
-
-

個人品牌網站骨架 — Frontend Developer

-

歡迎來到我的個人網站骨架。此檔為 Phase 1，已預留區塊插槽與 CSS 插槽，方便日後逐區替換為正式內容。

-

職稱：Frontend Developer ／ 行動呼籲：瀏覽作品集或下載履歷（後續會加上實際連結）。

- -

- 開發者提示：之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把整個新的 <section id="hero" …> 區段整段貼回來，完全取代這一區。 -

- -
- 瀏覽作品集 - 聯絡我 +
+
+
+

個人品牌 — 前端工程師的作品與履歷骨架

+

歡迎來到我的個人網站範本。此為 Phase 1 骨架，包含主要區塊插槽與 CSS 插槽，方便後續以 Section SDD 整段替換內容與版面。

+ +
+ 瀏覽作品集 + 寄信給我 +
+ +
+ 佔位說明：之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把新的 <section> 程式碼整段貼回來，取代此一區（即替換 SECTION:HERO-START 與 SECTION:HERO-END 之間的整段內容）。 +
+
+ +
+ 在筆電前撰寫程式碼的前端開發者 +
示意圖：在筆電前撰寫程式碼的前端開發者（Unsplash 圖片）
+
- -
-
- 在筆電前專注工作的前端開發者 -
-
-

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

-

這裡目前是 About 區的占位內容，會放置個人簡介、工作經驗摘要與職涯目標等資訊。

-

開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。

+
+
+

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

+

這裡目前是 About 區的占位內容，用以說明個人背景與工作經歷摘要。之後會用 Section SDD 產生更完整的內容，並貼回來覆蓋此區。

+

提示：請把新的 section 程式碼整段貼回，完全取代這兩個註解之間的內容。

+ +
+ 職稱：Frontend Developer + 所在地：台灣 +
+
+ +
+
+ 桌上有筆電與筆記本的工作桌面 +
示意形象照（Unsplash）
+
+
+
@@ -274,18 +366,16 @@

關於我（之後會用 Section SD

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

-

這裡目前是 Skills 區的占位內容，將列出前端技術、工具與擅長領域。

+

這裡目前是 Skills 區的占位內容，列出常見技能標籤與熟練度示意。之後會用 Section SDD 產生更完整的內容，並貼回來覆蓋此區。

+
- HTML - CSS - Responsive - Accessibility - Design Systems + HTML + CSS + RWD + Accessibility + Design Systems + Git
- -

- 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 -

@@ -294,23 +384,19 @@

技能（之後會用 Section SDD

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

-

這裡目前是 Projects 區的占位內容，會展示卡片式作品預覽與簡短描述。

+

這裡目前是 Projects 區的占位內容。示意多個 Project Card，未來會替換為實際作品說明、連結與預覽畫面。

-
+
-

專案範例 A

-

占位說明：專案 A 的簡短摘要（之後會被完整 project card 取代）。

+

Project A — 範例專案

+

靜態骨架示意，後續替換為實際專案連結與描述。

-

專案範例 B

-

占位說明：專案 B 的簡短摘要（之後會被完整 project card 取代）。

+

Project B — 範例專案

+

靜態骨架示意，後續替換為實際專案連結與描述。

- -

- 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 -

@@ -319,34 +405,40 @@

專案範例 B

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

-

這裡目前是 Contact 區的占位內容，會放上聯絡表單、Email、電話、與社群連結等資訊。

- -
- Email: hello@example.com - 電話: +886 900 000 000 - GitHub - LinkedIn +

這裡目前是 Contact 區的占位內容。之後會用 Section SDD 產生正式表單或聯絡資訊，請把新的 section 程式碼整段貼回來覆蓋此區。

+ +
+
+ Email： + hello@example.com +
+ +
+ 電話： + +886 900 000 000 +
+ +
+ GitHub： + github.com/yourname +
+ +
+ LinkedIn： + linkedin.com/in/yourname +
- -

- 開發者提示：之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 與 之間，完全取代現在這一區。 -

-
-