Skip to content

Task2作業提交 #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
josephkim6260 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Task2作業提交 #20

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bad698
調整html結構
josephkim6260 Nov 16, 2025
a7eca42
調整作品集文字
josephkim6260 Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
291 changes: 264 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,273 @@
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Name · Frontend Dev｜個人品牌網站</title>
<meta name="description" content="這是前端工程師的個人品牌網站，用來介紹背景與專長、展示技能與作品集，並提供清楚的聯絡方式。內容為骨架占位，後續將以 Section SDD 產生正式文案與版面。"/>

<style>
/* CSS:BASE-START */
/* ——全站共用設定（禁止使用 #id 選擇器）—— */
html, body {
margin: 0;
padding: 0;
background-color: #0f172a; /* 深藍灰（dark theme） */
color: #e5e7eb; /* 淺灰文字 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *::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); }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: #60a5fa; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(148,163,184,0.2); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { font-weight: 700; letter-spacing: .3px; color: #93c5fd; }
.nav-list { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; }
.nav-link { padding: 6px 8px; border-radius: 6px; color: #e5e7eb; }
.nav-link:hover { background: rgba(148,163,184,0.15); }
main { flex: 1; }
.section { padding: 56px 0; border-bottom: 1px solid rgba(148,163,184,0.15); }
.section:last-of-type { border-bottom: none; }
.section-title { font-size: 1.375rem; margin: 0 0 16px; color: #c7d2fe; }
.muted { color: #94a3b8; }
.lead { font-size: 1.1rem; color: #e2e8f0; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 10px;
background: #0ea5e9; color: #0b1020; font-weight: 700; border: 1px solid rgba(255,255,255,0.08);
}
.btn.secondary { background: transparent; color: #93c5fd; border-color: rgba(148,163,184,0.35); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 6px 10px; border-radius: 999px; background: rgba(148,163,184,.15); color: #cfe2ff; font-size: .9rem; }
.card {
background: linear-gradient(to bottom right, rgba(30,41,59,.45), rgba(2,6,23,.35));
border: 1px solid rgba(148,163,184,.2);
border-radius: 14px; overflow: hidden;
}
.card-body { padding: 14px; }
.subtle { color: #9fb6d3; }
.kicker { font-size: .9rem; letter-spacing: .12em; color: #7dd3fc; text-transform: uppercase; }
.footer { padding: 28px 0; color: #94a3b8; font-size: .95rem; border-top: 1px solid rgba(148,163,184,0.15); }
/* CSS:BASE-END */

/* CSS:HERO-START */
.section-hero { padding-top: 72px; }
.hero-wrap { display: grid; gap: 20px; }
.hero-title { font-size: 2rem; margin: 0 0 10px; color: #bfdbfe; }
.hero-text { margin: 8px 0; }
.hero-media {
border-radius: 16px; overflow: hidden;
border: 1px solid rgba(148,163,184,.25);
box-shadow: 0 10px 24px rgba(2,6,23,.5);
}
/* CSS:HERO-END */

/* CSS:ABOUT-START */
.section-about .about-text { margin-bottom: 16px; }
/* CSS:ABOUT-END */

/* CSS:SKILLS-START */
.skill-list { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.skill-item { background: rgba(148,163,184,.12); padding: 12px; border-radius: 10px; }
/* CSS:SKILLS-END */

/* CSS:PROJECTS-START */
.project-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.project-card img { aspect-ratio: 16 / 9; object-fit: cover; }
.project-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* CSS:PROJECTS-END */

/* CSS:CONTACT-START */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-item { display: flex; align-items: center; gap: 10px; }
/* CSS:CONTACT-END */

/* CSS:RWD-START */
@media (min-width: 768px) {
.hero-title { font-size: 2.4rem; }
.grid-2 { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.project-grid { grid-template-columns: 1fr 1fr; }
.skill-list { grid-template-columns: repeat(3, 1fr); }
}
@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" role="banner">
<div class="container nav" aria-label="主導覽">
<div class="brand" aria-label="網站名稱">Your Name · Frontend Dev</div>
<nav>
<ul class="nav-list">
<li><a class="nav-link" href="#hero">首頁</a></li>
<li><a class="nav-link" href="#about">關於我</a></li>
<li><a class="nav-link" href="#skills">技能</a></li>
<li><a class="nav-link" href="#projects">作品集</a></li>
<li><a class="nav-link" href="#contact">聯絡我</a></li>
</ul>
</nav>
</div>
</header>

<main role="main">
<!-- SECTION:HERO-START -->
<section id="hero" class="section section-hero" aria-labelledby="hero-heading">
<div class="container hero-wrap">
<div>
<p class="kicker">個人網站主視覺區</p>
<h1 id="hero-heading" class="hero-title">這裡是網站的 Hero 區（全站唯一 h1）</h1>
<p class="hero-text lead">此區是占位內容：未來將放入一句話自我介紹、核心職稱（例如 Frontend Developer / UI 工程師），並搭配明顯的行動呼籲按鈕（例如「瀏覽作品集」或「下載履歷」）。</p>
<p class="hero-text muted">開發者提示：之後會用 <strong>Section SDD</strong> 的 Prompt 產生正式文案與版面，請將新的 <code>&lt;section id="hero"&gt;…&lt;/section&gt;</code> 程式碼整段貼在 <em>SECTION:HERO-START / SECTION:HERO-END</em> 註解之間，完全取代現在這一區。</p>
<div class="btn-row">
<a class="btn" href="#projects">作品集</a>
<a class="btn secondary" href="mailto:hello@example.com">下載履歷（寄信索取）</a>
</div>
</div>

<div class="hero-media">
<img
src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?q=80&w=1600&auto=format&fit=crop"
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>
<p class="about-text">這裡目前是 About 區的占位內容。未來會以 Section SDD 產生正式的個人簡介、履歷重點與價值主張。</p>
<p class="muted">請將新的 <code>&lt;section id="about"&gt;…&lt;/section&gt;</code> 程式碼整段貼在 <em>SECTION:ABOUT-START / SECTION:ABOUT-END</em> 註解之間，完全取代現在這一區。</p>
<div class="grid grid-2" style="margin-top:16px;">
<div class="card">
<img
src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1600&auto=format&fit=crop"
alt="工作桌與筆電的情境照"
loading="lazy"
/>
</div>
<div class="card">
<div class="card-body">
<p class="subtle">可在此處展示一段更長的自我敘述、職涯里程碑或專業興趣，後續將用正式內容覆蓋。</p>
<div class="chips" aria-label="關鍵字">
<span class="chip">前端工程</span>
<span class="chip">RWD</span>
<span class="chip">可用性</span>
<span class="chip">效能優化</span>
</div>
</div>
</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 class="muted">請把新的 <code>&lt;section id="skills"&gt;…&lt;/section&gt;</code> 程式碼整段貼在 <em>SECTION:SKILLS-START / SECTION:SKILLS-END</em> 之間。</p>

<div class="skill-list" style="margin-top:12px;">
<div class="skill-item">語義化 HTML、無障礙（a11y）基礎</div>
<div class="skill-item">CSS 架構、Mobile-first RWD</div>
<div class="skill-item">版面切版、元件化思維</div>
<div class="skill-item">設計稿轉前端畫面</div>
<div class="skill-item">效能與可維護性</div>
<div class="skill-item">團隊協作、文件撰寫</div>
</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 class="muted">請把新的 <code>&lt;section id="projects"&gt;…&lt;/section&gt;</code> 程式碼整段貼在 <em>SECTION:PROJECTS-START / SECTION:PROJECTS-END</em> 之間。</p>

<div class="project-grid" style="margin-top:16px;">
<article class="card project-card">
<img
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1600&auto=format&fit=crop"
alt="程式碼與開發環境的螢幕畫面"
loading="lazy"
/>
<div class="card-body">
<div class="project-meta">
<div>
<strong>占位作品 A</strong>
<div class="subtle">RWD / 表單與版面切版</div>
</div>
<div class="btn-row">
<a class="btn secondary" href="https://github.com/yourname/project-a" rel="noopener" target="_blank">GitHub</a>
</div>
</div>
</div>
</article>

<article class="card project-card">
<img
src="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop"
alt="行動裝置上展示網站介面的照片"
loading="lazy"
/>
<div class="card-body">
<div class="project-meta">
<div>
<strong>占位作品 B</strong>
<div class="subtle">Landing Page / 像素對齊</div>
</div>
<div class="btn-row">
<a class="btn secondary" href="https://github.com/yourname/project-b" rel="noopener" target="_blank">GitHub</a>
</div>
</div>
</div>
</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 區的占位內容。未來會放表單或社群連結，提供清楚的聯繫方式。</p>
<p class="muted">請把新的 <code>&lt;section id="contact"&gt;…&lt;/section&gt;</code> 程式碼整段貼在 <em>SECTION:CONTACT-START / SECTION:CONTACT-END</em> 之間。</p>

<ul class="contact-list" style="margin-top:12px;">
<li class="contact-item">Email：<a href="mailto:hello@example.com">hello@example.com</a></li>
<li class="contact-item">電話：<a href="tel:+886900000000">+886 900 000 000</a></li>
<li class="contact-item">GitHub：<a href="https://github.com/yourname" target="_blank" rel="noopener">github.com/yourname</a></li>
<li class="contact-item">LinkedIn：<a href="https://www.linkedin.com/in/yourname" target="_blank" rel="noopener">linkedin.com/in/yourname</a></li>
</ul>
</div>
</section>
<!-- SECTION:CONTACT-END -->
</main>

<footer class="footer" role="contentinfo">
<div class="container">
<div>© <span class="muted">Your Name · Frontend Dev</span> — 本頁為 Phase 1 骨架占位，後續將以 Section SDD 逐區替換。</div>
</div>
</footer>
</div>
</body>
</html>
</html>