Skip to content

Commit 8ae689e

Browse files
PoTaTo-MikaPoTaTo-Mika
committed
Initial Web.
0 parents  commit 8ae689e

File tree

6 files changed

+797
-0
lines changed

6 files changed

+797
-0
lines changed

‎achievements.html‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Achievements - PoTaTo's Portfolio</title>
7+
<style>
8+
/* 全局样式 */
9+
:root {
10+
--primary-color: #8a63d2;
11+
--text-color: #e0e0e0;
12+
--bg-color: #121212;
13+
--card-bg: rgba(30, 30, 30, 0.7);
14+
--achievement-border: #ffd700;
15+
--achievement-glow: rgba(255, 215, 0, 0.3);
16+
}
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23+
}
24+
25+
body {
26+
background-color: var(--bg-color);
27+
color: var(--text-color);
28+
line-height: 1.6;
29+
position: relative;
30+
min-height: 100vh;
31+
padding: 0; /* 移除原有的padding */
32+
margin: 0;
33+
}
34+
35+
/* 导航栏样式 */
36+
nav {
37+
background-color: rgba(20, 20, 20, 0.9);
38+
padding: 1.2rem 0;
39+
display: flex;
40+
justify-content: center;
41+
position: sticky;
42+
gap: 0.2rem;
43+
top: 0;
44+
z-index: 100;
45+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
46+
backdrop-filter: blur(10px);
47+
width: 100%;
48+
}
49+
50+
nav a {
51+
color: var(--text-color);
52+
text-decoration: none;
53+
margin: 0 1.2rem;
54+
font-weight: 500;
55+
font-size: 1.0rem;
56+
transition: color 0.3s ease;
57+
}
58+
59+
nav a:hover {
60+
color: var(--primary-color);
61+
}
62+
63+
#achievements {
64+
max-width: 800px;
65+
margin: 0 auto;
66+
padding: 2rem;
67+
background-color: var(--card-bg);
68+
border-radius: 10px;
69+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
70+
}
71+
72+
#achievements h2 {
73+
color: var(--primary-color);
74+
text-align: center;
75+
font-size: 2.5rem;
76+
margin-bottom: 2rem;
77+
text-transform: uppercase;
78+
letter-spacing: 2px;
79+
text-shadow: 0 0 10px rgba(138, 99, 210, 0.5);
80+
}
81+
82+
.achievement-list {
83+
list-style-type: none;
84+
}
85+
86+
.achievement-item {
87+
background-color: rgba(40, 40, 40, 0.8);
88+
margin-bottom: 1.5rem;
89+
padding: 1.5rem;
90+
border-radius: 8px;
91+
border: 1px solid var(--achievement-border);
92+
box-shadow: 0 0 15px var(--achievement-glow);
93+
display: flex;
94+
align-items: center;
95+
transition: transform 0.3s ease, box-shadow 0.3s ease;
96+
}
97+
98+
.achievement-item:hover {
99+
transform: translateY(-5px);
100+
box-shadow: 0 0 20px var(--achievement-glow);
101+
}
102+
103+
.achievement-icon {
104+
width: 50px;
105+
height: 50px;
106+
background-color: var(--primary-color);
107+
border-radius: 50%;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
margin-right: 1.5rem;
112+
flex-shrink: 0;
113+
}
114+
115+
.achievement-icon i {
116+
color: var(--bg-color);
117+
font-size: 1.5rem;
118+
}
119+
120+
.achievement-content {
121+
flex-grow: 1;
122+
}
123+
124+
.achievement-title {
125+
font-size: 1.3rem;
126+
font-weight: bold;
127+
margin-bottom: 0.5rem;
128+
color: var(--achievement-border);
129+
}
130+
131+
.achievement-description {
132+
color: #cccccc;
133+
font-size: 1rem;
134+
}
135+
136+
.locked {
137+
filter: grayscale(100%);
138+
opacity: 0.7;
139+
border-color: #555;
140+
box-shadow: none;
141+
}
142+
143+
.locked .achievement-title {
144+
color: #888;
145+
}
146+
147+
.locked .achievement-icon {
148+
background-color: #555;
149+
}
150+
151+
.progress-bar {
152+
height: 10px;
153+
background-color: rgba(50, 50, 50, 0.8);
154+
border-radius: 5px;
155+
margin-top: 0.5rem;
156+
overflow: hidden;
157+
}
158+
159+
.progress {
160+
height: 100%;
161+
background-color: var(--primary-color);
162+
border-radius: 5px;
163+
}
164+
</style>
165+
</head>
166+
<body>
167+
<nav>
168+
<a href="index.html">Home</a>
169+
<a href="projects.html">Projects</a>
170+
<a href="achievements.html">Achievements</a>
171+
<a href="letsgame.html">Game</a>
172+
</nav>
173+
174+
<section id="achievements">
175+
<h1>成就</h1>
176+
177+
<!-- 语音领域成就组 -->
178+
<div class="achievement-group">
179+
<h2 class="group-title">
180+
<i class="group-icon">🎤</i>
181+
语音合成
182+
<span class="completion-rate">2/3 完成</span>
183+
</h2>
184+
185+
<ul class="achievement-list">
186+
<li class="achievement-item">
187+
<div class="achievement-icon">
188+
<i>🏆</i>
189+
</div>
190+
<div class="achievement-content">
191+
<div class="achievement-title">疑似是开源低手</div>
192+
<div class="achievement-description">是一个20K+⭐TTS项目的核心维护者</div>
193+
<div class="progress-bar">
194+
<div class="progress" style="width: 100%;"></div>
195+
</div>
196+
</div>
197+
</li>
198+
<li class="achievement-item">
199+
<div class="achievement-icon">
200+
<i>🤓</i>
201+
</div>
202+
<div class="achievement-content">
203+
<div class="achievement-title">班味渐浓</div>
204+
<div class="achievement-description">有过 中厂 & 国企 & 外企 & 大厂 的语音岗实习经历</div>
205+
<div class="progress-bar">
206+
<div class="progress" style="width: 75%;"></div>
207+
</div>
208+
</div>
209+
</li>
210+
<li class="achievement-item locked">
211+
<div class="achievement-icon">
212+
<i>🖊</i>
213+
</div>
214+
<div class="achievement-content">
215+
<div class="achievement-title">不想做学术辣！</div>
216+
<div class="achievement-description">Interspeech & ICASSP & TASLP全收集</div>
217+
<div class="progress-bar">
218+
<div class="progress" style="width: 33%;"></div>
219+
</div>
220+
</div>
221+
</li>
222+
</ul>
223+
</div>
224+
225+
<div class="achievement-group">
226+
<h2 class="group-title">
227+
<i class="group-icon">🤖</i>
228+
你觉得你是二游高手吗？
229+
<span class="completion-rate">1/3 完成</span>
230+
</h2>
231+
232+
<ul class="achievement-list">
233+
<li class="achievement-item">
234+
<div class="achievement-icon">
235+
<i>🏆</i>
236+
</div>
237+
<div class="achievement-content">
238+
<div class="achievement-title">站上舞台吧！</div>
239+
<div class="achievement-description">二创在游戏新春会上放映 3/1</div>
240+
<div class="progress-bar">
241+
<div class="progress" style="width: 100%;"></div>
242+
</div>
243+
</div>
244+
</li>
245+
<li class="achievement-item locked">
246+
<div class="achievement-icon">
247+
<i>💴</i>
248+
</div>
249+
<div class="achievement-content">
250+
<div class="achievement-title">我要吃饭！</div>
251+
<div class="achievement-description">通过商单恰饭赚到1000元（暂定？）</div>
252+
<div class="progress-bar">
253+
<div class="progress" style="width: 0%;"></div>
254+
</div>
255+
</div>
256+
</li>
257+
<li class="achievement-item locked">
258+
<div class="achievement-icon">
259+
<i>🔒</i>
260+
</div>
261+
<div class="achievement-content">
262+
<div class="achievement-title">COSPLAY糕手</div>
263+
<div class="achievement-description">在 CP & 萤火虫 & 音律 & Comiket 出自己喜欢的角色</div>
264+
<div class="progress-bar">
265+
<div class="progress" style="width: 0%;"></div>
266+
</div>
267+
</div>
268+
</li>
269+
</ul>
270+
</div>
271+
272+
<div class="achievement-group">
273+
<h2 class="group-title">
274+
<i class="group-icon">💻</i>
275+
游戏大神！
276+
<span class="completion-rate">0/4 完成</span>
277+
</h2>
278+
279+
<ul class="achievement-list">
280+
<li class="achievement-item">
281+
<div class="achievement-icon">
282+
<i>🔫</i>
283+
</div>
284+
<div class="achievement-content locked">
285+
<div class="achievement-title">FPS大神？！</div>
286+
<div class="achievement-description">在任意一个FPS游戏中达到最高段位</div>
287+
<div class="progress-bar">
288+
<div class="progress" style="width: 0%;"></div>
289+
</div>
290+
</div>
291+
</li>
292+
<li class="achievement-item locked">
293+
<div class="achievement-icon">
294+
<i>🌟</i>
295+
</div>
296+
<div class="achievement-content">
297+
<div class="achievement-title">你会看见的，对吗？</div>
298+
<div class="achievement-description">参加某款游戏的世界级比赛，并且在全世界面前全力以赴。</div>
299+
<div class="progress-bar">
300+
<div class="progress" style="width: 0%;"></div>
301+
</div>
302+
</div>
303+
</li>
304+
<li class="achievement-item locked">
305+
<div class="achievement-icon">
306+
<i>🔒</i>
307+
</div>
308+
<div class="achievement-content">
309+
<div class="achievement-title">还是编程爱好者</div>
310+
<div class="achievement-description">开发一款销量过万的游戏</div>
311+
<div class="progress-bar">
312+
<div class="progress" style="width: 0%;"></div>
313+
</div>
314+
</div>
315+
</li>
316+
<li class="achievement-item locked">
317+
<div class="achievement-icon">
318+
<i>🔒</i>
319+
</div>
320+
<div class="achievement-content">
321+
<div class="achievement-title">在最后的夜奔赴终点.</div>
322+
<div class="achievement-description">跨越漫长的黑夜，我们将重逢在永恒的明天。</div>
323+
<div class="progress-bar">
324+
<div class="progress" style="width: 20%;"></div>
325+
</div>
326+
</div>
327+
</li>
328+
</ul>
329+
</div>
330+
</section>
331+
</body>
332+
</html>

‎background.png‎

2.36 MB
Loading

0 commit comments

Comments
 (0)