From 1ae156be6712329ea2e74328c2e3822abd96f6ca Mon Sep 17 00:00:00 2001 From: Jodi Date: Sun, 23 Nov 2025 21:12:01 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E8=AE=8A=E6=9B=B4html=E6=9E=B6=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1084 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 1047 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 6a09c3c..19f38d0 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,1047 @@ - - - - - - - - - - - - - \ No newline at end of file + 前端工程師個人品牌網站 | Nova Lin · Frontend Dev + + +
Nova Lin · Frontend Dev
+
+
+
+
+ +
+
+
+
+
+ + 個人網站 Hero 區占位 +
+

+ 這裡是你的前端工程師個人網站主視覺區 +

+

+ 這一區目前是 Hero 區的占位內容。未來將放上「一句話自我介紹」、核心職稱（例如 Frontend Developer / UI Engineer）、以及引導訪客瀏覽作品集或下載履歷的行動呼籲按鈕。 +

+

+ 開發者之後可以透過「Section SDD」的 Prompt，重新產生完整的 Hero 版面配置（標題、副標、按鈕、排版與圖片等），再把新的 + 整個 <section id="hero"> 區塊 貼回來，直接取代目前這一區。 +

+ +
+ 瀏覽作品集占位區 + 查看關於我占位區 +
+ +

+ 給開發者的插槽說明： + 之後會用 Section SDD 的 Prompt 產生新的 Hero section，請將產出的 + 整個 <section id="hero"> ... </section> + 程式碼，完整貼在 + 「<!-- SECTION:HERO-START -->」與 + 「<!-- SECTION:HERO-END -->」兩個註解之間，完全取代現在這一區。 +

+
+ +
+
+ 在筆電前撰寫程式碼的前端開發者示意照片 +
+ + + 即將放入真實個人風格的主視覺設計 + + 目前為 Unsplash 示意圖，可於之後替換 +
+
+ Hero 影像與文案皆為占位內容，將在 Section SDD 階段以新設計覆蓋。 +
+
+
+
+
+
+ + + +
+
+

+ About · 關於我（占位內容） +

+
+
+

+ 這裡目前是 About 區的占位內容，用來暫時說明：未來會介紹開發者的背景、轉職或學習歷程、前端技術興趣與個人價值觀等資訊，讓訪客理解你是什麼樣的前端工程師。 +

+

+ 在之後的 Phase「Section SDD」中，你可以針對 About 區撰寫更完整的需求（例如想呈現的故事線、時間軸、照片配置），由 Prompt 產生新的 section 程式碼，包含排版與文案。 +

+

+ 給開發者的插槽說明： + 之後會用 Section SDD 的 Prompt 產生新的 About section，請將產出的 + 整個 <section id="about"> ... </section> + 程式碼，完整貼在 + 「<!-- SECTION:ABOUT-START -->」與 + 「<!-- SECTION:ABOUT-END -->」兩個註解中間，完全取代現在這一區。 +

+

+ 提示：你也可以在新版本中加入更多排版，例如左右圖文、時間軸或重點標籤，只要保持 section id 與錨點一致即可。 +

+
+
+
+
+ + + +
+
+

+ Skills · 技能（占位內容） +

+
+
+

+ 這裡目前是 Skills 區的占位內容。未來會列出你熟悉的前端技術（例如 HTML、CSS、JavaScript、React、RWD、無障礙設計等），搭配等級或使用情境說明，讓訪客快速理解你的專長版圖。 +

+

+ 下方的清單只是示意排版，實際技能與說明會在 Section SDD 階段重新產生，並完全覆蓋這一區的程式碼。 +

+
+ +
+
    +
  • +
    + 前端基礎技術（範例占位） + HTML / CSS / RWD 結構與樣式規劃 +
    + 之後由 Section SDD 替換 +
    • +
  • +
    + 現代前端框架（範例占位） + React 或其他框架的元件化開發示意 +
    + 可改為真實技能 +
    • +
  • +
    + 版面與使用者體驗（範例占位） + 針對作品集或產品頁的設計考量說明 +
    + 內容將後續更新 +
    • +
  • +
    + 團隊協作與開發流程（範例占位） + Git、Code Review、設計交握等流程描述 +
    + 待正式文案 +
    • +
+

+ 給開發者的插槽說明： + 之後會用 Section SDD 的 Prompt 產生新的 Skills section，請將產出的 + 整個 <section id="skills"> ... </section> + 程式碼整段貼在 + 「<!-- SECTION:SKILLS-START -->」與 + 「<!-- SECTION:SKILLS-END -->」兩個註解之間，完全取代現在這一區。 +

