<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
--text-dark: #2c3e50;
--text-light: #7f8c8d;
--bg-light: #ecf0f1;
--bg-white: #ffffff;
--shadow: 0 2px 10px rgba(0,0,0,0.1);
--shadow-hover: 0 5px 20px rgba(0,0,0,0.15);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
/* 导航栏 */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(--shadow);
z-index: 1000;
transition: all 0.3s ease;
}
nav.scrolled {
padding: 10px 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--secondary-color);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* 主容器 */
.container {
max-width: 1200px;
margin: 80px auto 20px;
padding: 20px;
}
/* 个人信息部分 */
.hero-section {
background: var(--bg-white);
border-radius: 20px;
padding: 60px;
margin-bottom: 30px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
transform: translate(100px, -100px);
opacity: 0.1;
}
.hero-content {
display: flex;
align-items: center;
gap: 50px;
position: relative;
z-index: 1;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--secondary-color);
box-shadow: var(--shadow);
transition: transform 0.3s ease;
}
.profile-img:hover {
transform: scale(1.05);
}
.hero-text h1 {
font-size: 3rem;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.8s ease;
}
.hero-text .subtitle {
font-size: 1.3rem;
color: var(--text-light);
margin-bottom: 20px;
animation: fadeInUp 0.8s ease 0.2s both;
}
.contact-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
animation: fadeInUp 0.8s ease 0.4s both;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-dark);
}
.contact-item i {
color: var(--secondary-color);
font-size: 1.2rem;
}
/* 通用卡片样式 */
.section-card {
background: var(--bg-white);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.section-title {
font-size: 2rem;
margin-bottom: 30px;
color: var(--primary-color);
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 教育背景 */
.education-item {
display: flex;
gap: 30px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--bg-light);
position: relative;
}
.education-item:last-child {
border-bottom: none;
}
.edu-year {
min-width: 100px;
padding: 10px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
text-align: center;
font-weight: bold;
}
.edu-details h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--primary-color);
}
.edu-details .school {
color: var(--secondary-color);
font-weight: 600;
margin-bottom: 10px;
}
.edu-details .description {
color: var(--text-light);
line-height: 1.8;
}
/* 技能部分 */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.skill-category {
background: var(--bg-light);
padding: 25px;
border-radius: 15px;
transition: transform 0.3s ease;
}
.skill-category:hover {
transform: translateY(-5px);
}
.skill-category h3 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.skill-category i {
color: var(--secondary-color);
}
.skill-item {
margin-bottom: 15px;
}
.skill-name {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-weight: 500;
}
.skill-bar {
height: 8px;
background: var(--bg-white);
border-radius: 10px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
animation: fillBar 1.5s ease;
}
/* 项目经验 */
.project-item {
background: var(--bg-light);
padding: 30px;
border-radius: 15px;
margin-bottom: 25px;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.project-item:hover {
border-left-color: var(--secondary-color);
transform: translateX(10px);
}
.project-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 15px;
}
.project-title {
font-size: 1.3rem;
color: var(--primary-color);
margin-bottom: 5px;
}
.project-role {
color: var(--secondary-color);
font-weight: 600;
}
.project-date {
color: var(--text-light);
font-size: 0.9rem;
}
.project-description {
color: var(--text-dark);
line-height: 1.8;
margin-bottom: 15px;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
padding: 5px 15px;
background: var(--bg-white);
border-radius: 20px;
font-size: 0.85rem;
color: var(--text-dark);
border: 1px solid var(--bg-light);
transition: all 0.3s ease;
}
.tag:hover {
background: var(--secondary-color);
color: white;
transform: scale(1.05);
}
/* 获奖情况 */
.awards-list {
display: grid;
gap: 20px;
}
.award-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: var(--bg-light);
border-radius: 15px;
transition: all 0.3s ease;
}
.award-item:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
transform: translateX(10px);
}
.award-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.award-details h3 {
color: var(--primary-color);
margin-bottom: 5px;
}
.award-details p {
color: var(--text-light);
font-size: 0.9rem;
}
/* 页脚 */
footer {
background: var(--bg-white);
padding: 40px;
text-align: center;
border-radius: 20px;
margin-top: 50px;
box-shadow: var(--shadow);
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.social-links a {
width: 50px;
height: 50px;
background: var(--bg-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dark);
font-size: 1.3rem;
transition: all 0.3s ease;
}
.social-links a:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-5px);
}
/* 动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fillBar {
from {
width: 0;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
flex-direction: column;
padding: 20px;
box-shadow: var(--shadow);
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: block;
}
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-text h1 {
font-size: 2rem;
}
.education-item {
flex-direction: column;
}
.skills-grid {
grid-template-columns: 1fr;
}
.project-header {
flex-direction: column;
}
.container {
padding: 10px;
}
.hero-section, .section-card {
padding: 30px 20px;
}
}
/* 打印样式 */
@media print {
nav, footer {
display: none;
}
body {
background: white;
}
.container {
margin: 0;
max-width: 100%;
}
.section-card {
box-shadow: none;
border: 1px solid #ddd;
page-break-inside: avoid;
}
}
/* 滚动显示动画 */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav id="navbar">
<div class="nav-container">
<div class="nav-logo">张明远</div>
<ul class="nav-links" id="navLinks">
<li><a href="#about">关于我</a></li>
<li><a href="#education">教育背景</a></li>
<li><a href="#skills">专业技能</a></li>
<li><a href="#projects">项目经验</a></li>
<li><a href="#awards">获奖情况</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
<div class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- 主容器 -->
<div class="container">
<!-- 个人信息部分 -->
<section class="hero-section" id="about">
<div class="hero-content">
<img src="https://picsum.photos/seed/economist/200/200" alt="个人照片" class="profile-img">
<div class="hero-text">
<h1>张明远</h1>
<p class="subtitle">经济学专业 | 研究方向：宏观经济与金融市场</p>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>zhangmingyuan@email.com</span>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>+86 138 0000 0000</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>重庆市两江新区</span>
</div>
<div class="contact-item">
<i class="fab fa-linkedin"></i>
<span>linkedin.com/in/zhangmingyuan</span>
</div>
</div>
</div>
</div>
</section>
<!-- 教育背景 -->
<section class="section-card fade-in" id="education">
<h2 class="section-title">
<i class="fas fa-graduation-cap"></i> 教育背景
</h2>
<div class="education-item">
<div class="edu-year">2021-2024</div>
<div class="edu-details">
<h3>经济学硕士</h3>
<p class="school">北京大学 经济学院</p>
<p class="description">
主修课程：高级宏观经济学、计量经济学、金融市场学、国际经济学、产业组织理论<br>
GPA: 3.8/4.0 | 排名: 前5%<br>
研究方向：货币政策传导机制、金融市场波动性分析
</p>
</div>
</div>
<div class="education-item">
<div class="edu-year">2017-2021</div>
<div class="edu-details">
<h3>经济学学士</h3>
<p class="school">中国人民大学 经济学院</p>
<p class="description">
主修课程：微观经济学、宏观经济学、统计学、会计学、金融学<br>
GPA: 3.7/4.0 | 荣获优秀毕业生称号<br>
毕业论文：《数字经济对传统产业转型升级的影响研究》获优秀论文奖
</p>
</div>
</div>
</section>
<!-- 专业技能 -->
<section class="section-card fade-in" id="skills">
<h2 class="section-title">
<i class="fas fa-chart-line"></i> 专业技能
</h2>
<div class="skills-grid">
<div class="skill-category">
<h3><i class="fas fa-brain"></i> 经济分析</h3>
<div class="skill-item">
<div class="skill-name">
<span>宏观经济分析</span>
<span>95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>产业经济分析</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>金融市场分析</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-laptop-code"></i> 技术工具</h3>
<div class="skill-item">
<div class="skill-name">
<span>Stata</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>R语言</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>Python</span>
<span>80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-language"></i> 语言能力</h3>
<div class="skill-item">
<div class="skill-name">
<span>英语</span>
<span>95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>日语</span>
<span>70%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 70%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 项目经验 -->
<section class="section-card fade-in" id="projects">
<h2 class="section-title">
<i class="fas fa-project-diagram"></i> 项目经验
</h2>
<div class="project-item">
<div class="project-header">
<div>
<h3 class="project-title">中国货币政策传导机制研究</h3>
<p class="project-role">项目负责人</p>
</div>
<span class="project-date">2023.03 - 2023.12</span>
</div>
<p class="project-description">
运用VAR模型和脉冲响应函数，分析中国货币政策对实体经济的影响路径。收集2010-2022年季度数据，
构建包含利率、汇率、信贷规模、GDP等变量的向量自回归模型。研究发现货币政策通过信贷渠道的传导效果最为显著，
为央行政策制定提供了实证依据。
</p>
<div class="project-tags">
<span class="tag">VAR模型</span>
<span class="tag">Stata</span>
<span class="tag">货币政策</span>
<span class="tag">实证分析</span>
</div>
</div>
<div class="project-item">
<div class="project-header">
<div>
<h3 class="project-title">数字经济发展指数构建与区域比较</h3>
<p class="project-role">核心研究员</p>
</div>
<span class="project-date">2022.09 - 2023.02</span>
</div>
<p class="project-description">
参与构建中国数字经济发展综合评价体系，涵盖数字基础设施、数字产业化、产业数字化、数字治理四个维度。
采用熵值法确定权重，对全国31个省市进行综合评价。研究成果发表在《经济研究》期刊，
为地方政府制定数字经济发展战略提供参考。
</p>
<div class="project-tags">
<span class="tag">指标体系</span>
<span class="tag">熵值法</span>
<span class="tag">区域经济</span>
<span class="tag">数字经济</span>
</div>
</div>
<div class="project-item">
<div class="project-header">
<div>
<h3 class="project-title">金融市场波动性与投资者情绪研究</h3>
<p class="project-role">研究助理</p>
</div>
<span class="project-date">2022.03 - 2022.08</span>
</div>
<p class="project-description">
利用GARCH模型研究A股市场波动性特征，结合社交媒体数据分析投资者情绪对市场波动的影响。
开发Python爬虫程序收集微博、东方财富等平台的投资者情绪数据，构建情绪指数。
研究发现投资者情绪是影响市场短期波动的重要因素。
</p>
<div class="project-tags">
<span class="tag">GARCH模型</span>
<span class="tag">Python</span>
<span class="tag">文本分析</span>
<span class="tag">行为金融</span>
</div>
</div>
</section>
<!-- 获奖情况 -->
<section class="section-card fade-in" id="awards">
<h2 class="section-title">
<i class="fas fa-trophy"></i> 获奖情况
</h2>
<div class="awards-list">
<div class="award-item">
<div class="award-icon">
<i class="fas fa-medal"></i>
</div>
<div class="award-details">
<h3>国家奖学金</h3>
<p>教育部 | 2023年 | 全国前1%</p>
</div>
</div>
<div class="award-item">
<div class="award-icon">
<i class="fas fa-award"></i>
</div>
<div class="award-details">
<h3>全国大学生经济论坛一等奖</h3>
<p>中国经济学年会 | 2022年 | 最佳论文奖</p>
</div>
</div>
<div class="award-item">
<div class="award-icon">
<i class="fas fa-star"></i>
</div>
<div class="award-details">
<h3>北京大学优秀研究生</h3>
<p>北京大学 | 2023年 | 学术科研类</p>
</div>
</div>
<div class="award-item">
<div class="award-icon">
<i class="fas fa-certificate"></i>
</div>
<div class="award-details">
<h3>挑战杯创业计划竞赛银奖</h3>
<p>共青团中央 | 2021年 | 经济金融类</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer id="contact">
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
<p>© 2024 张明远. All rights reserved.</p>
<p style="margin-top: 10px; color: var(--text-light);">
<i class="fas fa-code"></i> Designed with HTML & CSS
</p>
</footer>
</div>
<script>
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// 移动端菜单切换
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.getElementById('navLinks');
menuToggle.addEventListener('click', function() {
navLinks.classList.toggle('active');
const icon = menuToggle.querySelector('i');
if (navLinks.classList.contains('active')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// 关闭移动端菜单
navLinks.classList.remove('active');
const icon = menuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
});
// 滚动显示动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// 技能条动画
const skillObserver = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const progressBars = entry.target.querySelectorAll('.skill-progress');
progressBars.forEach(bar => {
const width = bar.style.width;
bar.style.width = '0';
setTimeout(() => {
bar.style.width = width;
}, 100);
});
}
});
}, observerOptions);
const skillsSection = document.querySelector('#skills');
if (skillsSection) {
skillObserver.observe(skillsSection);
}
// 打印功能
function printResume() {
window.print();
}
// 添加打印按钮（可选）
const printBtn = document.createElement('button');
printBtn.innerHTML = '<i class="fas fa-print"></i> 打印简历';
printBtn.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
padding: 15px 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
z-index: 999;
`;
printBtn.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
printBtn.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
printBtn.addEventListener('click', printResume);
document.body.appendChild(printBtn);
// 隐藏打印按钮（打印时）
window.addEventListener('beforeprint', function() {
printBtn.style.display = 'none';
});
window.addEventListener('afterprint', function() {
printBtn.style.display = 'block';
});
</script>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
// 示例代码
console.log(["Hello 笔.COOL 控制台"])