diff --git a/index.html b/index.html
index 6a09c3c..a03045b 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +1,440 @@
-<!DOCTYPE html>
-<html lang="zh-Hant">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    html, body { margin: 0; padding: 0; max-width: 100%; }
-    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", Arial, sans-serif; line-height: 1.6; }
-    img { max-width: 100%; height: auto; display: block; }
-    .container { width: 1920px; margin: 0 auto; padding: 16px; }
-    nav a { margin-right: 12px; text-decoration: none; }
-    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
-    .col-12 { grid-column: span 12; }
-    @media (min-width: 768px) { .col-md-6 { grid-column: span 6; } }
-    .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
-  </style>
-</head>
-<body>
-  <header class="container" role="banner">
-    <nav aria-label="主選單">
-      <a href="#about">關於我</a>
-      <a href="#projects">作品集</a>
-      <a href="https://example.com/blog">技術部落格</a>
-      <a href="mailto:me@example.com">聯絡我</a>
-    </nav>
-    <h1>你好，我是小明：前端工程師新手之路</h1>
-    <h1>你好，我是小明：前端工程師新手之路</h1>
-    <p>歡迎來到我的個人網站！這裡整理了學習紀錄、Side Project 與實作心得。</p>
-  </header>
-
-  <footer class="container" role="contentinfo">
-    <p>© 2025 My Portfolio · <a href="#">GitHub</a></p>
-    <img src="https://source.unsplash.com/600x200/?technology,abstract" alt="">
+<!DOCTYPE html> 
+<html lang="zh-Hant"> 
+  <head>
+    <meta charset="UTF-8" /> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
+    <title>Your Name · Frontend Dev — 個人品牌網站</title> 
+    <meta name="description" content="個人品牌網站：介紹個人背景、技能、作品集與聯絡方式。此網站為前端開發者的專業展示頁，提供作品預覽、技能說明與聯絡方式。適合用於履歷連結與職涯投遞用途。" /> 
+    <style> /* CSS:BASE-START */ 
+      :root{ --bg:#031328; /* 深藍作為背景色 */ 
+        --surface:#0b2236; /* 稍淺的面板色 */ 
+        --accent:#2ea6d6; /* 主色（青藍） */ 
+        --muted:#9aa9b6; /* 淺灰文字 */ 
+        --text:#e6eef3; /* 主要文字色 */ 
+        --glass: rgba(255,255,255,0.04); --max-width:1100px; }
+      *,*::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", "Microsoft JhengHei", "PingFang TC", sans-serif;
+          background: linear-gradient(180deg,var(--bg), #021726 120%);
+          color:var(--text);
+          line-height:1.6;
+          -webkit-font-smoothing:antialiased;
+          -moz-osx-font-smoothing:grayscale;
+          font-size:16px;
+        }
+
+        .page{
+          min-height:100vh;
+          display:flex;
+          flex-direction:column;
+        }
+
+        .container{
+          width:100%;
+          max-width:var(--max-width);
+          padding:0 16px;
+          margin:0 auto;
+        }
+
+        img{max-width:100%;height:auto;display:block;border-radius:8px;}
+        a{color:var(--accent);text-decoration:none;}
+        a:hover{text-decoration:underline;}
+        .visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
+        /* CSS:BASE-END */
+
+        /* CSS:HERO-START */
+        .site-header{
+          position:sticky;
+          top:0;
+          z-index:50;
+          background: linear-gradient(180deg, rgba(2,6,23,0.8), rgba(2,6,23,0.6));
+          backdrop-filter: blur(6px);
+          border-bottom:1px solid rgba(255,255,255,0.03);
+        }
+
+        .nav{
+          display:flex;
+          align-items:center;
+          justify-content:space-between;
+          gap:16px;
+          padding:12px 0;
+        }
+
+        .logo{
+          font-weight:600;
+          letter-spacing:0.4px;
+          color:var(--text);
+        }
+
+        .nav-links{
+          display:flex;
+          gap:12px;
+          align-items:center;
+        }
+
+        .nav-link{
+          padding:8px 10px;
+          border-radius:8px;
+          color:var(--muted);
+          font-size:15px;
+          transition:all 160ms ease;
+        }
+
+        .nav-link:hover{
+          color:var(--text);
+          background:var(--glass);
+          transform:translateY(-1px);
+        }
+
+        .section{
+          padding:48px 0;
+        }
+
+        .section-hero{
+          padding-top:28px;
+          padding-bottom:60px;
+        }
+
+        .hero-inner{
+          display:grid;
+          gap:20px;
+          align-items:center;
+        }
+
+        .hero-content{
+          max-width:720px;
+        }
+
+        .hero-eyebrow{
+          display:inline-block;
+          font-size:13px;
+          color:var(--muted);
+          margin-bottom:8px;
+        }
+
+        .hero-title{
+          margin:0 0 14px 0;
+          font-size:28px;
+          line-height:1.1;
+          color:var(--text);
+        }
+
+        .hero-lead{
+          margin:0 0 18px 0;
+          color:var(--muted);
+          font-size:15px;
+        }
+
+        .hero-cta{
+          display:flex;
+          gap:12px;
+          flex-wrap:wrap;
+        }
+
+        .btn{
+          display:inline-block;
+          padding:10px 14px;
+          border-radius:10px;
+          background:var(--accent);
+          color:#02222b;
+          font-weight:600;
+          text-decoration:none;
+        }
+
+        .hero-figure{
+          width:100%;
+          max-width:520px;
+          justify-self:center;
+          align-self:center;
+        }
+
+        .note-dev{
+          margin-top:14px;
+          font-size:13px;
+          color:var(--muted);
+          background:rgba(255,255,255,0.02);
+          padding:10px;
+          border-radius:8px;
+        }
+        /* CSS:HERO-END */
+
+        /* CSS:ABOUT-START */
+        .section-title{
+          margin:0 0 12px 0;
+          font-size:20px;
+          color:var(--text);
+        }
+
+        .card{
+          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);
+          padding:16px;
+          border-radius:10px;
+        }
+
+        .about-grid{
+          display:block;
+          gap:16px;
+        }
+
+        .about-figure{
+          margin-top:12px;
+        }
+
+        /* CSS:ABOUT-END */
+
+        /* CSS:SKILLS-START */
+        .skill-list{
+          display:flex;
+          gap:8px;
+          flex-wrap:wrap;
+          margin-top:12px;
+        }
+
+        .skill-pill{
+          padding:8px 10px;
+          border-radius:999px;
+          background:rgba(255,255,255,0.03);
+          color:var(--muted);
+          font-size:14px;
+        }
+        /* CSS:SKILLS-END */
+
+        /* CSS:PROJECTS-START */
+        .projects-grid{
+          display:grid;
+          gap:14px;
+        }
+
+        .project-card{
+          padding:12px;
+          border-radius:8px;
+          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);
+        }
+
+        .project-media{
+          height:160px;
+          overflow:hidden;
+          border-radius:8px;
+          margin-bottom:10px;
+        }
+
+        .project-title{
+          margin:0 0 6px 0;
+          font-size:16px;
+          color:var(--text);
+        }
+
+        .project-desc{
+          margin:0;
+          color:var(--muted);
+          font-size:14px;
+        }
+        /* CSS:PROJECTS-END */
+
+        /* CSS:CONTACT-START */
+        .contact-list{
+          display:flex;
+          flex-direction:column;
+          gap:8px;
+          margin-top:12px;
+        }
+
+        .contact-item{
+          display:flex;
+          gap:10px;
+          align-items:center;
+          color:var(--muted);
+          font-size:15px;
+        }
+        /* CSS:CONTACT-END */
+
+        /* CSS:RWD-START */
+        @media (min-width: 520px){
+          .hero-inner{
+            grid-template-columns:1fr;
+          }
+          .hero-title{font-size:32px;}
+        }
+
+        @media (min-width: 768px){
+          .hero-inner{
+            grid-template-columns: 1fr 420px;
+            align-items:center;
+          }
+
+          .about-grid{
+            display:grid;
+            grid-template-columns: 1fr 320px;
+            align-items:start;
+          }
+
+          .projects-grid{
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
+
+        @media (min-width: 1200px){
+          .hero-title{font-size:40px;}
+          .projects-grid{
+            grid-template-columns: repeat(3, 1fr);
+          }
+        }
+        /* CSS:RWD-END */
+    </style> 
+</head> 
+<body> 
+  <div class="page"> 
+    <header class="site-header"> 
+      <div class="container nav" role="navigation" aria-label="主導覽列"> 
+        <div class="logo" aria-hidden="false">Your Name · Frontend Dev</div>
+        <nav class="nav-links" aria-label="頁面區塊連結"> 
+          <a class="nav-link" href="#hero">首頁</a> <a class="nav-link" href="#about">關於我</a> <a class="nav-link" href="#skills">技能</a> <a class="nav-link" href="#projects">作品集</a> <a class="nav-link" href="#contact">聯絡我</a>
+        </nav> 
+      </div> 
+    </header>
+    <main>
+    <!-- SECTION:HERO-START -->
+    <section id="hero" class="section section-hero" aria-labelledby="hero-heading">
+      <div class="container hero-inner">
+        <div class="hero-content">
+          <p class="hero-eyebrow">個人品牌 / 前端工程師</p>
+          <h1 id="hero-heading" class="hero-title">建立可讀性與可擴充的前端體驗</h1>
+          <p class="hero-lead">這裡是個人品牌網站的主視覺區。未來會放一段一句話自我介紹、主要職稱（例如 Frontend Developer）與行動呼籲（瀏覽作品集、下載履歷）。</p>
+
+          <div class="hero-cta">
+            <a class="btn" href="#projects">查看作品集</a>
+            <a class="btn" href="mailto:hello@example.com">寄信給我</a>
+          </div>
+
+          <div class="note-dev">
+            之後會用 Section SDD 的 Prompt 產生正式文案與版面，再把整個 section 貼回來取代這一區。請把新的 section 程式碼整段貼在 <!-- SECTION:HERO-START --> 與 <!-- SECTION:HERO-END --> 註解之間，完全取代現在這一區。
+          </div>
+        </div>
+
+        <div class="hero-figure" aria-hidden="false">
+          <img src="https://images.unsplash.com/photo-1580894908361-967195033215?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="在筆電前撰寫程式碼的前端開發者" loading="lazy" />
+        </div>
+      </div>
+    </section>
+    <!-- SECTION:HERO-END -->
+
+    <!-- SECTION:ABOUT-START -->
+    <section id="about" class="section section-about" aria-labelledby="about-heading">
+      <div class="container">
+        <h2 id="about-heading" class="section-title">關於我（之後會用 Section SDD 替換）</h2>
+        <div class="card about-grid">
+          <div>
+            <p>這裡目前是 About 區的占位內容，說明會包含個人背景、專長與工作經驗摘要。未來會用 Section SDD 產生更完整的內容。</p>
+            <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 <!-- SECTION:ABOUT-START --> 與 <!-- SECTION:ABOUT-END --> 註解之間，完全取代現在這一區。</p>
+          </div>
+          <div class="about-figure">
+            <img src="https://images.unsplash.com/photo-1629904869392-ae2a682d4d01?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="桌面上的筆電與筆記本，工作辦公桌景象" loading="lazy" />
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION:ABOUT-END -->
+
+    <!-- SECTION:SKILLS-START -->
+    <section id="skills" class="section section-skills" aria-labelledby="skills-heading">
+      <div class="container">
+        <h2 id="skills-heading" class="section-title">技能（之後會用 Section SDD 替換）</h2>
+        <p>這裡目前是 Skills 區的占位內容，預計會列出程式語言、框架、工具鏈與專長等。</p>
+        <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 <!-- SECTION:SKILLS-START --> 與 <!-- SECTION:SKILLS-END --> 註解之間，完全取代現在這一區。</p>
+
+        <div class="skill-list" aria-hidden="false">
+          <span class="skill-pill">HTML</span>
+          <span class="skill-pill">CSS</span>
+          <span class="skill-pill">Vue.js</span>
+          <span class="skill-pill">React</span>
+          <span class="skill-pill">Accessibility</span>
+          <span class="skill-pill">RWD</span>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION:SKILLS-END -->
+
+    <!-- SECTION:PROJECTS-START -->
+    <section id="projects" class="section section-projects" aria-labelledby="projects-heading">
+      <div class="container">
+        <h2 id="projects-heading" class="section-title">作品集（之後會用 Section SDD 替換）</h2>
+        <p>這裡目前是 Projects 區的占位內容，未來會以卡片或專案清單方式呈現作品概覽。</p>
+        <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 <!-- SECTION:PROJECTS-START --> 與 <!-- SECTION:PROJECTS-END --> 註解之間，完全取代現在這一區。</p>
+
+        <div class="projects-grid" role="list">
+          <article class="project-card" role="listitem">
+            <div class="project-media">
+              <img src="https://source.unsplash.com/600x400/?website,code" alt="專案示意圖：程式碼與網頁設計畫面" loading="lazy" />
+            </div>
+            <h3 class="project-title">範例專案 A</h3>
+            <p class="project-desc">此為占位的專案描述，會簡短說明專案目的與技術要點。</p>
+          </article>
+
+          <article class="project-card" role="listitem">
+            <div class="project-media">
+              <img src="https://source.unsplash.com/600x400/?app,interface" alt="專案示意圖：應用介面畫面" loading="lazy" />
+            </div>
+            <h3 class="project-title">範例專案 B</h3>
+            <p class="project-desc">此為占位的專案描述，會簡短說明專案目的與技術要點。</p>
+          </article>
+
+          <article class="project-card" role="listitem">
+            <div class="project-media">
+              <img src="https://source.unsplash.com/600x400/?dashboard,data" alt="專案示意圖：儀表板與數據視覺化" loading="lazy" />
+            </div>
+            <h3 class="project-title">範例專案 C</h3>
+            <p class="project-desc">此為占位的專案描述，會簡短說明專案目的與技術要點。</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION:PROJECTS-END -->
+
+    <!-- SECTION:CONTACT-START -->
+    <section id="contact" class="section section-contact" aria-labelledby="contact-heading">
+      <div class="container">
+        <h2 id="contact-heading" class="section-title">聯絡我（之後會用 Section SDD 替換）</h2>
+        <p>這裡目前是 Contact 區的占位內容，會提供 Email、電話、GitHub、LinkedIn 等聯絡方式或表單連結。</p>
+        <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 <!-- SECTION:CONTACT-START --> 與 <!-- SECTION:CONTACT-END --> 註解之間，完全取代現在這一區。</p>
+
+        <div class="contact-list">
+          <div class="contact-item card">
+            <strong>電子郵件：</strong>
+            <a href="mailto:hello@example.com">hello@example.com</a>
+          </div>
+
+          <div class="contact-item card">
+            <strong>電話：</strong>
+            <a href="tel:+886900000000">+886 900 000 000</a>
+          </div>
+
+          <div class="contact-item card">
+            <strong>GitHub：</strong>
+            <a href="https://github.com/yourname" target="_blank" rel="noopener">github.com/yourname</a>
+          </div>
+
+          <div class="contact-item card">
+            <strong>LinkedIn：</strong>
+            <a href="https://www.linkedin.com/in/yourname" target="_blank" rel="noopener">linkedin.com/in/yourname</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION:CONTACT-END -->
+  </main>
+
+  <footer class="section" role="contentinfo">
+    <div class="container">
+      <div class="card" style="display:flex;justify-content:space-between;align-items:center;gap:12px;">
+        <div style="font-size:14px;color:var(--muted)">© <span aria-hidden="true">2025</span> Your Name · Frontend Dev</div>
+        <div style="font-size:13px;color:var(--muted)">此為骨架階段，所有內容為占位文字，CSS 插槽請參見 &lt;head&gt; 內的註解區塊。</div>
+      </div>
+    </div>
   </footer>
-</body>
+</div> 
+</body> 
 </html>
\ No newline at end of file