+
+
+
+
+ + + +
+
+

+ Projects · 作品集（占位內容） +

+

+ 這裡目前是 Projects 區的占位內容。未來會放上你真正的 Side Project、學習作品或商業專案，包含專案名稱、簡短描述、負責內容與實際連結（例如 GitHub、Demo 網站）等。 +

+ +
+
+
+ 具有程式碼與設計感介面的虛構前端作品示意圖 +
+

作品卡片占位範例 A

+

+ 這是一張示意用的作品卡片，未來會由 Section SDD 產生的新 Projects 區塊完全取代， + 包含專案標題、簡介、技術標籤與實際連結等內容。 +

+
+ 範例標籤 · Frontend + 占位 · RWD Layout +
+
+ 此卡片僅為排版與視覺參考 + 之後可改為真實專案 +
+
+ + ↗ + GitHub 占位連結 + + + ↗ + Demo 網站占位 + +
+
+ +
+

作品卡片占位範例 B

+

+ 你可以在 Section SDD 階段指定要展示幾個專案、每個專案的結構與欄位，讓新的 section 程式碼產出後，一次替換掉目前整個 Projects 區塊。 +

+

+ 此卡片用來示意：可以加入不同類型的作品，例如 Landing Page、UI Prototype、互動式元件實驗等。 +

+
+ 占位 · UI Prototype + 占位 · Animation +
+
+ 給開發者的插槽說明： + 之後會用 Section SDD 的 Prompt 產生新的 Projects section，請將產出的 + 整個 <section id="projects"> ... </section> + 程式碼整段貼在 + 「<!-- SECTION:PROJECTS-START -->」與 + 「<!-- SECTION:PROJECTS-END -->」兩個註解中間，完全取代現在這一區。 +
+
+
+
+
+ + + +
+
+

+ Contact · 聯絡我（占位內容） +

+
+
+

+ 這裡目前是 Contact 區的占位內容。未來會放上你希望公開的聯絡方式，例如 Email、LinkedIn、GitHub、X（Twitter）或其他社群平台，協助潛在合作方或招聘方與你取得聯繫。 +

+

+ 下方的聯絡資訊都是示意用的 placeholder，實際資料請在 Section SDD 產出新 section 後，一併更新為你希望公開的內容。 +

+

+ 給開發者的插槽說明： + 之後會用 Section SDD 的 Prompt 產生新的 Contact section，請將產出的 + 整個 <section id="contact"> ... </section> + 程式碼整段貼在 + 「<!-- SECTION:CONTACT-START -->」與 + 「<!-- SECTION:CONTACT-END -->」兩個註解中間，完全取代現在這一區。 +

+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+
© 2025 Nova Lin · Frontend Dev. 保留所有權利。
+
+ 這份 index.html 目前為骨架與占位版本，之後可透過 Section SDD 與 CSS Slot 逐區調整與覆蓋。 +
+
+ +
+
+
From 0dfcfeba0fd014ad173da433e7db00743f40809a Mon Sep 17 00:00:00 2001 From: Jodi Date: Sun, 23 Nov 2025 21:25:53 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9html=E6=9E=B6=E6=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 19f38d0..97dd32d 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,9 @@ - 前端工程師個人品牌網站 | Nova Lin · Frontend Dev - - -
Nova Lin · Frontend Dev
-
-
-
-
- -
-
-
-
-
- - 個人網站 Hero 區占位 -
-

- 這裡是你的前端工程師個人網站主視覺區 -

-

- 這一區目前是 Hero 區的占位內容。未來將放上「一句話自我介紹」、核心職稱（例如 Frontend Developer / UI Engineer）、以及引導訪客瀏覽作品集或下載履歷的行動呼籲按鈕。 -

-

- 開發者之後可以透過「Section SDD」的 Prompt，重新產生完整的 Hero 版面配置（標題、副標、按鈕、排版與圖片等），再把新的 - 整個 <section id="hero"> 區塊 貼回來，直接取代目前這一區。 -

- -
- 瀏覽作品集占位區 - 查看關於我占位區 -
- -

- 給開發者的插槽說明： - 之後會用 Section SDD 的 Prompt 產生新的 Hero section，請將產出的 - 整個 <section id="hero"> ... </section> - 程式碼，完整貼在 - 「<!-- SECTION:HERO-START -->」與 - 「<!-- SECTION:HERO-END -->」兩個註解之間，完全取代現在這一區。 -

-
- -
-
- 在筆電前撰寫程式碼的前端開發者示意照片 -
- - - 即將放入真實個人風格的主視覺設計 - - 目前為 Unsplash 示意圖，可於之後替換 -
-
- Hero 影像與文案皆為占位內容，將在 Section SDD 階段以新設計覆蓋。 -
-
-
-
-
-
- - - -
-
-

