Skip to content

first #11

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

first #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5dd414
first
liwenchiou Nov 13, 2025
b62a27b
second
liwenchiou Nov 13, 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
286 changes: 257 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,265 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
*, *::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); }
/* CSS:BASE-START */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #0f172a;
color: #e2e8f0;
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
a {
color: #38bdf8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.site-header {
position: sticky;
top: 0;
background-color: #1e293b;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
z-index: 100;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-logo {
font-weight: bold;
font-size: 1.1rem;
color: #e2e8f0;
}
.nav-links {
display: flex;
gap: 1rem;
}
.nav-link {
color: #cbd5e1;
font-size: 0.95rem;
}
.nav-link:hover {
color: #38bdf8;
}
.section {
padding: 4rem 1rem;
}
.section-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #f1f5f9;
}
footer {
text-align: center;
padding: 1.5rem 1rem;
font-size: 0.875rem;
color: #94a3b8;
background-color: #1e293b;
margin-top: auto;
}
/* CSS:BASE-END */

/* CSS:HERO-START */
.section-hero {
text-align: center;
background-color: #0f172a;
}
.section-hero img {
border-radius: 8px;
margin: 1.5rem auto;
max-width: 280px;
}
.hero-title {
font-size: 2rem;
margin-bottom: 1rem;
color: #38bdf8;
}
.hero-description {
color: #cbd5e1;
max-width: 600px;
margin: 0 auto 1rem;
}
/* CSS:HERO-END */

/* CSS:ABOUT-START */
.section-about {
background-color: #1e293b;
}
.section-about p {
color: #cbd5e1;
max-width: 700px;
}
/* CSS:ABOUT-END */

/* CSS:SKILLS-START */
.section-skills {
background-color: #0f172a;
}
.section-skills p {
color: #cbd5e1;
max-width: 700px;
}
/* CSS:SKILLS-END */

/* CSS:PROJECTS-START */
.section-projects {
background-color: #1e293b;
}
.section-projects p {
color: #cbd5e1;
max-width: 700px;
}
/* CSS:PROJECTS-END */

/* CSS:CONTACT-START */
.section-contact {
background-color: #0f172a;
}
.section-contact p {
color: #cbd5e1;
max-width: 700px;
}
/* CSS:CONTACT-END */

/* CSS:RWD-START */
@media (min-width: 768px) {
.nav-links {
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.section {
padding: 6rem 2rem;
}
.section-about,
.section-projects {
display: flex;
align-items: center;
justify-content: center;
}
.section-about .container,
.section-projects .container {
display: flex;
flex-direction: row;
gap: 2rem;
}
.section-about img,
.section-projects img {
max-width: 40%;
border-radius: 8px;
}
}
@media (min-width: 1440px) {
.hero-title {
font-size: 3rem;
}
}
/* 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">
<nav class="nav container">
<div class="nav-logo">Your Name · Frontend Dev</div>
<div class="nav-links">
<a href="#hero" class="nav-link">首頁</a>
<a href="#about" class="nav-link">關於我</a>
<a href="#skills" class="nav-link">技能</a>
<a href="#projects" class="nav-link">作品集</a>
<a href="#contact" class="nav-link">聯絡我</a>
</div>
</nav>
</header>

<main>
<!-- SECTION:HERO-START -->
<section id="hero" class="section section-hero">
<div class="container">
<h1 class="hero-title">這裡是個人網站的主視覺</h1>
<p class="hero-description">這裡將放上你的名字、角色（例如 Frontend Developer），以及一段簡短的自我介紹或行動呼籲（例如「瀏覽我的作品集」）。</p>
<img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=800&q=80"
alt="在筆電前撰寫程式碼的前端開發者" loading="lazy">

<p class="hero-description">之後會用 Section SDD 的 Prompt 產生正式文案與版面，再把整個 section 貼回來取代這一區。</p>
</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>這裡目前是 About 區的占位內容，之後會用 Section SDD 產生正式內容，請把新的 section 程式碼整段貼回來，取代這一區。</p>
</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 區的占位內容，之後會用 Section SDD 產生正式內容，請把新的 section 程式碼整段貼回來，取代這一區。</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">作品集（之後會用 Section SDD 替換）</h2>
<p>這裡目前是 Projects 區的占位內容，之後會用 Section SDD 產生正式內容，請把新的 section 程式碼整段貼回來，取代這一區。</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">聯絡我（之後會用 Section SDD 替換）</h2>
<p>這裡目前是 Contact 區的占位內容，之後會用 Section SDD 產生正式內容，請把新的 section 程式碼整段貼回來，取代這一區。</p>
<p>你也可以在這裡放上你的電子郵件、電話或社群連結，例如：
<a href="mailto:hello@example.com">hello@example.com</a>、
<a href="https://github.com/yourname">GitHub</a>、
<a href="https://www.linkedin.com/in/yourname">LinkedIn</a>。
</p>
</div>
</section>
<!-- SECTION:CONTACT-END -->
</main>

<footer>
<p>© 2025 Your Name · Frontend Dev. 保留所有權利。</p>
</footer>
</div>
</body>
</html>
</html>