PersonalPage/index.html
2025-05-16 13:34:52 +00:00

341 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>曾子愚 - 个人简历</title>
<style>
:root {
--bg-color: #f4f4f4;
--card-bg-color: #ffffff;
--text-color: #333333;
--link-color: #007BFF;
--link-hover-color: #0056b3;
--divider-color: #e8e8e8;
--progress-bg-color: #e9ecef;
--progress-bar-color: #007BFF;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
.card {
background-color: var(--card-bg-color);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 50px auto;
max-width: 85%;
padding: 30px;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.avatar {
border-radius: 50%;
width: 120px;
height: 120px;
object-fit: cover;
transition: transform 0.3s ease;
}
.avatar:hover {
transform: scale(1.1);
}
.name-contact {
flex-grow: 1;
margin-left: 20px;
}
.name {
font-size: 32px;
font-weight: bold;
margin-bottom: 5px;
}
.position {
font-size: 18px;
color: #666;
margin-bottom: 10px;
}
.contact {
font-size: 16px;
line-height: 1.6;
}
.contact a {
color: var(--link-color);
text-decoration: none;
margin-right: 15px;
transition: color 0.3s ease;
}
.contact a:hover {
color: var(--link-hover-color);
}
.intro {
font-family: 'Dancing Script', cursive;
position: relative;
padding-left: 20px;
margin-bottom: 30px;
}
.intro::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--link-color);
}
.section {
margin-bottom: 30px;
position: relative;
}
.section:not(:last-child)::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
right: 0;
height: 1px;
background-color: var(--divider-color);
}
.section h2 {
font-size: 24px;
margin-bottom: 15px;
padding-bottom: 10px;
}
.timeline-item {
margin-bottom: 20px;
}
.timeline-item h3 {
font-size: 20px;
margin-bottom: 5px;
}
.timeline-item p {
margin: 0;
line-height: 1.6;
}
.progress-bar {
background-color: var(--progress-bg-color);
border-radius: 5px;
height: 20px;
margin-bottom: 15px;
position: relative;
}
.progress {
background-color: var(--progress-bar-color);
border-radius: 5px;
height: 100%;
text-align: left;
padding-left: 10px;
color: white;
font-size: 14px;
}
.radar-chart {
width: 100%;
height: 230px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 1s ease-out;
}
.skills-container {
display: flex;
gap: 20px;
}
.progress-container {
flex: 1;
}
.radar-container {
flex: 1;
}
.footer-contact {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.footer-contact a {
color: var(--link-color);
font-size: 24px;
transition: color 0.3s ease;
}
.footer-contact a:hover {
color: var(--link-hover-color);
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<div class="card">
<div class="header">
<img class="avatar" src="https://picsum.photos/200/200" alt="曾子愚">
<div class="name-contact">
<div class="name">曾子愚</div>
<div class="position">算法竞赛与全栈开发学习者</div>
<div class="contact">
<a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i> 2917946698@qq.com</a>
<a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i> Zengtudor@outlook.com</a>
<a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i> GitCode</a>
<a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i> 个人博客</a>
<a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i> 代码库</a>
</div>
</div>
</div>
<div class="intro fade-in">
<p>我是曾子愚一名热爱计算机科学的高中生。专注于C++算法竞赛与全栈开发熟悉现代C++编程范式掌握Node.js、Vue、C#和Python等多种技术栈。对生物信息工程项目有深入研究曾实现40倍并行加速优化。热衷于探索计算机科学的各个领域追求技术的极致与创新。如有有偿程序开发需求欢迎联系我。</p>
</div>
<div class="section fade-in">
<h2>教育背景</h2>
<div class="timeline-item">
<h3>高中在读</h3>
<p>2024 - 至今</p>
<ul>
<li>参与学校科技创新社团,主导多个编程项目开发。</li>
</ul>
</div>
</div>
<div class="section fade-in">
<h2>获奖信息</h2>
<div class="timeline-item">
<h3>国家级竞赛</h3>
<ul>
<li>[2023] CSP-J入门级二等奖</li>
<li>[2024] CSP-S提高级三等奖</li>
<li>[2024] NOIP全国青少年信息学奥林匹克联赛三等奖</li>
<li>蓝桥杯省赛一等奖</li>
</ul>
</div>
<div class="timeline-item">
<h3>其他荣誉</h3>
<ul>
<li>深圳科创明日之星称号</li>
</ul>
</div>
</div>
<div class="section fade-in">
<h2>专业技能</h2>
<div class="skills-container">
<div class="progress-container">
<div class="progress-bar">
<div class="progress" style="width: 95%;">C++ 算法竞赛 - 95%</div>
</div>
<div class="progress-bar">
<div class="progress" style="width: 85%;">现代 C++ 编程 - 85%</div>
</div>
<div class="progress-bar">
<div class="progress" style="width: 80%;">Node.js & Vue 开发 - 80%</div>
</div>
<div class="progress-bar">
<div class="progress" style="width: 75%;">Python 与数据处理 - 75%</div>
</div>
<div class="progress-bar">
<div class="progress" style="width: 70%;">Docker 与容器化部署 - 70%</div>
</div>
<div class="progress-bar">
<div class="progress" style="width: 65%;">嵌入式系统开发 - 65%</div>
</div>
</div>
<div class="radar-container">
<canvas class="radar-chart" id="radarChart"></canvas>
</div>
</div>
<script>
const ctx = document.getElementById('radarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['C++ 算法', '现代 C++', 'Web 开发', '数据处理', '系统部署', '嵌入式开发'],
datasets: [{
label: '技能水平',
data: [95, 85, 80, 75, 70, 65],
backgroundColor: 'rgba(0, 123, 255, 0.2)',
borderColor: 'rgba(0, 123, 255, 1)',
borderWidth: 1
}]
},
options: {
scales: {
r: {
min: 0,
max: 100
}
}
}
});
</script>
</div>
<div class="section fade-in">
<h2>项目经验</h2>
<div class="timeline-item">
<h3>生物信息工程项目优化</h3>
<p>2023 - 2024</p>
<ul>
<li>对生物信息学序列比对算法进行并行优化通过多线程和向量化技术实现了40倍的性能提升。</li>
<li>使用现代C++C++17/20重构原有代码引入智能指针、并行算法和协程等特性提高代码质量和可维护性。</li>
<li>开发了自动化测试框架,确保优化后的代码保持正确性和稳定性。</li>
</ul>
</div>
</div>
<div class="footer-contact">
<a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i></a>
<a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i></a>
<a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i></a>
<a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i></a>
<a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i></a>
</div>
</div>
</body>
</html>