- About · 關於我（占位內容） -

-
-
-

- 這裡目前是 About 區的占位內容，用來暫時說明：未來會介紹開發者的背景、轉職或學習歷程、前端技術興趣與個人價值觀等資訊，讓訪客理解你是什麼樣的前端工程師。 -

-

- 在之後的 Phase「Section SDD」中，你可以針對 About 區撰寫更完整的需求（例如想呈現的故事線、時間軸、照片配置），由 Prompt 產生新的 section 程式碼，包含排版與文案。 -

-

- 給開發者的插槽說明： - 之後會用 Section SDD 的 Prompt 產生新的 About section，請將產出的 - 整個 <section id="about"> ... </section> - 程式碼，完整貼在 - 「<!-- SECTION:ABOUT-START -->」與 - 「<!-- SECTION:ABOUT-END -->」兩個註解中間，完全取代現在這一區。 -

-

- 提示：你也可以在新版本中加入更多排版，例如左右圖文、時間軸或重點標籤，只要保持 section id 與錨點一致即可。 -

+ + + + + Jodi Chen｜共生照顧建築師 + + + + + +
+
+ + +
+ + +
+
+
共生照顧建築師
+

在高齡與照顧現場，設計可以好好生活的生態系

+
Jodi｜服務設計 × 長期照顧 × 社區共生
+

+ 創照服務設計股份有限公司設計長，從企業行銷、社會設計到長期照顧實務，專注打造「共生之家 × 數位協作 × 人才培育」的整合照顧生態系。 +

+
+ #共生照顧 + #長期照顧設計 + #Connect10 + #照顧人才培育 + #社區共生
+ + ✉️ + 想和 Jodi 合作 +
-
-
- - - -
-
-

- Skills · 技能（占位內容） -

-
-
-

- 這裡目前是 Skills 區的占位內容。未來會列出你熟悉的前端技術（例如 HTML、CSS、JavaScript、React、RWD、無障礙設計等），搭配等級或使用情境說明，讓訪客快速理解你的專長版圖。 -

-

- 下方的清單只是示意排版，實際技能與說明會在 Section SDD 階段重新產生，並完全覆蓋這一區的程式碼。 -

+
+
+
現在的工作位置
+
創照服務設計股份有限公司 設計長
+
在服務設計和照顧現場之間搭橋
- -
-
    -
  • -
    - 前端基礎技術（範例占位） - HTML / CSS / RWD 結構與樣式規劃 -
    - 之後由 Section SDD 替換 -
    • -
  • -
    - 現代前端框架（範例占位） - React 或其他框架的元件化開發示意 -
    - 可改為真實技能 -
    • -
  • -
    - 版面與使用者體驗（範例占位） - 針對作品集或產品頁的設計考量說明 -
    - 內容將後續更新 -
    • -
  • -
    - 團隊協作與開發流程（範例占位） - Git、Code Review、設計交握等流程描述 -
    - 待正式文案 -
    • +
    +
    關鍵實作軸線
    +
      +
    • Connect 10 跨專業協作平台
      • +
    • AIO 共生之家與社區生態系
      • +
    • 照顧學校與照顧人才培育
    -

    - 給開發者的插槽說明： - 之後會用 Section SDD 的 Prompt 產生新的 Skills section，請將產出的 - 整個 <section id="skills"> ... </section> - 程式碼整段貼在 - 「<!-- SECTION:SKILLS-START -->」與 - 「<!-- SECTION:SKILLS-END -->」兩個註解之間，完全取代現在這一區。 -

-
-
- + - -
-
-

- Projects · 作品集（占位內容） -

-

- 這裡目前是 Projects 區的占位內容。未來會放上你真正的 Side Project、學習作品或商業專案，包含專案名稱、簡短描述、負責內容與實際連結（例如 GitHub、Demo 網站）等。 + +

+

關於 Jodi｜在照顧現場長出來的服務設計師

+

+ 從企業到社會創新，再走進長照與社區共生，Jodi 用服務設計的方法，陪現場一邊整理問題、一邊長出新的生態系。

- -
-
-
- 具有程式碼與設計感介面的虛構前端作品示意圖 -
-

作品卡片占位範例 A

-

- 這是一張示意用的作品卡片，未來會由 Section SDD 產生的新 Projects 區塊完全取代， - 包含專案標題、簡介、技術標籤與實際連結等內容。 -

