Skip to content

feat: 提交lucky個人網站 #25

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
snotky wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: 提交lucky個人網站 #25

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d9d03b9
第一次提交
snotky Nov 18, 2025
8250e95
測試action
snotky Nov 18, 2025
1619a57
測試AI骨架
snotky Nov 18, 2025
ac4fd50
chatgpt版本
snotky Nov 18, 2025
61eab63
chatgpt版本2
snotky Nov 18, 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
312 changes: 275 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,275 @@
<!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="">
</footer>
</body>
</html>
<!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="個人品牌網站：介紹前端工程師背景、技能與作品集，並提供聯絡方式。此網站為單一檔案骨架 (index.html)，供開發者後續以 Section SDD 替換各區塊內容。"> <style> /* CSS:BASE-START */ /* 全站基底樣式（禁用 ID 選擇器，只使用 class / element） */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; background-color: #071029; /* 深藍背景 */ color: #E6EEF6; /* 淺灰白文字 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; overflow-x: hidden; /* 避免水平捲動 */ } .page { min-height: 100vh; display: flex; flex-direction: column; } header.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(7,16,41,0.9), rgba(7,16,41,0.8)); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.04); box-shadow: 0 2px 8px rgba(2,6,23,0.6); } .nav { max-width: 1100px; margin: 0 auto; padding: 0.6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-logo { font-weight: 600; letter-spacing: 0.2px; color: #D7E9FF; text-decoration: none; } nav.nav-links { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } a.nav-link { color: #A8C8E8; text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.95rem; } a.nav-link:hover, a.nav-link:focus { color: #FFFFFF; background-color: rgba(106,150,200,0.07); outline: none; } main { flex: 1 0 auto; } .container { max-width: 1100px; margin: 0 auto; padding: 1rem; } h1, h2, h3 { margin: 0 0 0.6rem 0; line-height: 1.15; } p { margin: 0 0 1rem 0; color: #CBDCEB; } img { max-width: 100%; height: auto; display: block; border-radius: 8px; } .section { padding: 2.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .section-title { color: #EAF6FF; font-size: 1.25rem; } .muted { color: #9FB6CE; font-size: 0.95rem; } .footer { padding: 1.2rem; text-align: center; font-size: 0.9rem; color: #98AFC6; border-top: 1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(7,16,41,0.0), rgba(7,16,41,0.02)); } .btn { display: inline-block; padding: 0.55rem 0.9rem; border-radius: 8px; text-decoration: none; font-weight: 600; background-color: #0E4A7A; /* 主色（深青藍） */ color: #FFFFFF; } .meta-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: 0.95rem; } /* small helper */ .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 */
.section-hero {
padding-top: 2.6rem;
padding-bottom: 2.6rem;
display: grid;
gap: 1.2rem;
}
.hero-inner {
display: grid;
gap: 1rem;
align-items: center;
}
.hero-row {
display: grid;
gap: 1rem;
}
.hero-title {
font-size: 1.6rem;
color: #F2FBFF;
}
.hero-sub {
color: #CDE6FB;
font-size: 1rem;
max-width: 56ch;
}
.hero-cta {
margin-top: 0.6rem;
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.hero-image {
margin-top: 0.6rem;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
/* CSS:HERO-END */

/* CSS:ABOUT-START */
.section-about {
background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.002));
}
.about-grid {
display: grid;
gap: 1rem;
}
.about-bio {
border-radius: 10px;
padding: 1rem;
background: rgba(255,255,255,0.01);
}
/* CSS:ABOUT-END */

/* CSS:SKILLS-START */
.section-skills {
/* placeholder styling for skills area */
}
.skill-list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.skill-pill {
padding: 0.35rem 0.6rem;
border-radius: 999px;
background: rgba(14,74,122,0.12);
color: #D8EEF9;
font-size: 0.9rem;
}
/* CSS:SKILLS-END */

/* CSS:PROJECTS-START */
.section-projects {
/* placeholder for projects */
}
.projects-grid {
display: grid;
gap: 1rem;
}
.project-card {
padding: 0.9rem;
border-radius: 10px;
background: rgba(255,255,255,0.01);
}
.project-title {
font-weight: 600;
font-size: 1rem;
}
/* CSS:PROJECTS-END */

/* CSS:CONTACT-START */
.section-contact {
/* placeholder for contact */
}
.contact-list {
display: flex;
gap: 0.8rem;
flex-direction: column;
margin-top: 0.6rem;
}
.contact-item a {
color: #CDE6FB;
text-decoration: none;
}
.contact-item a:hover { text-decoration: underline; }
/* CSS:CONTACT-END */

/* CSS:RWD-START */
/* 手機優先；在較大視窗時調整為雙欄或格狀 */
@media (min-width: 540px) {
.hero-title { font-size: 1.8rem; }
.hero-sub { font-size: 1.05rem; }
}

