118 lines
5.0 KiB
HTML
118 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>个人简历 - 张三</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="profile-header">
|
||
<div class="profile-img">
|
||
<img src="https://static.seahi.me/2025/03/oPlxoD.jpg" alt="个人照片">
|
||
</div>
|
||
<div class="profile-info">
|
||
<h1>张三</h1>
|
||
<p class="title">前端开发工程师</p>
|
||
<div class="contact-info">
|
||
<p><i class="fas fa-envelope icon"></i> zhangsan@example.com</p>
|
||
<p><i class="fas fa-phone-alt icon"></i> 138-8888-8888</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-user-circle"></i> 个人简介</h2>
|
||
<div class="section-content">
|
||
<p>5年前端开发经验，精通HTML、CSS、JavaScript等前端技术，熟悉Vue、React等前端框架。对用户体验和界面设计有深入理解，能够高效地将设计转化为代码实现。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-graduation-cap"></i> 教育背景</h2>
|
||
<div class="section-content">
|
||
<div class="education">
|
||
<div class="education-header">
|
||
<h3>北京大学</h3>
|
||
<p class="date">2014年9月 - 2018年6月</p>
|
||
</div>
|
||
<p class="degree">计算机科学与技术 学士学位</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-laptop-code"></i> 技能专长</h2>
|
||
<div class="section-content skills">
|
||
<div class="skill-category">
|
||
<h3>前端技术</h3>
|
||
<div class="skill-items">
|
||
<span class="skill-item">HTML5</span>
|
||
<span class="skill-item">CSS3</span>
|
||
<span class="skill-item">JavaScript</span>
|
||
<span class="skill-item">Vue.js</span>
|
||
<span class="skill-item">React</span>
|
||
</div>
|
||
</div>
|
||
<div class="skill-category">
|
||
<h3>工具与方法</h3>
|
||
<div class="skill-items">
|
||
<span class="skill-item">Git</span>
|
||
<span class="skill-item">Webpack</span>
|
||
<span class="skill-item">响应式设计</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-project-diagram"></i> 项目经验</h2>
|
||
<div class="section-content">
|
||
<div class="project">
|
||
<h3>企业管理系统重构</h3>
|
||
<p class="project-desc">使用Vue.js重构旧版管理系统，提升用户体验和开发效率，系统响应速度提升50%。</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3>移动端电商平台</h3>
|
||
<p class="project-desc">负责移动端电商平台的前端开发，实现了商品展示、购物车、支付等核心功能。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-content">
|
||
<p>更新日期: 2025年3月</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.body.classList.add('loaded');
|
||
|
||
const skillItems = document.querySelectorAll('.skill-item');
|
||
skillItems.forEach(item => {
|
||
item.addEventListener('mouseover', function() {
|
||
this.style.transform = 'translateY(-5px)';
|
||
});
|
||
item.addEventListener('mouseout', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|