-
- 範例標籤 · Frontend - 占位 · RWD Layout -
-
- 此卡片僅為排版與視覺參考 - 之後可改為真實專案 -
-
- - ↗ - GitHub 占位連結 - - - ↗ - Demo 網站占位 - -
-
- -
-

作品卡片占位範例 B

-

- 你可以在 Section SDD 階段指定要展示幾個專案、每個專案的結構與欄位，讓新的 section 程式碼產出後，一次替換掉目前整個 Projects 區塊。 -

-

- 此卡片用來示意：可以加入不同類型的作品，例如 Landing Page、UI Prototype、互動式元件實驗等。 -

-
- 占位 · UI Prototype - 占位 · Animation -
-
- 給開發者的插槽說明： - 之後會用 Section SDD 的 Prompt 產生新的 Projects section，請將產出的 - 整個 <section id="projects"> ... </section> - 程式碼整段貼在 - 「<!-- SECTION:PROJECTS-START -->」與 - 「<!-- SECTION:PROJECTS-END -->」兩個註解中間，完全取代現在這一區。 -
-
-
-
-
- - - -
-
-

- Contact · 聯絡我（占位內容） -

-
-
-

- 這裡目前是 Contact 區的占位內容。未來會放上你希望公開的聯絡方式，例如 Email、LinkedIn、GitHub、X（Twitter）或其他社群平台，協助潛在合作方或招聘方與你取得聯繫。 -

-

- 下方的聯絡資訊都是示意用的 placeholder，實際資料請在 Section SDD 產出新 section 後，一併更新為你希望公開的內容。 -

-

- 給開發者的插槽說明： - 之後會用 Section SDD 的 Prompt 產生新的 Contact section，請將產出的 - 整個 <section id="contact"> ... </section> - 程式碼整段貼在 - 「<!-- SECTION:CONTACT-START -->」與 - 「<!-- SECTION:CONTACT-END -->」兩個註解中間，完全取代現在這一區。 -

-
- -
- -
-
-
-
- -
- -
-
-
-
-
© 2025 Nova Lin · Frontend Dev. 保留所有權利。
-
- 這份 index.html 目前為骨架與占位版本，之後可透過 Section SDD 與 CSS Slot 逐區調整與覆蓋。 -
-
-
- 回到頁面頂部 ↑ +
+

+ Jodi 同時站在策略設計與照顧現場之間工作。她曾在國際企業擔任行銷與專案管理，之後投入社會設計與高齡議題，參與不老夢想 125 號、世界設計之都等專案，累積「城市 × 高齡 × 社會創新」的實作經驗。 +

+

+ 近年專注於長期照顧與社區共生，帶領團隊推動 Connect 10 跨專業協作平台、AIO 共生之家模式，以及照顧學校的人才培育計畫，串連政府、醫療、社福與在地社區，嘗試讓照顧者與被照顧者都能在地好好生活。 +

-
-
-
+ From 6b2d32724b02423f4d83943e9213c4da29fad24f Mon Sep 17 00:00:00 2001 From: Jodi Date: Sun, 23 Nov 2025 22:06:37 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E8=AE=8A=E6=9B=B4JO=E5=80=8B=E4=BA=BA?= =?UTF-8?q?=E6=AA=94=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/index.html b/index.html index a0e67b8..508e790 100644 --- a/index.html +++ b/index.html @@ -385,29 +385,4 @@

在高齡與照顧現場，設計可以好好生活的生
創照服務設計股份有限公司 設計長
在服務設計和照顧現場之間搭橋

-
-
關鍵實作軸線
-
    -
  • Connect 10 跨專業協作平台
    • -
  • AIO 共生之家與社區生態系
    • -
  • 照顧學校與照顧人才培育
    • -
-
-
- - - -
-

關於 Jodi｜在照顧現場長出來的服務設計師

-

- 從企業到社會創新，再走進長照與社區共生，Jodi 用服務設計的方法，陪現場一邊整理問題、一邊長出新的生態系。 -

-
-

- Jodi 同時站在策略設計與照顧現場之間工作。她曾在國際企業擔任行銷與專案管理，之後投入社會設計與高齡議題，參與不老夢想 125 號、世界設計之都等專案，累積「城市 × 高齡 × 社會創新」的實作經驗。 -

-

- 近年專注於長期照顧與社區共生，帶領團隊推動 Connect 10 跨專業協作平台、AIO 共生之家模式，以及照顧學校的人才培育計畫，串連政府、醫療、社福與在地社區，嘗試讓照顧者與被照顧者都能在地好好生活。 -

-
-
+
在高齡與照顧現場，設計可以好好生活的生
在服務設計和照顧現場之間搭橋