- 个人简介：姓名、职位、一句话介绍。
- 关于我：详细的个人介绍和核心优势。
- 技能展示：以进度条或星级形式展示技能水平。
- 项目/作品集：展示您的代表性项目。
- 联系方式：社交媒体链接和邮箱。
这个模板使用了 Bootstrap 5 框架来快速构建响应式布局，并添加了一些自定义 CSS 和 JavaScript 来增强视觉效果和交互性。
（图片来源网络，侵删）
最终预览效果
这是一个静态图片，展示了模板在桌面上的布局和风格，您可以直接复制下面的代码到 .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>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<style>
:root {
--primary-color: #6366f1; /* 一个现代的靛蓝色 */
--secondary-color: #f3f4f6; /* 浅灰色背景 */
--text-color: #1f2937; /* 深灰色文字 */
--accent-color: #ec4899; /* 粉色作为强调色 */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--text-color);
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand {
font-weight: bold;
color: var(--primary-color) !important;
}
.nav-link {
color: var(--text-color) !important;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--primary-color) !important;
}
/* 英雄区域样式 */
.hero-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 0;
text-align: center;
}
.hero-section h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero-section .lead {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid white;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* 关于我区域样式 */
.about-section {
padding: 80px 0;
}
.about-section h2 {
color: var(--primary-color);
margin-bottom: 2rem;
}
/* 技能区域样式 */
.skills-section {
background-color: var(--secondary-color);
padding: 80px 0;
}
.skills-section h2 {
color: var(--primary-color);
margin-bottom: 2rem;
}
.skill-item {
margin-bottom: 1.5rem;
}
.skill-bar {
height: 10px;
background-color: #e5e7eb;
border-radius: 5px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background-color: var(--primary-color);
border-radius: 5px;
width: 0; /* 初始为0，由JS动画控制 */
transition: width 2s ease-in-out;
}
.skill-percentage {
text-align: right;
font-weight: bold;
color: var(--primary-color);
}
/* 项目区域样式 */
.projects-section {
padding: 80px 0;
}
.projects-section h2 {
color: var(--primary-color);
margin-bottom: 2rem;
}
.project-card {
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.project-img {
height: 200px;
object-fit: cover;
}
/* 联系方式区域样式 */
.contact-section {
background-color: var(--secondary-color);
padding: 80px 0;
}
.contact-section h2 {
color: var(--primary-color);
margin-bottom: 2rem;
}
.social-links a {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: white;
color: var(--text-color);
border-radius: 50%;
margin: 0 10px;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-5px);
}
/* 页脚样式 */
footer {
background-color: #1f2937;
color: white;
text-align: center;
padding: 20px 0;
}
/* 响应式调整 */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2.5rem;
}
.hero-section .lead {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">张三</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#about">关于我</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">技能</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">项目</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">联系我</a></li>
</ul>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section id="home" class="hero-section">
<div class="container">
<img src="https://via.placeholder.com/200" alt="个人头像" class="profile-img mb-4">
<h1>张三</h1>
<p class="lead">前端开发工程师 & UI/UX 设计爱好者</p>
<a href="#about" class="btn btn-light btn-lg">了解更多</a>
</div>
</section>
<!-- 关于我 -->
<section id="about" class="about-section">
<div class="container">
<h2 class="text-center">关于我</h2>
<div class="row align-items-center">
<div class="col-lg-6">
<p>你好！我是张三，一名充满激情的前端开发工程师，拥有超过5年的行业经验，我专注于使用现代Web技术（如 React, Vue, TypeScript）构建快速、响应式且用户友好的Web应用程序。</p>
<p>我热爱将复杂的问题转化为简洁、优雅的代码和设计，我相信，好的产品不仅功能强大，更应该给用户带来愉悦的体验，在工作中，我注重团队协作，乐于分享知识，并持续学习新技术，以保持在行业前沿。</p>
<p>我的核心优势在于将设计稿精准地实现为代码，并确保在各种设备和浏览器上都能提供一致且流畅的用户体验。</p>
</div>
<div class="col-lg-6">
<h4>我的优势</h4>
<ul>
<li>精通 HTML5, CSS3, JavaScript (ES6+)</li>
<li>熟练使用 React, Vue.js 等主流前端框架</li>
<li>熟悉 Webpack, Vite 等构建工具</li>
<li>具备良好的代码风格和Git协作习惯</li>
<li>具备一定的UI/UX设计能力</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 技能展示 -->
<section id="skills" class="skills-section">
<div class="container">
<h2 class="text-center">我的技能</h2>
<div class="row">
<div class="col-md-6">
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>HTML / CSS</span>
<span class="skill-percentage">95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="95%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>JavaScript / TypeScript</span>
<span class="skill-percentage">90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="90%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>React / Next.js</span>
<span class="skill-percentage">85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="85%"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>Vue.js / Nuxt.js</span>
<span class="skill-percentage">80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="80%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>Node.js / Express</span>
<span class="skill-percentage">75%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="75%"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>UI/UX 设计</span>
<span class="skill-percentage">70%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-width="70%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<section id="projects" class="projects-section">
<div class="container">
<h2 class="text-center">我的项目</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card project-card">
<img src="https://via.placeholder.com/400x200?text=项目1" class="card-img-top project-img" alt="项目1">
<div class="card-body">
<h5 class="card-title">电商平台重构</h5>
<p class="card-text">使用 React 和 Redux 重构了公司核心电商平台，提升了页面加载速度40%，优化了用户购物流程。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card project-card">
<img src="https://via.placeholder.com/400x200?text=项目2" class="card-img-top project-img" alt="项目2">
<div class="card-body">
<h5 class="card-title">数据可视化大屏</h5>
<p class="card-text">基于 Vue 和 ECharts 为客户开发了一个实时数据监控大屏，实现了复杂数据的动态可视化展示。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card project-card">
<img src="https://via.placeholder.com/400x200?text=项目3" class="card-img-top project-img" alt="项目3">
<div class="card-body">
<h5 class="card-title">移动端App</h5>
<p class="card-text">使用 React Native 开发了一款跨平台移动应用，覆盖了iOS和Android，用户反响良好。</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系方式 -->
<section id="contact" class="contact-section">
<div class="container">
<h2 class="text-center">联系我</h2>
<p class="text-center mb-4">如果您对我的工作感兴趣，或者有任何问题，欢迎随时与我联系！</p>
<div class="text-center">
<a href="mailto:zhangsan@example.com" class="btn btn-outline-primary btn-lg me-3">
<i class="bi bi-envelope-fill"></i> 发送邮件
</a>
<a href="tel:+8613800138000" class="btn btn-outline-primary btn-lg">
<i class="bi bi-telephone-fill"></i> 电话联系
</a>
</div>
<div class="social-links text-center mt-4">
<a href="#"><i class="bi bi-github"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
<a href="#"><i class="bi bi-wechat"></i></a>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2025 张三. All rights reserved.</p>
</div>
</footer>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 技能条动画
document.addEventListener('DOMContentLoaded', function() {
const skillBars = document.querySelectorAll('.skill-progress');
// 使用 Intersection Observer API 来检测元素是否进入视口
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const bar = entry.target;
const width = bar.getAttribute('data-width');
bar.style.width = width;
// 动画结束后，停止观察该元素
observer.unobserve(bar);
}
});
}, {
threshold: 0.5 // 当元素50%可见时触发
});
skillBars.forEach(bar => {
observer.observe(bar);
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
// 减去导航栏的高度，避免内容被遮挡
const offsetTop = target.offsetTop - 80;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
});
</script>
</body>
</html>
如何使用和自定义
- 保存文件：将上面的完整代码复制并粘贴到一个新的文本文件中，将其命名为
index.html。 - 打开预览：直接用 Chrome、Firefox 等现代浏览器打开这个
index.html文件,你就能看到一个完整的个人介绍网页。 - ：
- 个人信息：将所有
张三替换成你的名字，前端开发工程师 & UI/UX 设计爱好者替换成你的职位和简介。 - 头像：将
<img src="https://via.placeholder.com/200" ...>中的src属性值替换为你自己头像图片的URL或本地路径。 - 关于我：修改 "关于我" 和 "我的优势" 部分的文字,使其符合你的实际情况。
- 技能：在 "我的技能" 部分，修改技能名称和百分比数值，如果你想用星级显示,可以修改HTML结构和CSS样式。
- 项目：将 "我的项目" 部分的图片、标题、描述和链接替换成你自己的项目信息。
- 联系方式：将邮箱地址
zhangsan@example.com和电话号码+8613800138000替换成你自己的,社交媒体链接也请相应修改。
- 个人信息：将所有
- 调整样式：
- 你可以直接在
<style>标签内修改颜色、字体大小、间距等。 - 我使用了 CSS变量（
--primary-color），如果你想改变主题色，只需修改<style>标签开头的root部分即可,非常方便。
- 你可以直接在
技术亮点说明
- 响应式设计：使用 Bootstrap 5 的栅格系统，确保网页在手机、平板和电脑上都有良好的显示效果。
- 现代美观：采用了渐变背景、卡片式布局、悬停效果和阴影，让页面看起来更专业、更有层次感。
- 平滑滚动：点击导航链接时，页面会平滑滚动到对应部分，而不是瞬间跳转,体验更佳。
- 技能条动画：当用户滚动到“技能”区域时，技能条会从0%开始动态填充到目标百分比，增加了页面的趣味性和视觉吸引力，这个效果是通过 Intersection Observer API 实现的，它可以在元素进入视口时触发动画,性能更好。
- 交互性：项目卡片和社交媒体图标都有悬停效果,引导用户进行交互。
这个模板为你提供了一个非常棒的起点，你可以根据自己的需求轻松地进行修改和扩展,打造出独一无二的个人品牌形象。
（图片来源网络，侵删）
