第 8 章 · 最終章

小專案：個人介紹頁

終於來到最後一章！這一章我們要把前七章學到的所有技術整合起來，打造一個有質感的個人介紹頁面，並部署到 GitHub Pages 讓全世界都能看到。

📌 本章重點

專案結構規劃
完整 HTML 結構（含 nav、hero、about、skills、contact）
完整 CSS 樣式（含響應式設計）
JavaScript 互動功能（平滑滾動、深色模式、回到頂端）
部署到 GitHub Pages

📖 教學說明

專案結構

資料夾結構

my-profile/
├── index.html      ← 主頁面
├── style.css       ← 所有樣式
└── script.js       ← 互動功能

設計規劃

我們的個人介紹頁要包含以下區塊：

Header / Nav：導覽列，有名字 logo 和頁面錨點連結
Hero：大型主視覺區，有名字、一句話介紹和 CTA 按鈕
About：詳細自我介紹
Skills：技能列表（用進度條或標籤呈現）
Contact：聯絡方式
Footer：版權資訊

💻 完整程式碼

index.html

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>你的名字 - 個人介紹</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- 導覽列 -->
  <header id="navbar">
    <div class="nav-inner">
      <a href="#" class="nav-logo">你的名字</a>
      <nav>
        <ul class="nav-links">
          <li><a href="#about">關於我</a></li>
          <li><a href="#skills">技能</a></li>
          <li><a href="#contact">聯絡</a></li>
        </ul>
      </nav>
      <button id="darkToggle" title="切換深色模式">🌙</button>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero">
    <img src="https://picsum.photos/120/120"
         alt="頭像" class="avatar">
    <h1>嗨，我是<span class="highlight">你的名字</span> 👋</h1>
    <p>一個熱愛學習的網頁開發初學者，用 AI 輔助讓學習更有效率。</p>
    <a href="#about" class="btn-hero">認識我 ↓</a>
  </section>

  <!-- 關於我 -->
  <section id="about" class="section">
    <div class="container">
      <h2>關於我</h2>
      <p>我是一個對程式設計充滿熱情的初學者。透過這本 Vibe Coding 教材，
      我學會了 HTML、CSS 和 JavaScript 的基礎，並且開始能夠用 AI 工具加速學習。</p>
      <p>我的目標是成為一名前端開發者，打造對使用者友善的網頁體驗。</p>
    </div>
  </section>

  <!-- 技能 -->
  <section id="skills" class="section section-alt">
    <div class="container">
      <h2>技能</h2>
      <div class="skills-grid">
        <div class="skill-tag">HTML</div>
        <div class="skill-tag">CSS</div>
        <div class="skill-tag">JavaScript</div>
        <div class="skill-tag">Vibe Coding</div>
        <div class="skill-tag">GitHub</div>
        <div class="skill-tag">AI 工具</div>
      </div>
    </div>
  </section>

  <!-- 聯絡 -->
  <section id="contact" class="section">
    <div class="container" style="text-align:center">
      <h2>聯絡我</h2>
      <p>有任何問題或合作邀請，歡迎透過以下方式聯絡：</p>
      <div class="contact-links">
        <a href="mailto:your@email.com" class="contact-btn">📧 Email</a>
        <a href="https://github.com/yourusername"
           target="_blank" rel="noopener" class="contact-btn">🐙 GitHub</a>
      </div>
    </div>
  </section>

  <footer>
    <p>© 2026 你的名字. Made with ❤️ and Vibe Coding</p>
  </footer>

  <!-- 回到頂端按鈕 -->
  <button id="backToTop" title="回到頂端">↑</button>

  <script src="script.js"></script>
</body>
</html>

style.css

CSS

