Skip to content

Commit 49f7fa0

Browse files
sudoevolvesudoevolve
authored
Update index.html
1 parent 0029958 commit 49f7fa0

File tree

1 file changed

+264
-0
lines changed

1 file changed

+264
-0
lines changed

‎index.html‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,119 @@
206206
.poem-intro { display: none; }
207207
}
208208

209+
/* --- 新增：技能板块样式 --- */
210+
.skills-section {
211+
padding: 100px 50px;
212+
max-width: 1400px;
213+
margin: 0 auto;
214+
position: relative;
215+
}
216+
217+
.skills-header {
218+
text-align: center;
219+
margin-bottom: 80px;
220+
}
221+
222+
.skills-grid {
223+
display: grid;
224+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
225+
gap: 40px;
226+
perspective: 1000px;
227+
}
228+
229+
.skill-category {
230+
background: rgba(255, 255, 255, 0.4);
231+
border: 1px solid #ccc;
232+
padding: 30px;
233+
position: relative;
234+
overflow: hidden;
235+
transition: transform 0.3s ease;
236+
box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
237+
}
238+
.skill-category:hover {
239+
transform: translateY(-5px);
240+
background: rgba(255, 255, 255, 0.7);
241+
border-color: var(--cinnabar);
242+
}
243+
244+
.cat-title {
245+
font-family: var(--font-ink);
246+
font-size: 2rem;
247+
color: var(--cinnabar);
248+
border-bottom: 2px solid var(--ink-black);
249+
padding-bottom: 10px;
250+
margin-bottom: 20px;
251+
display: inline-block;
252+
}
253+
254+
.skill-item {
255+
margin-bottom: 25px;
256+
position: relative;
257+
}
258+
259+
.skill-header {
260+
display: flex;
261+
justify-content: space-between;
262+
align-items: flex-end;
263+
margin-bottom: 8px;
264+
}
265+
266+
.skill-name {
267+
font-family: var(--font-body);
268+
font-weight: bold;
269+
font-size: 1.1rem;
270+
}
271+
272+
.skill-alias {
273+
font-family: var(--font-cursive);
274+
color: var(--ink-light);
275+
font-size: 1.2rem;
276+
}
277+
278+
.qi-bar-bg {
279+
width: 100%;
280+
height: 6px;
281+
background: rgba(0,0,0,0.1);
282+
border-radius: 3px;
283+
overflow: hidden;
284+
}
285+
286+
.qi-fill {
287+
height: 100%;
288+
background: var(--ink-black);
289+
width: 0%; /* 初始为0，JS控制动画 */
290+
position: relative;
291+
}
292+
/* 进度条末端的墨晕 */
293+
.qi-fill::after {
294+
content: '';
295+
position: absolute;
296+
right: -5px; top: -2px;
297+
width: 10px; height: 10px;
298+
background: var(--ink-black);
299+
border-radius: 50%;
300+
filter: blur(2px);
301+
}
302+
303+
.skill-desc {
304+
font-size: 0.85rem;
305+
color: #666;
306+
margin-top: 5px;
307+
font-style: italic;
308+
}
309+
310+
/* 装饰用的印章背景 */
311+
.bg-seal {
312+
position: absolute;
313+
right: -20px; bottom: -20px;
314+
font-family: var(--font-ink);
315+
font-size: 8rem;
316+
color: var(--cinnabar);
317+
opacity: 0.05;
318+
pointer-events: none;
319+
transform: rotate(-15deg);
320+
}
321+
209322
</style>
210323
</head>
211324
<body>
@@ -249,6 +362,129 @@ <h1 class="hero-title">苏渡 · 弈沃</h1>
249362
</p>
250363
</section>
251364

