第24章 个人作品集网站全栈开发

前端开发者的第二张脸 ｜ 课型：实习课 ｜ 建议课时：4节

🏠 返回总目录 / 第24章

🎯 学习目标

知识目标

  • 掌握作品集网站的信息架构
  • 掌握从设计到部署的完整流程
  • 掌握SEO基础与部署实操
  • 了解自定义域名与HTTPS

能力目标

  • 能独立完成三页面响应式作品集
  • 能把网站部署到互联网
  • 能撰写打动面试官的项目描述

德育目标

  • 培养产品思维与个人品牌意识
  • 树立诚实守信的作品呈现观

教学重点

  • 作品集内容策略
  • 响应式+语义化+交互的综合运用
  • GitHub Pages/Netlify部署

教学难点

  • 项目描述的STAR写法
  • DNS解析与HTTPS配置概念

💻 实例演示1个实例 · 可在线运行

▶ 作品集模板（单页版）

可直接改用的响应式作品集模板：英雄区+项目卡片+滚动显现。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，滚动观察项目卡片依次显现
  2. 替换成自己的姓名与项目信息
  3. 拖窄窗口验证响应式
  4. 用开发者工具观察IntersectionObserver何时添加show类
  5. 按部署流程把页面发布到GitHub Pages

效果观察点

  • IntersectionObserver替代滚动监听更高效
  • 毛玻璃导航backdrop-filter
  • auto-fill网格自适应
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="张福帅老师的前端课程作品集模板">
<title>我的名字 | 前端开发者</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: "Microsoft YaHei", sans-serif; color: #1f2a33; background: #fff; }
  nav { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,.92);
        backdrop-filter: blur(8px); padding: 14px 24px; display: flex; justify-content: space-between; z-index: 10; }
  nav a { color: #123a52; text-decoration: none; margin-left: 20px; }
  .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
          align-items: center; background: linear-gradient(135deg, #0e2a3c, #1b5a7a); color: #fff; text-align: center; padding: 20px; }
  .hero h1 { font-size: 44px; margin-bottom: 12px; }
  .hero h1 span { color: #38d6c4; }
  .btn { margin-top: 24px; background: #38d6c4; color: #0e2a3c; padding: 12px 32px;
         border-radius: 30px; text-decoration: none; font-weight: bold; }
  section { max-width: 900px; margin: 0 auto; padding: 80px 20px; }
  h2 { color: #123a52; margin-bottom: 24px; }
  .projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
  .proj { background: #f2f6f8; border-radius: 12px; padding: 22px; opacity: 0;
          transform: translateY(30px); transition: all .6s ease; }
  .proj.show { opacity: 1; transform: translateY(0); }
  .proj h3 { color: #0f8c7f; margin-bottom: 8px; }
  .tags span { background: #e7f7f4; color: #0f8c7f; font-size: 12px; padding: 3px 10px;
               border-radius: 12px; margin-right: 6px; }
</style>
</head>
<body>
  <nav><strong>我的名字</strong><div><a href="#work">作品</a><a href="#about">关于</a><a href="#contact">联系</a></div></nav>
  <header class="hero">
    <h1>你好，我是<span>未来的前端工程师</span></h1>
    <p>三亚技师学院 · 网页设计与制作 · 世赛集训队</p>
    <a class="btn" href="#work">查看我的作品</a>
  </header>
  <section id="work">
    <h2>精选作品</h2>
    <div class="projects">
      <div class="proj"><h3>七段数码管计时器</h3><p>世赛模块A三分题，纯JS实现进位算法与三按钮控制。</p><div class="tags"><span>JavaScript</span><span>CSS</span></div></div>
      <div class="proj"><h3>旋转立方体</h3><p>CSS 3D六面装配与双轴旋转动画，竞赛满分作品。</p><div class="tags"><span>CSS 3D</span></div></div>
      <div class="proj"><h3>响应式企业官网</h3><p>语义化+IntersectionObserver滚动交互的企业首页。</p><div class="tags"><span>响应式</span><span>SEO</span></div></div>
    </div>
  </section>
  <section id="about"><h2>关于我</h2><p>这里写你的故事：为什么学前端、擅长什么、目标是什么。</p></section>
  <section id="contact"><h2>联系我</h2><p>邮箱：you@example.com</p></section>
<script>
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('show'); io.unobserve(e.target); } });
  }, { threshold: 0.2 });
  document.querySelectorAll('.proj').forEach(el => io.observe(el));
</script>
</body>
</html>

📋 实习任务书

任务目标：完成个人作品集网站并部署上线

任务内容与评分
任务1：撰写三页面的内容文案（15分）
任务2：完成响应式作品集开发（35分）
任务3：用STAR法则写三个项目描述（15分）
任务4：部署到互联网并生成可访问链接（20分）
任务5：完成SEO基础设置（title/description/语义化）（15分）

自我评价

📚 课后作业与预习