diff --git a/index.html b/index.html
index 6a09c3c..549ce92 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +1,391 @@
 <!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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leon · Frontend Dev | 前端開發者個人品牌網站</title>
+    <meta name="description" content="這是前端工程師 Leon 的個人品牌網站。本站展示了我的專業前端開發技術、精選作品集以及個人成長經歷。歡迎在此了解我的技術棧並透過提供的聯絡方式與我取得聯繫。">
+    
+    <style>
+        /* CSS:BASE-START */
+        /* 全站基底樣式：處理重置與共用設定 */
+        :root {
+            --primary-color: #00d1ff; /* 青色系主色 */
+            --bg-color: #0f172a;      /* 深藍底色 */
+            --text-main: #f8fafc;     /* 淺色文字 */
+            --text-muted: #94a3b8;    /* 次要文字 */
+            --nav-bg: rgba(15, 23, 42, 0.9);
+            --section-padding: 60px 20px;
+            --container-width: 100%;
+        }
+
+        * {
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+            max-width: 100%;
+        }
+
+        body {
+            margin: 0;
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            line-height: 1.6;
+            overflow-x: hidden;
+            width: 100%;
+        }
+
+        .page {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            border-radius: 8px;
+        }
+
+        .section {
+            padding: var(--section-padding);
+        }
+
+        .section-title {
+            font-size: 2rem;
+            color: var(--primary-color);
+            margin-bottom: 20px;
+        }
+
+        /* 導覽列 */
+        .site-header {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            background-color: var(--nav-bg);
+            backdrop-filter: blur(8px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            padding: 10px 0;
+            min-height: 70px;
+        }
+
+        .logo {
+            font-size: 1.25rem;
+            font-weight: bold;
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        .nav-list {
+            display: flex;
+            gap: 15px;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .nav-link {
+            color: var(--text-main);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s;
+            white-space: nowrap;
+        }
+
+        .nav-link:hover {
+            color: var(--primary-color);
+        }
+
+        footer {
+            padding: 40px 20px;
+            text-align: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-muted);
+        }
+        /* CSS:BASE-END */
+
+        /* CSS:HERO-START */
+        .section-hero {
+            min-height: 80vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            background: linear-gradient(180deg, rgba(0,209,255,0.05) 0%, rgba(15,23,42,1) 100%);
+        }
+
+        .hero-content h1 {
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+        }
+
+        .hero-description {
+            font-size: 1.1rem;
+            max-width: 600px;
+            margin: 0 auto 30px;
+        }
+
+        .btn-cta {
+            display: inline-block;
+            padding: 12px 30px;
+            background-color: var(--primary-color);
+            color: var(--bg-color);
+            text-decoration: none;
+            font-weight: bold;
+            border-radius: 5px;
+            transition: transform 0.2s;
+        }
+
+        .btn-cta:hover {
+            transform: translateY(-3px);
+        }
+        /* CSS:HERO-END */
+
+        /* CSS:ABOUT-START */
+        .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 {
+            text-align: center;
+        }
+        .contact-links {
+            margin-top: 20px;
+        }
+        .contact-item {
+            display: inline-block;
+            margin: 10px;
+            color: var(--primary-color);
+            text-decoration: none;
+            border: 1px solid var(--primary-color);
+            padding: 8px 20px;
+            border-radius: 20px;
+        }
+        /* CSS:CONTACT-END */
+
+        /* CSS:RWD-START */
+        @media (min-width: 768px) {
+            :root {
+                --section-padding: 100px 20px;
+            }
+
+            .hero-content h1 {
+                font-size: 4rem;
+            }
+
+            .nav-list {
+                gap: 40px;
+            }
+
+            .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) {
+            .container {
+                max-width: 1200px;
+            }
+        }
+        /* CSS:RWD-END */
+    </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="">
-  </footer>
+
+    <div class="page">
+        <header class="site-header">
+            <div class="container">
+                <nav class="nav">
+                    <a href="#hero" class="logo">Leon · Frontend Dev</a>
+                    <ul class="nav-list">
+                        <li><a href="#about" class="nav-link">關於我</a></li>
+                        <li><a href="#skills" class="nav-link">技能</a></li>
+                        <li><a href="#projects" class="nav-link">作品集</a></li>
+                        <li><a href="#contact" class="nav-link">聯絡我</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <section id="hero" class="section section-hero">
+                <div class="container">
+                    <div class="hero-content">
+                        <h1>建立卓越的網頁體驗</h1>
+                        <p class="hero-description">
+                            專注於打造直觀、高效且美觀的前端介面。我是 Leon，一名熱愛轉化創意為程式碼的開發者。
+                        </p>
+                        <a href="#projects" class="btn-cta">瀏覽我的作品</a>
+                    </div>
+                </div>
+            </section>
+            <section id="about" class="section section-about" aria-labelledby="about-heading">
+                <div class="container">
+                    <div class="about-grid">
+                        <div class="about-text-content">
+                            <h2 id="about-heading" class="section-title">關於我</h2>
+                            <p>
+                                你好！我是 Leon。目前專注於前端開發、技術教學與專案接案。我擅長利用 React 與 Vite 構建現代化的 Web 應用程式，並持續探索更優雅的介面解決方案。
+                            </p>
+                            <p>
+                                我熱衷於解決問題，並深信軟體開發的核心在於「人的連接」。我的做事風格重視高效溝通與知識共享，喜歡將複雜的技術邏輯轉化為清晰易懂的語言，確保開發過程與最終產出都能完美契合需求。
+                            </p>
+                            
+                            <ul class="about-list">
+                                <li class="about-list-item"><strong>現代化開發：</strong> 熟練運用 ES6+、React 以及 Tailwind CSS 等主流前端工具。</li>
+                                <li class="about-list-item"><strong>清晰溝通：</strong> 具備將技術語言翻譯成商業邏輯的能力，縮短溝通成本。</li>
+                                <li class="about-list-item"><strong>品質至上：</strong> 重視程式碼的可讀性與響應式效能，確保全裝置的使用體驗。</li>
+                            </ul>
+
+                            <div class="about-btn-group">
+                                <a href="#projects" class="btn-outline">查看作品集</a>
+                                <a href="#contact" class="btn-cta">聯絡我</a>
+                            </div>
+                        </div>
+                        <div class="about-image-box">
+                            <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&w=1000&q=80" alt="正在筆電前專注開發網頁的前端工程師" loading="lazy">
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section id="skills" class="section section-skills" aria-labelledby="skills-heading">
+                <div class="container">
+                    <h2 id="skills-heading" class="section-title">專業技能（之後會用 Section SDD 替換）</h2>
+                    <div style="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;">
+                        <p>這裡未來會展示我的技術棧（例如：React, Vite, CSS Frameworks）。</p>
+                        <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。</p>
+                    </div>
+                </div>
+            </section>
+            <section id="projects" class="section section-projects" aria-labelledby="projects-heading">
+                <div class="container">
+                    <h2 id="projects-heading" class="section-title">作品集（之後會用 Section SDD 替換）</h2>
+                    <div style="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;">
+                        <p>這裡未來會展示 My-Shelter 或電商專案等開發成果。</p>
+                        <p>之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在這兩個註解中間，完全取代現在這一區。</p>
+                    </div>
+                </div>
+            </section>
+            <section id="contact" class="section section-contact" aria-labelledby="contact-heading">
+                <div class="container">
+                    <h2 id="contact-heading" class="section-title">聯絡我（之後會用 Section SDD 替換）</h2>
+                    <div style="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;">
+                        <p>準備好開始合作了嗎？請透過以下連結找到我。</p>
+                        <div class="contact-links">
+                            <a href="mailto:hello@example.com" class="contact-item">寄信給我</a>
+                            <a href="https://github.com/yourname" target="_blank" rel="noopener" class="contact-item">GitHub</a>
+                            <a href="tel:+886900000000" class="contact-item">電話聯繫</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            </main>
+
+        <footer>
+            <div class="container">
+                <p>&copy; 2026 Leon · Frontend Dev. 內政與開發中。保留所有權利。</p>
+            </div>
+        </footer>
+    </div>
+
 </body>
 </html>
\ No newline at end of file
