- 单页滚动：采用现代的单页滚动设计，通过导航栏点击或鼠标滚轮,可以平滑地切换到简历的不同部分。
- 响应式设计：完美适配桌面、平板和手机等各种设备。
- 现代美观：使用渐变色、卡片式布局和动画效果,让简历看起来专业且吸引人。
- 功能完整：包含了个人简历所需的所有核心模块：个人信息、技能、工作经历、项目经验、教育背景和联系方式。
- 代码清晰：HTML5语义化标签、CSS3模块化样式、原生JavaScript实现交互,易于理解和修改。
如何使用
- 复制代码：将下面的
HTML、CSS和JavaScript代码分别复制到对应的文件中（index.html,style.css,script.js）。 - ：打开
index.html文件，根据您的实际情况修改其中的文本、图片和链接。 - 部署：将这三个文件放在同一个文件夹下，用浏览器打开
index.html即可查看效果。
HTML 代码 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">张三 - 个人简历</title>
<link rel="stylesheet" href="style.css">
<!-- 引入字体图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<a href="#home" class="nav-link active">首页</a>
<a href="#about" class="nav-link">关于我</a>
<a href="#skills" class="nav-link">技能</a>
<a href="#experience" class="nav-link">经历</a>
<a href="#projects" class="nav-link">项目</a>
<a href="#education" class="nav-link">教育</a>
<a href="#contact" class="nav-link">联系我</a>
</nav>
<main>
<!-- 首页 / 英雄区域 -->
<section id="home" class="section hero">
<div class="hero-content">
<img src="https://via.placeholder.com/200" alt="张三的头像" class="profile-img">
<h1>你好，我是张三</h1>
<p class="subtitle">一名充满激情的前端开发工程师</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">联系我</a>
<a href="#about" class="btn btn-secondary">了解更多</a>
</div>
</div>
<div class="scroll-indicator">
<i class="fas fa-chevron-down"></i>
</div>
</section>
<!-- 关于我 -->
<section id="about" class="section">
<div class="container">
<h2 class="section-title">关于我</h2>
<div class="about-content">
<div class="about-text">
<p>我是一名拥有5年经验的前端开发工程师，专注于创建美观、快速且用户友好的Web应用，我热衷于学习新技术，并将其应用到实际项目中，以解决复杂问题并提升用户体验。</p>
<p>在业余时间，我喜欢参与开源项目，撰写技术博客，并探索最新的前端框架和工具，我相信，持续学习是技术人员的核心驱动力。</p>
</div>
<div class="about-details">
<div class="detail-item">
<i class="fas fa-birthday-cake"></i>
<span>1995年3月15日</span>
</div>
<div class="detail-item">
<i class="fas fa-map-marker-alt"></i>
<span>北京市</span>
</div>
<div class="detail-item">
<i class="fas fa-envelope"></i>
<span>zhangsan.email@example.com</span>
</div>
<div class="detail-item">
<i class="fas fa-phone"></i>
<span>138-8888-8888</span>
</div>
</div>
</div>
</div>
</section>
<!-- 技能 -->
<section id="skills" class="section bg-light">
<div class="container">
<h2 class="section-title">专业技能</h2>
<div class="skills-grid">
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-html5"></i>
<h3>HTML5 / CSS3</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="95"></div>
</div>
</div>
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-js-square"></i>
<h3>JavaScript (ES6+)</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="90"></div>
</div>
</div>
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-react"></i>
<h3>React / Vue.js</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="85"></div>
</div>
</div>
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-node-js"></i>
<h3>Node.js</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="75"></div>
</div>
</div>
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-git-alt"></i>
<h3>Git / GitHub</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="88"></div>
</div>
</div>
<div class="skill-card">
<div class="skill-header">
<i class="fab fa-figma"></i>
<h3>UI/UX 设计</h3>
</div>
<div class="skill-bar">
<div class="skill-level" data-level="70"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 工作经历 -->
<section id="experience" class="section">
<div class="container">
<h2 class="section-title">工作经历</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>高级前端开发工程师</h3>
<h4>未来科技有限公司</h4>
<span class="timeline-date">2025年7月 - 至今</span>
<ul>
<li>负责公司核心产品Web端的架构设计与开发，优化前端性能，页面加载速度提升40%。</li>
<li>使用React和TypeScript重构了多个旧模块，提高了代码的可维护性和复用性。</li>
<li>与UI/UX设计师和后端工程师紧密合作，确保产品从设计到实现的高效落地。</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>前端开发工程师</h3>
<h4>创新网络有限公司</h4>
<span class="timeline-date">2025年6月 - 2025年6月</span>
<ul>
<li>参与多个企业级Web应用的开发，熟练使用Vue.js生态。</li>
<li>编写和维护技术文档，参与Code Review，帮助团队提升代码质量。</li>
<li>负责移动端H5页面的开发，确保在主流移动设备上的兼容性和体验。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 项目经验 -->
<section id="projects" class="section bg-light">
<div class="container">
<h2 class="section-title">项目经验</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-img">
<img src="https://via.placeholder.com/400x250" alt="项目1截图">
</div>
<div class="project-info">
<h3>智能电商平台</h3>
<p>一个基于React和Node.js构建的现代化B2C电商平台，集成了智能推荐、实时聊天和订单管理等功能。</p>
<div class="project-tags">
<span class="tag">React</span>
<span class="tag">Node.js</span>
<span class="tag">MongoDB</span>
<span class="tag">Socket.io</span>
</div>
<a href="#" class="btn btn-outline">查看详情</a>
</div>
</div>
<div class="project-card">
<div class="project-img">
<img src="https://via.placeholder.com/400x250" alt="项目2截图">
</div>
<div class="project-info">
<h3>企业级数据可视化系统</h3>
<p>为大型企业打造的数据监控与分析平台，使用ECharts实现复杂数据的可视化展示，支持实时数据更新。</p>
<div class="project-tags">
<span class="tag">Vue.js</span>
<span class="tag">ECharts</span>
<span class="tag">Element UI</span>
<span class="tag">Python</span>
</div>
<a href="#" class="btn btn-outline">查看详情</a>
</div>
</div>
</div>
</div>
</section>
<!-- 教育背景 -->
<section id="education" class="section">
<div class="container">
<h2 class="section-title">教育背景</h2>
<div class="education-container">
<div class="edu-item">
<div class="edu-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="edu-content">
<h3>计算机科学与技术 学士学位</h3>
<h4>北京大学</h4>
<span class="edu-date">2025年9月 - 2025年6月</span>
<p>主修课程：数据结构、算法分析、计算机网络、操作系统、数据库系统等。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我 -->
<section id="contact" class="section bg-light">
<div class="container">
<h2 class="section-title">联系我</h2>
<div class="contact-content">
<p>如果您对我的工作感兴趣，或者有任何问题，欢迎随时与我联系！</p>
<div class="social-links">
<a href="https://github.com" target="_blank" class="social-link"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com" target="_blank" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="https://twitter.com" target="_blank" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="mailto:zhangsan.email@example.com" class="social-link"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS 代码 (style.css)
/* --- 全局样式 --- */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--light-color: #f8f9fa;
--dark-color: #343a40;
--text-color: #333;
--bg-light: #f4f7f6;
--gradient-start: #4facfe;
--gradient-end: #00f2fe;
--section-padding: 80px 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #fff;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.2;
}
h2.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--dark-color);
position: relative;
}
h2.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
margin: 1rem auto;
border-radius: 2px;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: color 0.3s ease;
}
a:hover {
color: var(--gradient-end);
}
.btn {
display: inline-block;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary {
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
color: white;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2);
}
.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: white;
}
.btn-outline {
padding: 8px 20px;
font-size: 0.9rem;
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: transparent;
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
.section {
padding: var(--section-padding) 0;
position: relative;
}
.bg-light {
background-color: var(--bg-light);
}
/* --- 导航栏 --- */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: 15px 0;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar .nav-link {
color: var(--dark-color);
margin-left: 30px;
font-weight: 500;
transition: color 0.3s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
color: var(--primary-color);
}
/* --- 首页 / 英雄区域 --- */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
position: relative;
}
.hero-content {
max-width: 800px;
padding: 0 20px;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
margin-bottom: 2rem;
object-fit: cover;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
{
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-buttons {
margin-top: 2rem;
}
.hero-buttons .btn {
margin: 0 10px;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-20px);
}
60% {
transform: translateX(-50%) translateY(-10px);
}
}
/* --- 关于我 --- */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-text p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.about-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.detail-item {
display: flex;
align-items: center;
font-size: 1.1rem;
}
.detail-item i {
width: 30px;
color: var(--primary-color);
}
/* --- 技能 --- */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.skill-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.skill-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.skill-header i {
font-size: 2rem;
margin-right: 1rem;
color: var(--primary-color);
}
.skill-header h3 {
font-size: 1.2rem;
}
.skill-bar {
background-color: #e9ecef;
height: 10px;
border-radius: 5px;
overflow: hidden;
}
.skill-level {
height: 100%;
width: 0;
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
border-radius: 5px;
transition: width 2s ease-in-out;
}
/* --- 工作经历 --- */
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 2px;
background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
}
.timeline-item {
position: relative;
padding-bottom: 3rem;
}
.timeline-dot {
position: absolute;
left: -2.5rem;
top: 0;
width: 15px;
height: 15px;
background: var(--primary-color);
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 0 0 3px var(--gradient-start);
}
.timeline-content h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.timeline-content h4 {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0.5rem;
}
.timeline-date {
color: var(--secondary-color);
font-size: 0.9rem;
margin-bottom: 1rem;
display: block;
}
.timeline-content ul {
list-style: none;
padding-left: 0;
}
.timeline-content ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.8rem;
}
.timeline-content ul li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--primary-color);
}
/* --- 项目经验 --- */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-img img {
width: 100%;
height: 200px;
object-fit: cover;
}
.project-info {
padding: 1.5rem;
}
.project-info h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.project-info p {
margin-bottom: 1rem;
color: #666;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.tag {
background-color: var(--bg-light);
color: var(--primary-color);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
/* --- 教育背景 --- */
.education-container {
max-width: 700px;
margin: 0 auto;
}
.edu-item {
display: flex;
align-items: flex-start;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.edu-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-right: 2rem;
}
.edu-content h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.edu-content h4 {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0.5rem;
}
.edu-date {
color: var(--secondary-color);
font-size: 0.9rem;
margin-bottom: 1rem;
display: block;
}
/* --- 联系我 --- */
.contact-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.contact-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: white;
color: var(--dark-color);
border-radius: 50%;
font-size: 1.3rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-5px);
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.navbar .nav-link {
margin-left: 15px;
font-size: 0.9rem;
}
.hero h1 {
font-size: 2.5rem;
}
.subtitle {
font-size: 1.2rem;
}
.about-content,
.projects-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.edu-item {
flex-direction: column;
text-align: center;
}
.edu-icon {
margin-right: 0;
margin-bottom: 1rem;
}
h2.section-title {
font-size: 2rem;
}
}
JavaScript 代码 (script.js)
document.addEventListener('DOMContentLoaded', function () {
// --- 导航栏高亮当前部分 ---
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.navbar .nav-link');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').slice(1) === current) {
link.classList.add('active');
}
});
});
// --- 技能条动画 ---
const skillBars = document.querySelectorAll('.skill-level');
const skillsSection = document.getElementById('skills');
const animateSkillBars = () => {
skillBars.forEach(bar => {
const level = bar.getAttribute('data-level');
if (bar.style.width === '') {
bar.style.width = level + '%';
}
});
};
// 使用 Intersection Observer 来触发动画
const observerOptions = {
threshold: 0.5
};
const skillsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateSkillBars();
skillsObserver.unobserve(entry.target);
}
});
}, observerOptions);
if (skillsSection) {
skillsObserver.observe(skillsSection);
}
// --- 移动端菜单切换 (如果需要) ---
// const menuToggle = document.querySelector('.menu-toggle');
// const navbar = document.querySelector('.navbar');
// menuToggle.addEventListener('click', () => {
// navbar.classList.toggle('active');
// });
});
如何进一步自定义
- 颜色主题：在
style.css的root选择器中修改--primary-color,--gradient-start等CSS变量,即可快速更换整个网站的颜色主题。 - 字体：在
<head>中引入Google Fonts等外部字体库，然后在body的font-family属性中使用。 - 动画：可以添加更多的CSS动画或使用GSAP等专业动画库来增强视觉效果。
- 交互：JavaScript部分可以扩展，例如添加一个“回到顶部”的按钮，或者让项目经验部分的卡片有更丰富的展开/收起效果。
这个模板为您提供了一个非常专业和现代的起点，您可以根据自己的需求进行深度定制，打造出独一无二的个人简历网站,祝您求职顺利！
（图片来源网络，侵删）
（图片来源网络，侵删）