/* 基本重置 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  background: #f8fafc; color: #1e293b; line-height: 1.7;
  transition: background 0.3s, color 0.3s;
}

/* 深色模式 */
body.dark { background: #0f172a; color: #e2e8f0; }
body.dark header { background: #1e293b; border-bottom-color: #334155; }
body.dark .section-alt { background: #1e293b; }
body.dark footer { background: #020617; }

/* 導覽列 */
header {
  position: sticky; top: 0; z-index: 100;
  background: white; border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.nav-inner {
  max-width: 900px; margin: 0 auto; padding: 0 1.5rem;
  height: 60px; display: flex; align-items: center; gap: 1rem;
}
.nav-logo { font-weight: 800; color: #4f46e5; text-decoration: none; font-size: 1.1rem; flex: 1; }
.nav-links { list-style: none; display: flex; gap: 1.5rem; }
.nav-links a { color: inherit; text-decoration: none; font-size: 0.9rem; }
.nav-links a:hover { color: #4f46e5; }
#darkToggle {
  background: none; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 1rem;
}

/* Hero */
.hero {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: white;
}
.avatar {
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid #818cf8; margin-bottom: 1.5rem;
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.highlight { color: #818cf8; }
.hero p { font-size: 1.05rem; color: rgba(255,255,255,0.75); margin-bottom: 1.5rem; }
.btn-hero {
  display: inline-block; background: #4f46e5; color: white;
  padding: 0.7rem 1.8rem; border-radius: 8px;
  text-decoration: none; font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.btn-hero:hover { background: #3730a3; transform: translateY(-2px); text-decoration: none; }

/* 區塊 */
.section { padding: 4rem 1.5rem; }
.section-alt { background: #f1f5f9; }
.container { max-width: 800px; margin: 0 auto; }
.section h2 {
  font-size: 1.8rem; font-weight: 800; margin-bottom: 1.2rem;
  color: #4f46e5;
}
.section p { margin-bottom: 0.8rem; }

/* 技能標籤 */
.skills-grid { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.skill-tag {
  background: #4f46e5; color: white; padding: 0.4rem 1rem;
  border-radius: 999px; font-size: 0.9rem; font-weight: 600;
}

/* 聯絡 */
.contact-links { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.contact-btn {
  display: inline-block; background: #4f46e5; color: white;
  padding: 0.7rem 1.5rem; border-radius: 8px;
  text-decoration: none; font-weight: 600;
  transition: background 0.2s;
}
.contact-btn:hover { background: #3730a3; text-decoration: none; }

/* Footer */
footer {
  background: #1e1b4b; color: rgba(255,255,255,0.6);
  text-align: center; padding: 2rem; font-size: 0.85rem;
}

/* 回到頂端 */
#backToTop {
  position: fixed; bottom: 2rem; right: 2rem;
  background: #4f46e5; color: white; border: none;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 12px rgba(79,70,229,0.4);
}
#backToTop.show { opacity: 1; transform: translateY(0); }

/* 響應式 */
@media (max-width: 600px) {
  .nav-links { display: none; }
  .hero { min-height: 70vh; }
}

script.js

JavaScript

// 深色模式切換
const darkToggle = document.getElementById('darkToggle');
darkToggle.addEventListener('click', function() {
  document.body.classList.toggle('dark');
  darkToggle.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
});

// 回到頂端按鈕
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', function() {
  if (window.scrollY > 300) {
    backToTop.classList.add('show');
  } else {
    backToTop.classList.remove('show');
  }
});
backToTop.addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// 平滑滾動（點擊錨點連結）
document.querySelectorAll('a[href^="#"]').forEach(function(link) {
  link.addEventListener('click', function(e) {
    const target = document.querySelector(link.getAttribute('href'));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

🚀 部署到 GitHub Pages

ℹ️

前置需求

需要有 GitHub 帳號（免費）。前往 github.com 註冊。

步驟

在 GitHub 建立新的 Repository（倉庫），取名例如 my-profile
把你的三個檔案（index.html、style.css、script.js）上傳上去
進入 Repository 的 Settings → Pages
在 Source 選擇 Deploy from a branch
Branch 選 main，資料夾選 / (root)
按 Save，等待約 1~2 分鐘
你的網站會部署在 https://你的帳號.github.io/my-profile/

🎉

完成！

你的個人介紹頁現在可以透過網址讓任何人看到了。把這個連結加到你的 LinkedIn、名片或任何地方！

⚠️ 常見錯誤

✗

GitHub Pages 部署後看到 404

確認主頁面的檔案名稱是 index.html（全小寫），這是 GitHub Pages 的預設進入點。

✗

CSS 或 JS 在 GitHub Pages 上不生效

確認檔案路徑是相對路徑（例如 style.css 而不是 /style.css），且檔案確實已上傳到 GitHub。

✗

專案太複雜，自己改不動

回頭用第 7 章學的提問技巧請 AI 幫你，記得貼上完整的程式碼和描述你想要的結果。

✏️ 小練習

🎯 最終挑戰

挑戰 1

完成整個個人介紹頁，把所有「你的名字」、Email、GitHub 換成你自己的資料，並部署到 GitHub Pages。

挑戰 2

用 AI 幫你在技能區加入「進度條」效果，讓每個技能顯示你的熟練程度（例如 HTML 80%、CSS 70%）。

挑戰 3

加入一個「作品集」區塊，展示你在學習過程中完成的任何一個小專案，並附上連結。

🏆

恭喜你完成了這本書！

你已經從零學會了 HTML、CSS、JavaScript 的基礎，並且掌握了用 AI 輔助開發的技能。這只是開始，繼續保持好奇心，持續學習！