@media (min-width: 768px) {
.hero-inner {
grid-template-columns: 1fr 420px;
align-items: center;
gap: 2rem;
}
.about-grid {
grid-template-columns: 1fr 360px;
gap: 1.5rem;
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.section {
padding: 3rem 0;
}
}

@media (min-width: 1100px) {
.container { padding-left: 2rem; padding-right: 2rem; }
.hero-title { font-size: 2rem; }
}
/* CSS:RWD-END */

</style> </head> <body> <div class="page"> <header class="site-header" role="banner"> <div class="nav"> <a class="site-logo" href="#hero" title="回到頁首">Your Name · Frontend Dev</a> <nav class="nav-links" role="navigation" 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">
<div class="hero-inner">
<div class="hero-row">
<h1 id="hero-heading" class="hero-title">Your Name · Frontend Dev</h1>
<p class="hero-sub">
這裡是個人品牌網站的主視覺區（Hero）。未來會放一句話自我介紹、職稱（例如 Frontend Developer）與主要行動呼籲（瀏覽作品集、下載履歷）。
</p>
<p class="muted">之後會用 Section SDD 的 Prompt 產生正式文案與版面，請把新的 section 程式碼整段貼回來，完全取代這一區。</p>

<div class="hero-cta">
<a class="btn" href="#projects">查看作品集</a>
<a class="btn" href="mailto:hello@example.com">聯絡我（Email）</a>
</div>
</div>

<div class="hero-image" aria-hidden="false">
<img
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80"
alt="在筆電前撰寫程式碼的前端開發者"
loading="lazy">
</div>
</div>
</div>
</section>
<!-- SECTION:HERO-END -->

<!-- SECTION:ABOUT-START -->
<section id="about" class="section section-about" aria-labelledby="about-heading">
<div class="container">
<div class="about-grid">
<div class="about-bio">
<h2 id="about-heading" class="section-title">關於我（之後會用 Section SDD 替換）</h2>
<p>這裡目前是 About 區的占位內容，會簡短說明個人背景、專長領域與職涯重點。</p>
<p class="muted">之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 &lt;!-- SECTION:ABOUT-START --&gt; 與 &lt;!-- SECTION:ABOUT-END --&gt; 這兩個註解中間，完全取代現在這一區。</p>
</div>

<aside class="about-image" aria-hidden="false">
<img
src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=800&q=80"
alt="工作桌上的筆電與筆記本，代表個人專業形象"
loading="lazy">
</aside>
</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">技能（暫留占位）</h2>
<p>這裡目前放技能清單的占位內容（例如 HTML、CSS、RWD、Accessibility、React 等）。</p>
<div class="skill-list" aria-hidden="false">
<span class="skill-pill">HTML</span>
<span class="skill-pill">CSS</span>
<span class="skill-pill">RWD</span>
<span class="skill-pill">Accessibility</span>
<span class="skill-pill">React</span>
<span class="skill-pill">版本控制 Git</span>
</div>
<p class="muted">之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 &lt;!-- SECTION:SKILLS-START --&gt; 與 &lt;!-- SECTION:SKILLS-END --&gt; 這兩個註解中間，完全取代現在這一區。</p>
</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">作品集（占位）</h2>
<p>這裡會顯示主要作品卡片：每個卡片包含縮圖、標題、簡短描述與連結（GitHub / Demo）。目前為占位卡片。</p>

<div class="projects-grid" aria-hidden="false">
<article class="project-card">
<h3 class="project-title">作品 A（占位）</h3>
<p class="muted">短描述：此為占位卡片，日後請以 Section SDD 產生完整作品卡片。</p>
</article>

<article class="project-card">
<h3 class="project-title">作品 B（占位）</h3>
<p class="muted">短描述：此為占位卡片，日後請以 Section SDD 產生完整作品卡片。</p>
</article>
</div>

<p class="muted">之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 &lt;!-- SECTION:PROJECTS-START --&gt; 與 &lt;!-- SECTION:PROJECTS-END --&gt; 這兩個註解中間，完全取代現在這一區。</p>
</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">聯絡我（占位）</h2>
<p>歡迎使用下列方式聯絡：Email / 電話 / GitHub / LinkedIn。實際表單或互動元件可於後續 Section SDD 加入（注意：本檔案禁止 JavaScript）。</p>

<div class="contact-list">
<div class="contact-item">
<strong class="muted">Email：</strong>
<a href="mailto:hello@example.com">hello@example.com</a>
</div>
<div class="contact-item">
<strong class="muted">電話：</strong>
<a href="tel:+886900000000">+886 900 000 000</a>
</div>
<div class="contact-item">
<strong class="muted">GitHub：</strong>
<a href="https://github.com/yourname" target="_blank" rel="noopener noreferrer">github.com/yourname</a>
</div>
<div class="contact-item">
<strong class="muted">LinkedIn：</strong>
<a href="https://www.linkedin.com/in/yourname" target="_blank" rel="noopener noreferrer">linkedin.com/in/yourname</a>
</div>
</div>

<p class="muted">之後會用 Section SDD 的 Prompt 產生新的 section，請把新的 section 程式碼整段貼在 &lt;!-- SECTION:CONTACT-START --&gt; 與 &lt;!-- SECTION:CONTACT-END --&gt; 這兩個註解中間，完全取代現在這一區。</p>
</div>
</section>
<!-- SECTION:CONTACT-END -->
</main>

<footer class="footer" role="contentinfo">
<div class="container">
<div class="meta-row">
<div>© <time datetime="2025-11-18">2025</time> Your Name · Frontend Dev</div>
<div class="muted">以單一 index.html 提供網站骨架，所有區塊均為占位，後續以 Section SDD 替換內容。</div>
</div>
</div>
</footer>
</div> </body> </html>