大学生个人作品集网站模板
这个模板旨在帮助你创建一个专业、现代、且能充分展示你个人能力和项目的作品集网站。
（图片来源网络，侵删）
设计思路与核心原则
- 简洁至上：避免使用过多的动画、颜色和字体，让访问者能快速聚焦于你的作品和技能。
- 移动优先：先设计手机端显示效果，再逐步适配到平板和桌面端，现在绝大多数用户通过手机浏览。
- 个人品牌：网站就是你的“第二张名片”，配色、字体、Logo（如果有）都应保持一致，体现你的个人风格。
- 用户体验：导航清晰，加载速度快，交互流畅，让访客能轻松找到他们想看的信息。
- 内容为王：再漂亮的设计也比不上一个精彩的项目，花时间打磨你的项目描述和展示。
网站结构
一个典型的作品集网站应包含以下几个核心页面（我们将在单页模板中通过锚点实现类似效果）：
- 首页 / 首屏：你的数字名片，包含头像、姓名、一句话介绍和最重要的联系方式（如邮箱）。
- 关于我：更详细的个人介绍，包括你的背景、技能、兴趣爱好和职业目标。
- 我的项目：作品集的核心，用卡片或列表形式展示你的项目，每个项目应有标题、简介、技术栈和链接。
- 技能/技能栈：以可视化的方式（如进度条、徽章）展示你掌握的技术和工具。
- 联系方式：提供多种联系你的方式，如邮箱、社交媒体链接等。
模板代码
这是一个完整的、可以直接使用的单页HTML模板，它包含了响应式设计、平滑滚动和一些基础的交互效果。
如何使用：
- 将下面的代码复制到一个文本编辑器中（如 VS Code, Sublime Text, Notepad++）。
- 将文件另存为
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>
<!-- 引入字体图标库 (Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 全局样式和变量 --- */
:root {
--primary-color: #3498db; /* 主色调，可以修改 */
--secondary-color: #2c3e50; /* 次要色，用于文字等 */
--background-color: #ecf0f1; /* 背景色 */
--text-color: #333; /* 主要文字颜色 */
--card-bg-color: #ffffff; /* 卡片背景色 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
}
html {
scroll-behavior: smooth; /* 平滑滚动 */
}
.container {
max-width: 1100px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
h1, h2, h3 {
font-weight: 300;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; color: var(--secondary-color); text-align: center; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; }
a {
text-decoration: none;
color: var(--primary-color);
}
.btn {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}
.btn:hover {
background: #2980b9;
}
/* --- 导航栏 --- */
#main-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--card-bg-color);
color: var(--secondary-color);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#main-nav .logo {
font-size: 1.5rem;
font-weight: bold;
}
#main-nav ul {
display: flex;
list-style: none;
}
#main-nav ul li a {
color: var(--secondary-color);
padding: 0.75rem 1rem;
transition: color 0.3s ease;
}
#main-nav ul li a:hover {
color: var(--primary-color);
}
/* --- 首屏部分 --- */
#home {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
color: #fff;
}
#home h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
#home .lead {
font-size: 1.5rem;
margin-bottom: 2rem;
}
#home .hero-btns {
display: flex;
gap: 1rem;
}
#home .hero-btns a {
color: #fff;
padding: 0.8rem 1.5rem;
border: 2px solid #fff;
border-radius: 5px;
transition: all 0.3s ease;
}
#home .hero-btns a:hover {
background: #fff;
color: var(--secondary-color);
}
/* --- 关于我部分 --- */
#about {
padding: 4rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: center;
}
.about-img {
text-align: center;
}
.about-img img {
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--primary-color);
}
.about-text h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.about-text p {
margin-bottom: 1rem;
}
/* --- 项目部分 --- */
#projects {
padding: 4rem 0;
background: var(--card-bg-color);
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--background-color);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-img {
height: 200px;
overflow: hidden;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .project-img img {
transform: scale(1.1);
}
.project-info {
padding: 1.5rem;
}
.project-info h3 {
margin-bottom: 0.5rem;
}
.project-info p {
margin-bottom: 1rem;
color: #666;
}
.project-tech {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tech-tag {
background: var(--primary-color);
color: #fff;
padding: 0.2rem 0.5rem;
border-radius: 15px;
font-size: 0.8rem;
}
.project-links {
display: flex;
gap: 1rem;
}
.project-links a {
color: var(--primary-color);
font-weight: bold;
}
/* --- 技能部分 --- */
#skills {
padding: 4rem 0;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.skill-item {
background: var(--card-bg-color);
padding: 1.5rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.skill-item i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.skill-item h3 {
margin-bottom: 0.5rem;
}
.skill-bar {
background: #ddd;
height: 10px;
border-radius: 5px;
margin-top: 1rem;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: var(--primary-color);
border-radius: 5px;
width: 0; /* 初始为0，通过JS或CSS动画设置最终宽度 */
}
/* --- 联系方式部分 --- */
#contact {
padding: 4rem 0;
background: var(--card-bg-color);
text-align: center;
}
.contact-content h2 {
margin-bottom: 2rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--primary-color);
color: #fff;
border-radius: 50%;
font-size: 1.2rem;
transition: background 0.3s ease;
}
.social-links a:hover {
background: var(--secondary-color);
}
/* --- 页脚 --- */
#main-footer {
text-align: center;
padding: 1rem;
background: var(--secondary-color);
color: #fff;
}
/* --- 响应式设计 --- */
@media(max-width: 768px) {
#main-nav {
flex-direction: column;
text-align: center;
padding: 0.5rem;
}
#main-nav ul {
margin-top: 1rem;
}
#main-nav ul li {
padding: 0.5rem;
}
#home h1 {
font-size: 2.5rem;
}
.lead {
font-size: 1.2rem;
}
.hero-btns {
flex-direction: column;
align-items: center;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header id="main-nav">
<div class="container">
<a href="#home" class="logo">你的名字</a>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#projects">我的项目</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</div>
</header>
<!-- 首屏部分 -->
<section id="home">
<div class="container">
<h1>你好，我是 <span style="color: var(--primary-color);">你的名字</span></h1>
<p class="lead">一名充满热情的 [你的专业，如：前端开发工程师 / UI设计师]</p>
<div class="hero-btns">
<a href="#projects"><i class="fas fa-folder"></i> 查看作品</a>
<a href="#contact"><i class="fas fa-envelope"></i> 联系我</a>
</div>
</div>
</section>
<!-- 关于我部分 -->
<section id="about">
<div class="container">
<h2>关于我</h2>
<div class="about-content">
<div class="about-img">
<!-- --- 在这里修改你的头像 --- -->
<img src="https://via.placeholder.com/250" alt="你的头像">
</div>
<div class="about-text">
<h3>你好，很高兴认识你！</h3>
<p>
我是一名来自 [你的大学] 的 [你的专业] 大学生，我对 [你感兴趣的领域，如：Web开发、人工智能、UI设计] 有着浓厚的兴趣，并致力于通过技术创造有价值的产品。
</p>
<p>
在校期间，我不仅掌握了扎实的理论知识，还积极参与了多个实际项目，锻炼了团队协作和解决问题的能力，我相信，持续学习和不断创新是成功的关键。
</p>
<p>
除了编程，我还喜欢 [你的爱好，如：摄影、阅读、旅行]，这些爱好让我保持对世界的好奇心和创造力。
</p>
</div>
</div>
</div>
</section>
<!-- 项目部分 -->
<section id="projects">
<div class="container">
<h2>我的项目</h2>
<div class="project-grid">
<!-- 项目卡片 1 -->
<div class="project-card">
<div class="project-img">
<!-- --- 在这里修改项目1的图片 --- -->
<img src="https://via.placeholder.com/400x200" alt="项目1截图">
</div>
<div class="project-info">
<h3>项目名称 1</h3>
<p>这是一个关于 [项目简介，一句话描述项目做什么的] 的项目，它解决了 [项目解决了什么问题] 的问题。</p>
<div class="project-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
<!-- --- 添加更多技术栈 --- -->
</div>
<div class="project-links">
<!-- --- 在这里修改项目1的链接 --- -->
<a href="https://github.com/yourusername/project1" target="_blank"><i class="fab fa-github"></i> 源码</a>
<a href="https://yourproject1-demo.com" target="_blank"><i class="fas fa-external-link-alt"></i> 在线演示</a>
</div>
</div>
</div>
<!-- 项目卡片 2 -->
<div class="project-card">
<div class="project-img">
<!-- --- 在这里修改项目2的图片 --- -->
<img src="https://via.placeholder.com/400x200" alt="项目2截图">
</div>
<div class="project-info">
<h3>项目名称 2</h3>
<p>这是一个关于 [项目简介] 的项目，它展示了 [项目亮点]。</p>
<div class="project-tech">
<span class="tech-tag">React</span>
<span class="tech-tag">Node.js</span>
<span class="tech-tag">MongoDB</span>
</div>
<div class="project-links">
<!-- --- 在这里修改项目2的链接 --- -->
<a href="https://github.com/yourusername/project2" target="_blank"><i class="fab fa-github"></i> 源码</a>
<a href="https://yourproject2-demo.com" target="_blank"><i class="fas fa-external-link-alt"></i> 在线演示</a>
</div>
</div>
</div>
<!-- 项目卡片 3 (可以复制上面的卡片进行修改) -->
<div class="project-card">
<div class="project-img">
<!-- --- 在这里修改项目3的图片 --- -->
<img src="https://via.placeholder.com/400x200" alt="项目3截图">
</div>
<div class="project-info">
<h3>项目名称 3</h3>
<p>这是一个关于 [项目简介] 的项目。</p>
<div class="project-tech">
<span class="tech-tag">Vue.js</span>
<span class="tech-tag">Python</span>
<span class="tech-tag">Flask</span>
</div>
<div class="project-links">
<!-- --- 在这里修改项目3的链接 --- -->
<a href="https://github.com/yourusername/project3" target="_blank"><i class="fab fa-github"></i> 源码</a>
<!-- 如果没有在线演示，可以只留一个链接或注释掉 -->
<!-- <a href="#"><i class="fas fa-external-link-alt"></i> 在线演示</a> -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 技能部分 -->
<section id="skills">
<div class="container">
<h2>我的技能</h2>
<div class="skills-grid">
<div class="skill-item">
<i class="fab fa-html5"></i>
<h3>HTML/CSS</h3>
<p>精通语义化标签和现代布局技术</p>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-js-square"></i>
<h3>JavaScript</h3>
<p>熟悉ES6+语法和异步编程</p>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%;"></div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-react"></i>
<h3>React</h3>
<p>能够使用React构建单页应用</p>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%;"></div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-python"></i>
<h3>Python</h3>
<p>熟悉Django/Flask框架进行后端开发</p>
<div class="skill-bar">
<div class="skill-progress" style="width: 75%;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系方式部分 -->
<section id="contact">
<div class="container">
<div class="contact-content">
<h2>联系我</h2>
<p>如果你对我的作品感兴趣，或者有任何问题，欢迎随时与我联系！</p>
<a href="mailto:your.email@example.com" class="btn">发送邮件</a>
<div class="social-links">
<!-- --- 在这里修改你的社交媒体链接 --- -->
<a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/yourusername" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://dribbble.com/yourusername" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer id="main-footer">
<div class="container">
<p>© <span id="year"></span> 你的名字. All Rights Reserved.</p>
</div>
</footer>
<script>
// 动态更新年份
document.getElementById('year').textContent = new Date().getFullYear();
// 技能条动画 (当滚动到技能部分时触发)
const observerOptions = {
threshold: 0.5
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const skillBars = entry.target.querySelectorAll('.skill-progress');
skillBars.forEach(bar => {
const width = bar.style.width;
bar.style.width = '0%';
setTimeout(() => {
bar.style.width = width;
}, 200);
});
}
});
}, observerOptions);
const skillsSection = document.querySelector('#skills');
if (skillsSection) {
observer.observe(skillsSection);
}
</script>
</body>
</html>
如何进一步优化和个性化
-
添加动画和交互：
（图片来源网络，侵删）- 滚动显示：当用户滚动到某个部分时，让该部分的内容（如文字、图片）平滑地淡入或从一侧滑入，可以使用
Intersection Observer API(模板中已有一个简单的例子) 或 AOS (Animate On Scroll) 这样的库。 - 打字机效果：在首屏让“你好，我是你的名字”或你的职业介绍像打字机一样一个字一个字地出现。
- 滚动显示：当用户滚动到某个部分时，让该部分的内容（如文字、图片）平滑地淡入或从一侧滑入，可以使用
-
部署你的网站：
- GitHub Pages：这是最简单、最免费的选择，将你的
index.html和相关文件（图片、CSS、JS）上传到 GitHub 仓库，然后在仓库的Settings->Pages中选择你的分支，即可生成一个yourname.github.io的网站。 - Netlify / Vercel：这些平台也提供免费的静态网站托管，你可以直接连接你的 GitHub 仓库，它们会在你每次推送代码后自动更新你的网站。
- GitHub Pages：这是最简单、最免费的选择，将你的
-
提升专业度：
- 添加简历下载：在“关于我”或“联系我”部分，提供一个PDF格式的简历下载链接。
- 添加博客/文章：如果你有写技术博客的习惯，可以增加一个“博客”页面，展示你的思考和学习过程，这会大大加分。
- 优化项目描述：不要只写“我做了什么”，更要写“我为什么这么做”、“我遇到了什么困难”、“我是如何解决的”，使用 STAR法则（Situation, Task, Action, Result） 来描述项目，会显得非常专业。
-
SEO优化：
- 在
<head>中添加<meta name="description" content="一句关于你网站的简短描述，用于搜索引擎展示">。 - 为每个
<section>添加一个唯一的id，并为<a>标签添加name属性，方便搜索引擎索引。
- 在
这个模板为你提供了一个坚实的基础,大胆地去修改它，注入你的个性和创意，让它成为你求职路上的有力武器！祝你成功！
