项目名称：个人作品集网站
这是一个非常经典且实用的大作业选题,因为它能综合考察你对HTML、CSS、JavaScript的掌握程度，同时也能很好地展示你的审美和逻辑能力。
（图片来源网络，侵删）
项目概述与设计思路
项目目标 创建一个单页面的个人作品集网站，用于展示个人信息、技能、项目经验和联系方式，网站应具有现代化的设计、流畅的交互体验和良好的响应式布局（适配手机、平板和桌面）。
核心功能模块
- 导航栏: 固定在顶部，点击可平滑滚动到对应区域。
- 首屏区域: 包含个人简介、姓名、职业和一张引人注目的背景图。
- 关于我: 详细的个人介绍和核心技能展示。
- 项目展示: 以卡片形式展示2-3个代表性项目，包含项目名称、描述、技术栈和预览图。
- 联系方式: 提供邮箱、社交媒体链接等，并包含一个简单的联系表单。
- 页脚: 版权信息等。
设计风格
- 主题: 现代、简约、专业。
- 色彩方案: 采用深色背景搭配亮色（如蓝色、青色）作为强调色，营造科技感和专业感。
- 字体: 使用无衬线字体（如
Inter,Noto Sans SC）保证清晰度和现代感。
技术栈与实现细节
- HTML5: 语义化标签（
<header>,<nav>,<main>,<section>,<footer>,<article>）来构建页面结构。 - CSS3:
- Flexbox / Grid: 用于实现复杂的、灵活的布局。
- CSS 变量: 用于统一管理颜色、字体大小等主题样式，方便后期维护。
- 动画: 使用
@keyframes和transition实现平滑的滚动效果和悬停动画。 - 响应式设计: 使用媒体查询
@media为不同屏幕尺寸调整布局。
- JavaScript (原生):
- 事件监听: 监听滚动事件，实现导航栏高亮和返回顶部按钮的显示/隐藏。
- DOM 操作: 动态修改页面元素的样式和内容。
- 平滑滚动: 实现点击导航链接后平滑滚动到对应区域。
项目文件结构
一个清晰的项目结构是良好代码习惯的开始。
（图片来源网络，侵删）
portfolio/
├── index.html # 网站的主页面
├── css/
│ └── style.css # 所有样式文件
├── js/
│ └── script.js # 所有JavaScript脚本
├── images/
│ ├── profile.jpg # 个人头像
│ ├── project1.jpg # 项目1预览图
│ ├── project2.jpg
│ └── hero-bg.jpg # 首屏背景图
└── README.md # 项目说明文件 (可选，但推荐)核心代码实现
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="css/style.css">
<!-- 引入一个图标库，Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<header id="header" class="header">
<nav class="nav container">
<a href="#" class="nav__logo">张三</a>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active-link">首页</a></li>
<li class="nav__item"><a href="#about" class="nav__link">关于我</a></li>
<li class="nav__item"><a href="#projects" class="nav__link">项目</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">联系我</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
</header>
<main>
<!-- 首屏区域 -->
<section id="home" class="home section">
<div class="home__container container grid">
<div class="home__content">
<h1 class="home__title">你好, 我是 <span class="home__name">张三</span></h1>
<h3 class="home__subtitle">前端开发工程师</h3>
<p class="home__description">
专注于使用现代Web技术（HTML, CSS, JavaScript）构建优雅、高效的用户界面。
热爱学习，追求代码之美。
</p>
<div class="home__buttons">
<a href="#projects" class="button button--flex">查看我的作品 <i class="fas fa-arrow-right button__icon"></i></a>
<a href="#contact" class="button button--flex">联系我 <i class="fas fa-envelope button__icon"></i></a>
</div>
</div>
<div class="home__img">
<!-- 这里可以放一个SVG头像或img -->
<img src="images/profile.jpg" alt="个人头像">
</div>
</div>
</section>
<!-- 关于我 -->
<section id="about" class="about section">
<h2 class="section__title">关于我</h2>
<span class="section__subtitle">个人简介</span>
<div class="about__container container grid">
<div class="about__img">
<img src="images/profile.jpg" alt="个人头像">
</div>
<div class="about__content">
<p class="about__description">
我是一名充满激情的前端开发者，拥有3年的Web开发经验，我热衷于将复杂的问题转化为简单、优雅、直观的用户界面，我坚信，好的设计不仅要美观，更要实用。
</p>
<div class="about__info">
<div>
<span class="about__info-title">年龄:</span>
<span class="about__info-name">28</span>
</div>
<div>
<span class="about__info-title">国家:</span>
<span class="about__info-name">中国</span>
</div>
<div>
<span class="about__info-title">技能:</span>
<span class="about__info-name">HTML, CSS, JS, React</span>
</div>
</div>
<div class="about__buttons">
<a href="#" class="button button--flex">下载简历 <i class="fas fa-download button__icon"></i></a>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<section id="projects" class="projects section">
<h2 class="section__title">项目</h2>
<span class="section__subtitle">最近的作品</span>
<div class="projects__container container grid">
<!-- 项目卡片 1 -->
<article class="projects__card">
<div class="projects__img">
<img src="images/project1.jpg" alt="项目1图片">
</div>
<h3 class="projects__title">电商网站</h3>
<p class="projects__description">一个功能完整的响应式电商网站，包含商品展示、购物车和用户登录功能。</p>
<div class="projects__buttons">
<a href="#" class="projects__button button--flex">
<i class="uil uil-external-link-alt project__icon"></i> 预览
</a>
<a href="#" class="projects__button button--flex">
<i class="fab fa-github project__icon"></i> 源码
</a>
</div>
</article>
<!-- 项目卡片 2 -->
<article class="projects__card">
<div class="projects__img">
<img src="images/project2.jpg" alt="项目2图片">
</div>
<h3 class="projects__title">任务管理应用</h3>
<p class="projects__description">一个基于Vue.js开发的任务管理工具，支持拖拽排序和本地存储。</p>
<div class="projects__buttons">
<a href="#" class="projects__button button--flex">
<i class="uil uil-external-link-alt project__icon"></i> 预览
</a>
<a href="#" class="projects__button button--flex">
<i class="fab fa-github project__icon"></i> 源码
</a>
</div>
</article>
<!-- 项目卡片 3 -->
<article class="projects__card">
<div class="projects__img">
<img src="images/project3.jpg" alt="项目3图片">
</div>
<h3 class="projects__title">天气预报App</h3>
<p class="projects__description">一个使用原生JavaScript和第三方API开发的天气查询应用，界面简洁美观。</p>
<div class="projects__buttons">
<a href="#" class="projects__button button--flex">
<i class="uil uil-external-link-alt project__icon"></i> 预览
</a>
<a href="#" class="projects__button button--flex">
<i class="fab fa-github project__icon"></i> 源码
</a>
</div>
</article>
</div>
</section>
<!-- 联系我 -->
<section id="contact" class="contact section">
<h2 class="section__title">联系我</h2>
<span class="section__subtitle">让我们一起聊聊吧！</span>
<div class="contact__container container grid">
<div class="contact__content">
<h3 class="contact__title">联系信息</h3>
<div class="contact__info">
<div class="contact__card">
<i class="fas fa-envelope contact__card-icon"></i>
<h4 class="contact__card-title">邮箱</h4>
<span class="contact__card-data">zhangsan@example.com</span>
</div>
<div class="contact__card">
<i class="fab fa-github contact__card-icon"></i>
<h4 class="contact__card-title">GitHub</h4>
<span class="contact__card-data">github.com/zhangsan</span>
</div>
<div class="contact__card">
<i class="fab fa-linkedin contact__card-icon"></i>
<h4 class="contact__card-title">LinkedIn</h4>
<span class="contact__card-data">linkedin.com/in/zhangsan</span>
</div>
</div>
</div>
<div class="contact__content">
<h3 class="contact__title">发送消息</h3>
<form action="#" class="contact__form">
<div class="contact__form-div">
<input type="text" class="contact__form-input" placeholder="你的名字">
</div>
<div class="contact__form-div">
<input type="email" class="contact__form-input" placeholder="你的邮箱">
</div>
<div class="contact__form-div contact__form-area">
<textarea name="message" id="message" class="contact__form-input" placeholder="你的消息..."></textarea>
</div>
<button class="button button--flex">发送消息</button>
</form>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="footer__container container">
<span class="footer__title">张三</span>
<p class="footer__copy">© 2025 张三. All rights reserved.</p>
</div>
</footer>
<!-- 返回顶部按钮 -->
<a href="#" class="scrollup" id="scroll-up">
<i class="fas fa-arrow-up scrollup__icon"></i>
</a>
<script src="js/script.js"></script>
</body>
</html>
CSS (css/style.css)
/* --- 全局样式 --- */
:root {
--header-height: 3rem;
/* 颜色 */
--hue-color: 200; /* 蓝色系主色调 */
--first-color: hsl(var(--hue-color), 69%, 61%);
--first-color-second: hsl(var(--hue-color), 69%, 61%);
--first-color-alt: hsl(var(--hue-color), 57%, 53%);
--title-color: hsl(var(--hue-color), 8%, 15%);
--text-color: hsl(var(--hue-color), 8%, 45%);
--text-color-light: hsl(var(--hue-color), 8%, 65%);
--body-color: hsl(var(--hue-color), 20%, 95%);
--container-color: #fff;
--scrollbar-color: hsl(var(--hue-color), 12%, 90%);
--scrollbar-thumb: hsl(var(--hue-color), 12%, 50%);
/* 字体 */
--body-font: 'Inter', 'Noto Sans SC', sans-serif;
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/* 字体粗细 */
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* 边距 */
--mb-1: .5rem;
--mb-2: 1rem;
--mb-3: 1.5rem;
--mb-4: 2rem;
--mb-5: 2.5rem;
--mb-6: 3rem;
/* z-index */
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, h3, h4 {
color: var(--title-color);
font-weight: var(--font-semibold);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/* --- 通用类 --- */
.section {
padding: 4rem 0 2rem;
}
.section__title {
font-size: var(--h1-font-size);
color: var(--title-color);
margin-bottom: var(--mb-2);
}
.section__subtitle {
display: block;
font-size: var(--small-font-size);
color: var(--first-color);
margin-bottom: var(--mb-3);
}
.container {
max-width: 968px;
margin-left: 1rem;
margin-right: 1rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
/* --- 按钮样式 --- */
.button {
display: inline-block;
background-color: var(--first-color);
color: #fff;
padding: .75rem 1.5rem;
border-radius: .5rem;
font-weight: var(--font-medium);
transition: .3s;
}
.button:hover {
background-color: var(--first-color-alt);
}
.button--flex {
display: inline-flex;
align-items: center;
column-gap: .5rem;
}
.button__icon {
font-size: 1.25rem;
}
/* --- 导航栏 --- */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
color: var(--title-color);
font-weight: var(--font-bold);
}
.nav__toggle {
font-size: 1.2rem;
cursor: pointer;
color: var(--title-color);
display: none; /* 默认在桌面端隐藏 */
}
.nav__list {
display: flex;
column-gap: 2rem;
}
.nav__link {
color: var(--text-color);
font-weight: var(--font-medium);
transition: .3s;
}
.nav__link:hover, .nav__link.active-link {
color: var(--first-color);
}
/* --- 首屏 --- */
.home__container {
gap: 2rem;
}
.home__content {
padding-top: 5rem;
row-gap: 2.5rem;
}
.home__name {
color: var(--first-color);
font-size: var(--big-font-size);
font-weight: var(--font-bold);
}
.home__subtitle {
font-size: var(--h3-font-size);
color: var(--text-color);
font-weight: var(--font-medium);
margin-bottom: var(--mb-1);
}
.home__description {
max-width: 400px;
color: var(--text-color-light);
}
.home__buttons {
display: flex;
gap: 1rem;
}
.home__img {
position: relative;
justify-self: center;
}
.home__img img {
width: 250px;
border-radius: 50%;
box-shadow: 0 8px 24px hsla(var(--hue-color), 69%, 61%, .3);
}
/* --- 关于我 --- */
.about__img {
width: 200px;
border-radius: .5rem;
margin-bottom: var(--mb-2);
}
.about__description {
text-align: center;
margin-bottom: var(--mb-3);
}
.about__info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
text-align: center;
margin-bottom: var(--mb-3);
}
.about__info-title {
font-size: var(--h2-font-size);
color: var(--title-color);
font-weight: var(--font-bold);
}
.about__info-name {
font-size: var(--small-font-size);
color: var(--text-color-light);
}
/* --- 项目 --- */
.projects__container {
gap: 1.5rem;
}
.projects__card {
background-color: var(--container-color);
border-radius: .5rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform .3s, box-shadow .3s;
}
.projects__card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.projects__img {
width: 100%;
height: 200px;
object-fit: cover;
}
.projects__title {
font-size: var(--h3-font-size);
margin: var(--mb-2) 0;
}
.projects__description {
color: var(--text-color-light);
}
.projects__buttons {
display: flex;
gap: .5rem;
margin-top: var(--mb-2);
}
.projects__button {
color: var(--first-color);
font-size: 1.25rem;
transition: .3s;
}
.projects__button:hover {
color: var(--first-color-alt);
}
/* --- 联系我 --- */
.contact__content {
display: grid;
gap: 2rem;
}
.contact__title {
font-size: var(--h3-font-size);
color: var(--title-color);
margin-bottom: var(--mb-2);
}
.contact__info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact__card {
background-color: var(--container-color);
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.contact__card-icon {
font-size: 1.5rem;
color: var(--first-color);
margin-bottom: var(--mb-1);
}
.contact__card-title {
font-size: var(--h3-font-size);
color: var(--title-color);
}
.contact__card-data {
color: var(--text-color-light);
}
.contact__form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact__form-div {
position: relative;
}
.contact__form-input {
width: 100%;
padding: 1rem;
border: 2px solid var(--text-color-light);
border-radius: .5rem;
outline: none;
font-size: var(--normal-font-size);
transition: border .3s;
}
.contact__form-input:focus {
border: 2px solid var(--first-color);
}
.contact__form-area {
display: flex;
align-items: flex-start;
padding: 0;
}
.contact__form-area textarea {
min-height: 150px;
resize: none;
padding-top: 1rem;
}
/* --- 页脚 --- */
.footer {
background-color: var(--container-color);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.footer__container {
padding: 2rem 0;
text-align: center;
}
.footer__copy {
color: var(--text-color-light);
margin-bottom: .5rem;
}
/* --- 返回顶部按钮 --- */
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%; /* 初始在视口外 */
background-color: var(--first-color);
color: #fff;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: .5rem;
font-size: 1.25rem;
cursor: pointer;
opacity: 0;
transition: .3s;
z-index: var(--z-fixed);
}
.scrollup:hover {
background-color: var(--first-color-alt);
}
.scrollup.show-scroll {
bottom: 5rem;
opacity: 1;
}
/* --- 响应式设计 --- */
/* 小屏幕 (手机) */
@media screen and (max-width: 768px) {
:root {
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
}
.nav__menu {
position: fixed;
top: var(--header-height);
right: -100%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--body-color);
box-shadow: -2px 0 4px rgba(0,0,0,.1);
transition: .3s;
z-index: var(--z-fixed);
}
.nav__menu.active {
right: 0;
}
.nav__toggle {
display: block;
color: var(--title-color);
}
.nav__list {
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.nav__link {
color: var(--title-color);
font-size: var(--h2-font-size);
}
.home__content {
padding-top: 7rem;
row-gap: 2rem;
}
.home__img {
width: 200px;
}
.about__info {
grid-template-columns: 1fr;
}
.contact__form {
width: 100%;
}
}
/* 中等屏幕 (平板) */
@media screen and (min-width: 769px) and (max-width: 1200px) {
.container {
margin-left: auto;
margin-right: auto;
}
}
JavaScript (js/script.js)
// --- 导航栏 ---
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navLinks = document.querySelectorAll('.nav__link')
// 显示/隐藏移动端菜单
if (navToggle) {
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active')
})
}
// 点击菜单链接后关闭移动端菜单
navLinks.forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active')
})
})
// --- 滚动时高亮导航链接 ---
// 获取所有section的id
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
const scrollY = window.pageYOffset
sections.forEach(current => {
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 100,
sectionId = current.getAttribute('id')
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector('.nav__link[href*=' + sectionId + ']').classList.add('active-link')
} else {
document.querySelector('.nav__link[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)
// --- 返回顶部按钮 ---
const scrollUp = document.getElementById('scroll-up')
function scrollUpShow() {
if (window.scrollY >= 560) {
scrollUp.classList.add('show-scroll')
} else {
scrollUp.classList.remove('show-scroll')
}
}
window.addEventListener('scroll', scrollUpShow)
// --- 联系表单提交 (简单示例) ---
const contactForm = document.querySelector('.contact__form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交行为
// 这里可以添加表单验证逻辑
const nameInput = this.querySelector('input[type="text"]');
const emailInput = this.querySelector('input[type="email"]');
const messageInput = this.querySelector('textarea');
if (nameInput.value && emailInput.value && messageInput.value) {
alert('感谢您的留言！我会尽快回复您。');
this.reset(); // 清空表单
} else {
alert('请填写所有必填项。');
}
});
}
如何扩展与优化（加分项）
- 增加动画效果： 使用
AOS (Animate On Scroll)库为各个区域添加进入视口时的滚动动画。 - 实现真实表单提交： 使用
Netlify、Formspree或后端技术（如 Node.js + Express）让联系表单能够真正发送邮件。 - 添加暗黑模式： 使用 CSS 变量和 JavaScript 切换主题，增加用户体验。
- 优化性能： 对图片进行压缩和懒加载，减少页面加载时间。
- 增加更多交互： 为项目卡片添加点击放大查看详情的功能，或者使用
Chart.js展示技能熟练度图表。 - 完善响应式： 针对更小或更大的屏幕进行更细致的布局调整。
- 使用构建工具： 对于更复杂的项目，可以尝试使用
Vite或Webpack来管理资源、压缩代码和优化构建流程。
这个范例为你提供了一个坚实的基础,你可以在此基础上进行修改、添加和创造，最终完成一个属于你自己的、独一无二的作品集网站，祝你大作业顺利！
（图片来源网络，侵删）
