Skip to content

Commit 39024f0

Browse files
jasonlu0525jasonlu0525
authored
Merge pull request #525 from CodeCath/main
feat:加入jane1001個人身份
2 parents 78d8b1d + ca397a8 commit 39024f0

File tree

3 files changed

+446
-0
lines changed

3 files changed

+446
-0
lines changed

‎students/2025-11-25-jane1001/Geeko4.png‎

75.2 KB
Loading

‎students/2025-11-25-jane1001/index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-TW">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Cath | Front-end Developer & UI Designer</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
14+
<!-- Header & Nav -->
15+
<header class="header">
16+
<div class="container">
17+
<a href="#" class="logo"></a>
18+
<nav class="nav">
19+
<ul class="nav-list">
20+
<li><a href="#about">About</a></li>
21+
<li><a href="#services">Services</a></li>
22+
<li><a href="#projects">Projects</a></li>
23+
<li><a href="#contact" class="btn-primary">聯絡我</a></li>
24+
</ul>
25+
<button class="hamburger" aria-label="開啟選單">
26+
<span></span>
27+
<span></span>
28+
<span></span>
29+
</button>
30+
</nav>
31+
</div>
32+
</header>
33+
34+
<!-- Hero -->
35+
<section class="hero">
36+
<div class="container hero-grid">
37+
<div class="hero-text">
38+
<h1>你好，我是 Cath!<br><span class="highlight">Front-end Developer</span><br>& UI Designer</h1>
39+
<p>熱愛把設計稿變成像素完美的互動網站，用乾淨的程式碼打造流暢使用者體驗。</p>
40+
<div class="hero-buttons">
41+
<a href="#projects" class="btn-primary">查看作品</a>
42+
<a href="#contact" class="btn-secondary">聯絡我</a>
43+
</div>
44+
</div>
45+
<div class="hero-image">
46+
<div class="image-wrapper">
47+
<img src="Geeko4.png" alt="Cath">
48+
</div>
49+
</div>
50+
</div>
51+
</section>
52+
53+
<!-- About -->
54+
<section id="about" class="about">
55+
<div class="container">
56+
<h2 class="section-title">關於我</h2>
57+
<div class="about-content">
58+
<p>我是 Cath，目前專注於前端開發與 UI 設計。擅長使用 <strong>React</strong>、<strong>Vue</strong> 打造高效能的單頁應用，也熱衷於 RWD 與細膩的交交互動細節。</p>
59+
<p>我相信好的網站不只是好看，更要好用、好快、好維護。每一行程式碼都力求乾淨、可讀，讓團隊合作更順暢。</p>
60+
</div>
61+
</div>
62+
</section>
63+
64+
<!-- Services -->
65+
<section id="services" class="services">
66+
<div class="container">
67+
<h2 class="section-title">服務項目</h2>
68+
<div class="services-grid">
69+
<div class="service-card">
70+
<h3>Landing Page 設計與開發</h3>
71+
<p>從設計到上線，一條龍打造高轉換率的行銷頁面</p>
72+
</div>
73+
<div class="service-card">
74+
<h3>網站切版與前端開發</h3>
75+
<p>像素完美還原設計稿，兼顧效能與可維護性</p>
76+
</div>
77+
<div class="service-card">
78+
<h3>UI / UX 設計</h3>
79+
<p>使用者導向的介面設計，讓產品更好用、更美觀</p>
80+
</div>
81+
<div class="service-card">
82+
<h3>React / Vue 專案開發</h3>
83+
<p>現代化前端框架建置 SPA，支援複雜互動功能</p>
84+
</div>
85+
</div>
86+
</div>
87+
</section>
88+
89+
<!-- Projects -->
90+
<section id="projects" class="projects">
91+
<div class="container">
92+
<h2 class="section-title">作品展示</h2>
93+
<div class="projects-grid">
94+
<article class="project-card">
95+
<div class="project-img" style="background:#715BFE;"></div>
96+
<h3>E-Commerce Dashboard</h3>
97+
<p>React + TypeScript 打造的後台管理系統</p>
98+
</article>
99+
<article class="project-card">
100+
<div class="project-img" style="background:#FBA0FF;"></div>
101+
<h3>SaaS Landing Page</h3>
102+
<p>高轉換率的產品落地頁，支援多語言</p>
103+
</article>
104+
<article class="project-card">
105+
<div class="project-img" style="background:#9CD622;"></div>
106+
<h3>個人品牌網站</h3>
107+
<p>Vue 3 + GSAP 動畫的藝術家作品集</p>
108+
</article>
109+
</div>
110+
</div>
111+
</section>
112+
113+
<!-- Contact CTA -->
114+
<section id="contact" class="contact">
115+
<div class="container">
116+
<div class="contact-card">
117+
<h2>準備好一起打造下一個精彩專案了嗎？</h2>
118+
<p>不管是切版、開發、還是完整的網站專案，都歡迎隨時找我聊聊！</p>
119+
<a href="mailto:cathryn.workroom@gmail.com" class="btn-primary large">立即聯絡我</a>
120+
<p class="email">📮 cathryn.workroom@gmail.com</p>
121+
</div>
122+
</div>
123+
</section>
124+
125+
<!-- Footer -->
126+
<footer class="footer">
127+
<div class="container">
128+
<p>© 2025 Cath. All rights reserved.</p>
129+
<p>Made with ❤️ and lots of coffee</p>
130+
</div>
131+
</footer>
132+
133+
<!-- <script src="script.js"></script> -->
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)