-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (167 loc) · 5.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blaise Chen</title>
<link rel="stylesheet" href="/assets/css/style.css">
<style>
.hero-section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
overflow: hidden;
color: white;
text-align: center;
position: relative;
}
.hero-content {
position: relative;
z-index: 10;
}
.hero-title {
font-size: 3.5rem;
letter-spacing: 2px;
margin-bottom: 1rem;
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
.hero-subtitle {
font-size: 1.4rem;
margin-bottom: 2rem;
opacity: 0;
animation: fadeIn 1s ease-in 0.5s forwards;
}
.hero-btn {
display: inline-block;
padding: 12px 30px;
font-size: 1.2rem;
color: white;
background: #ff5733;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
opacity: 0;
animation: fadeIn 1s ease-in 1s forwards;
box-shadow: 0 4px 15px rgba(255, 87, 51, 0.3);
}
.hero-btn:hover {
background: #c70039;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 87, 51, 0.4);
}
.background-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float linear infinite;
}
.about-section {
padding: 4rem 0;
background: #f8f9fa;
}
.about-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
text-align: center;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.skill-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.skill-card:hover {
transform: translateY(-5px);
}
@keyframes float {
0% { transform: translateY(0) translateX(0); opacity: 0; }
50% { opacity: 0.8; }
100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<script src="/assets/js/main.js" defer></script>
</head>
<body>
<header class="site-header">
<div class="container">
<nav class="site-nav">
<a href="/" class="site-title">Blaise Chen</a>
<ul class="nav-links">
<li><a href="/">首頁</a></li>
<li><a href="/blog">部落格</a></li>
<li><a href="/about">關於</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero-section">
<div class="background-animation"></div>
<div class="hero-content">
<h1 class="hero-title">Blaise Chen</h1>
<p class="hero-subtitle">探索、創新、分享</p>
<a href="/blog" class="hero-btn">開始探索</a>
</div>
</section>
<section class="about-section">
<div class="about-content">
<h2>歡迎</h2>
<p class="about-intro">歡迎來到我的個人網站。我是一個熱愛技術的資訊工程師，專注於系統整合與數位創新。</p>
<div class="skills-grid">
<div class="skill-card">
<h3>系統整合</h3>
<p>專業的系統規劃與整合服務</p>
</div>
<div class="skill-card">
<h3>數位行銷</h3>
<p>全方位的品牌數位轉型方案</p>
</div>
<div class="skill-card">
<h3>創意設計</h3>
<p>視覺設計與多媒體內容製作</p>
</div>
</div>
<div class="cta-section">
<a href="/about" class="hero-btn">了解更多</a>
</div>
</div>
</section>
<footer class="site-footer">
<div class="footer-content">
<div class="social-links">
<a href="https://github.com/zeroboss2006" target="_blank">GitHub</a>
<a href="#" target="_blank">LinkedIn</a>
<a href="#" target="_blank">Twitter</a>
</div>
<p>© 2024 Blaise Chen. All rights reserved.</p>
</div>
</footer>
</body>
</html>