365+
<!-- 技能板块：藏经阁 -->
366+
<section class="skills-section">
367+
<div class="skills-header">
368+
<div class="seal" style="font-size: 1.2rem; margin-bottom: 15px;">武学</div>
369+
<h2 class="hero-title" style="font-size: 4rem;">藏经阁 · 修为</h2>
370+
<p style="font-family: var(--font-cursive); font-size: 1.5rem; color: var(--ink-light); margin-top: 10px;">
371+
内修心法，外练招式，通晓乾坤之理
372+
</p>
373+
</div>
374+
375+
<div class="skills-grid">
376+
377+
<!-- 第一卷：内功心法 (Languages) -->
378+
<div class="skill-category">
379+
<div class="bg-seal">心法</div>
380+
<div class="cat-title">混元内功</div>
381+
382+
<!-- C++ -->
383+
<div class="skill-item">
384+
<div class="skill-header">
385+
<span class="skill-name">C++</span>
386+
<span class="skill-alias">九阳神功</span>
387+
</div>
388+
<div class="qi-bar-bg"><div class="qi-fill" data-width="90%"></div></div>
389+
<div class="skill-desc">根基深厚，内力生生不息，掌管内存之生灭。</div>
390+
</div>
391+
392+
<!-- Python -->
393+
<div class="skill-item">
394+
<div class="skill-header">
395+
<span class="skill-name">Python</span>
396+
<span class="skill-alias">灵蛇身法</span>
397+
</div>
398+
<div class="qi-bar-bg"><div class="qi-fill" data-width="95%" style="background: var(--bamboo);"></div></div>
399+
<div class="skill-desc">变化万千，出手如电，数据科学之利器。</div>
400+
</div>
401+
402+
<!-- JavaScript -->
403+
<div class="skill-item">
404+
<div class="skill-header">
405+
<span class="skill-name">JavaScript</span>
406+
<span class="skill-alias">迷踪幻步</span>
407+
</div>
408+
<div class="qi-bar-bg"><div class="qi-fill" data-width="85%" style="background: var(--gold);"></div></div>
409+
<div class="skill-desc">游走于浏览器之间，幻化万物，异步随心。</div>
410+
</div>
411+
</div>
412+
413+
<!-- 第二卷：机关术数 (Frameworks) -->
414+
<div class="skill-category">
415+
<div class="bg-seal">机枢</div>
416+
<div class="cat-title">天工机关</div>
417+
418+
<!-- Qt -->
419+
<div class="skill-item">
420+
<div class="skill-header">
421+
<span class="skill-name">Qt / QML</span>
422+
<span class="skill-alias">玲珑宝塔</span>
423+
</div>
424+
<div class="qi-bar-bg"><div class="qi-fill" data-width="90%" style="background: #41cd52;"></div></div>
425+
<div class="skill-desc">构建桌面宏大楼阁，信号槽如经脉相连。</div>
426+
</div>
427+
428+
<!-- Flutter -->
429+
<div class="skill-item">
430+
<div class="skill-header">
431+
<span class="skill-name">Flutter</span>
432+
<span class="skill-alias">纵云梯</span>
433+
</div>
434+
<div class="qi-bar-bg"><div class="qi-fill" data-width="80%" style="background: #54c5f8;"></div></div>
435+
<div class="skill-desc">跨界而行，身轻如燕，一套身法行遍天下。</div>
436+
</div>
437+
438+
<!-- CMake -->
439+
<div class="skill-item">
440+
<div class="skill-header">
441+
<span class="skill-name">CMake</span>
442+
<span class="skill-alias">铸剑阵图</span>
443+
</div>
444+
<div class="qi-bar-bg"><div class="qi-fill" data-width="75%"></div></div>
445+
<div class="skill-desc">统筹编译之火候，成形神兵利器。</div>
446+
</div>
447+
</div>
448+
449+
<!-- 第三卷：乾坤法宝 (Tools & DB & OS) -->
450+
<div class="skill-category">
451+
<div class="bg-seal">道法</div>
452+
<div class="cat-title">乾坤道法</div>
453+
454+
<!-- Linux/Shell -->
455+
<div class="skill-item">
456+
<div class="skill-header">
457+
<span class="skill-name">Linux / Shell</span>
458+
<span class="skill-alias">天地法则</span>
459+
</div>
460+
<div class="qi-bar-bg"><div class="qi-fill" data-width="88%"></div></div>
461+
<div class="skill-desc">言出法随，以字符敕令号令系统底层。</div>
462+
</div>
463+
464+
<!-- Git -->
465+
<div class="skill-item">
466+
<div class="skill-header">
467+
<span class="skill-name">Git</span>
468+
<span class="skill-alias">回溯神术</span>
469+
</div>
470+
<div class="qi-bar-bg"><div class="qi-fill" data-width="92%" style="background: var(--cinnabar);"></div></div>
471+
<div class="skill-desc">穿梭时空，记录历史，不惧代码崩坏之劫。</div>
472+
</div>
473+
474+
<!-- SQL -->
475+
<div class="skill-item">
476+
<div class="skill-header">
477+
<span class="skill-name">MySQL / SQLite</span>
478+
<span class="skill-alias">芥子纳须弥</span>
479+
</div>
480+
<div class="qi-bar-bg"><div class="qi-fill" data-width="80%" style="background: #666;"></div></div>
481+
<div class="skill-desc">纳万千数据于方寸之间，查询如探囊取物。</div>
482+
</div>
483+
</div>
484+
485+
</div>
486+
</section>
487+
252488
<div class="project-scroll">
253489

254490
<div class="project-item">
@@ -515,6 +751,34 @@ <h2 class="proj-title">笔墨问道</h2>
515751
el.addEventListener('mouseleave', () => cursor.classList.remove('active'));
516752
});
517753

754+
// --- 新增：技能条真气注入动画 ---
755+
gsap.utils.toArray('.qi-fill').forEach(bar => {
756+
gsap.to(bar, {
757+
scrollTrigger: {
758+
trigger: bar,
759+
start: "top 85%", // 当元素进入视口85%位置时开始
760+
toggleActions: "play none none reverse"
761+
},
762+
width: bar.getAttribute('data-width'),
763+
duration: 1.5,
764+
ease: "power4.out",
765+
delay: 0.2
766+
});
767+
});
768+
769+
// 技能卡片的浮现动画
770+
gsap.from(".skill-category", {
771+
scrollTrigger: {
772+
trigger: ".skills-grid",
773+
start: "top 80%"
774+
},
775+
y: 50,
776+
opacity: 0,
777+
duration: 1,
778+
stagger: 0.2, // 依次出现
779+
ease: "back.out(1.7)"
780+
});
781+
518782
</script>
519783
</body>
520784
</html>

0 commit comments

Comments
 (0)