从零构建现代化个人作品集网站：技术选型、架构设计与性能优化实战

1. 项目概述与核心价值

最近在GitHub上看到一个挺有意思的项目，叫“YasirAwan4831/arch-technologies-internship-task-1-portfolio-website”。光看这个仓库名，信息量其实不小。这明显是一个实习生的任务项目，来自一家叫“Arch Technologies”的公司，任务编号是“Task 1”，内容是要做一个个人作品集网站。对于很多刚入行前端开发，或者正在找实习、找工作的同学来说，这种“任务式”的项目非常典型，它不像一个完整的商业产品那样复杂，但麻雀虽小，五脏俱全，恰恰是检验和展示你基础技能、工程化思维和审美能力的绝佳舞台。

这个项目本质上是一个静态的个人作品集网站。你可能觉得，现在各种建站工具、模板那么多，做个展示页有什么难的？但恰恰是这种看似简单的项目，最能看出一个开发者的功底。它要求你不仅要会写HTML、CSS、JavaScript，还要考虑响应式设计、性能优化、代码结构、版本控制，甚至是一点点部署上线的流程。对于实习生或者初级开发者而言，能清晰、漂亮、稳定地完成这样一个作品集网站，本身就是一份强有力的简历。它向潜在的雇主或团队展示了你的动手能力、对细节的关注以及完成一个完整开发闭环的潜力。

接下来，我会以一个过来人的视角，深度拆解构建这样一个作品集网站所涉及的核心技术栈、设计思路、开发过程中的关键决策点，以及那些新手最容易踩的坑。无论你是正在完成类似任务的实习生，还是想自己动手搭建一个线上名片的前端爱好者，这篇文章都能给你提供一份从零到一、可直接参考的实操指南。

2. 技术栈选型与项目架构设计

2.1 核心技术与工具链解析

面对“搭建一个作品集网站”这个需求，技术选型是第一道坎。现在的选择太多了，从纯手写三件套到各种重型框架，让人眼花缭乱。对于实习任务或个人作品集这类项目，我的核心建议是：在满足需求的前提下，选择最主流、最能体现你技术视野、同时又能保证可控性的方案。

首先，基础三件套（HTML5, CSS3, JavaScript ES6+）是毋庸置疑的基石。任何前端项目都绕不开它们。但在这个基础上，我们可以引入一些现代工具来提升开发效率和代码质量。

1. 构建工具与包管理器：我强烈推荐使用Vite作为构建工具，而不是传统的 Webpack。Vite 的优势在于极快的冷启动和热更新速度，对于开发体验是质的提升。它原生支持 ES Module，配置极其简单。与之配套的，包管理器选择npm或yarn都可以，目前社区更倾向于pnpm，因为它磁盘空间利用率和安装速度更有优势。在项目根目录初始化后，能清晰管理项目依赖。

2. 前端框架/库的选择：这是关键决策点。对于作品集网站，内容相对固定，交互以展示为主，是否需要 React、Vue 这样的重型框架？

   • 纯静态方案：如果网站几乎没有动态交互（比如复杂的表单、状态管理），纯 HTML/CSS/JS 配合 Vite 是完全可行的，甚至更轻量。你可以用一些 CSS 框架（如 Tailwind CSS）来加速样式开发。
   • React/Vue 方案：如果你想展示对现代前端框架的掌握，或者预计未来网站会有更多交互模块（比如博客系统、项目过滤器），那么引入 React 或 Vue 是合理的。考虑到任务的普遍性和求职的适用性，React可能是更安全的选择，因为它生态更庞大，市场需求也最广。使用create-vite模板可以快速搭建一个 React + TypeScript 的项目骨架。
   • 静态站点生成器：像Next.js(React) 或Nuxt.js(Vue) 这类框架，提供了服务端渲染和静态生成的能力。对于作品集这种内容驱动型网站，它们能带来更好的SEO和首屏性能。如果你的任务要求或你个人想挑战更优的架构，Next.js 会是一个亮眼的加分项。

3. 样式方案：CSS 的方案也很多。

   • 传统CSS/SCSS：对初学者最友好，能完整地练习CSS布局、选择器、动画等核心知识。SCSS提供了变量、嵌套、混合等特性，让样式更易维护。
   • CSS-in-JS：如 Styled-components 或 Emotion，适合 React 项目，能将样式和组件紧密绑定，但会带来一定的运行时开销。
   • 实用优先的CSS框架：Tailwind CSS是当前的大热门。它通过提供大量原子类，让你直接在HTML中组合出样式。优点是开发速度极快，样式一致性高，最终打包时会通过 PurgeCSS 移除未使用的样式，体积可控。对于需要快速产出、且设计有一定规范的作品集，Tailwind 效率很高。

4. 版本控制：毫无疑问是Git，平台首选GitHub。清晰规范的 Commit 信息、合理的分支策略（例如main,develop,feature/xxx），本身就是你工程素养的体现。

实操心得：对于实习任务，我建议采用Vite + React + TypeScript + Tailwind CSS的组合。这个组合既现代、主流，又能覆盖从构建、开发、类型检查到样式编写的完整工作流，技术栈的广度足够有说服力。如果时间紧张或想更专注于核心内容，去掉 React 和 TypeScript，采用 Vite + 原生 JS + Tailwind 也是完全合格的优秀方案。

2.2 项目目录结构规划

清晰的目录结构是项目可维护性的基础。一个好的结构能让别人（包括未来的你）快速理解代码组织。以下是一个参考结构：

arch-internship-task1-portfolio/ ├── public/ # 静态资源（favicon, robots.txt， 图片等） ├── src/ │ ├── assets/ # 模块资源（CSS文件，字体，项目内图片） │ ├── components/ # 可复用UI组件（Button, Navbar, ProjectCard等） │ │ ├── common/ # 通用组件 │ │ └── sections/ # 页面区块组件（Hero, About, Projects, Contact） │ ├── constants/ # 常量定义（如项目数据、导航链接） │ ├── hooks/ # 自定义React Hooks（如果有） │ ├── styles/ # 全局样式文件 │ ├── types/ # TypeScript类型定义 │ ├── utils/ # 工具函数 │ ├── App.tsx (or .jsx) # 应用根组件 │ └── main.tsx (or .js) # 应用入口文件 ├── index.html # 主HTML文件 ├── package.json # 项目依赖和脚本 ├── vite.config.ts # Vite配置 ├── tsconfig.json # TypeScript配置（如果使用TS） ├── tailwind.config.js # Tailwind CSS配置 ├── .gitignore # Git忽略文件 └── README.md # 项目说明文档

为什么这么规划？

• public/和src/assets/的区分：public下的文件会被直接复制到构建根目录，适合完全不需要处理的文件（如图标）。src/assets中的资源会经过构建流程，可能被压缩、转换，适合组件内部引用的图片。
• components/按功能细分：将组件分为通用型和页面专属型，便于复用和管理。每个作品集区块（如自我介绍、项目列表、联系方式）都可以抽离成独立的section组件，使App.tsx保持简洁。
• constants/集中管理数据：将项目数据、个人简介文本、社交链接等抽离成常量文件，方便统一修改，也使组件更专注于渲染逻辑。
• 配置文件根目录存放：这是社区常见约定，方便查找和修改。

3. 核心页面内容与组件设计

3.1 页面结构与信息层级

一个标准的个人作品集网站，通常包含以下几个核心板块，它们构成了清晰的用户浏览路径：

1. 导航栏：固定顶部，清晰展示网站的主要板块（Home, About, Projects, Contact），并包含个人品牌标识（如姓名/Logo）。
2. 英雄区：首屏核心视觉区域，通常包含你的姓名、职位/头衔、一句精炼的标语，以及一个显眼的行动号召按钮（如“查看我的项目”或“联系我”）。
3. 关于我：简要但有个性的自我介绍，突出你的技术栈、兴趣领域和个人特质。可以附上一张专业且亲切的照片。
4. 项目展示：这是重中之重。以网格或列表形式展示你的项目。每个项目卡片应包含：项目名称、简短描述、使用的技术栈标签、项目截图/动图、以及链接（GitHub仓库、在线演示）。
5. 技能栈：用图标或标签云的形式可视化展示你掌握的技术和工具，可以按前端、后端、工具等分类。
6. 联系方式：提供让访客联系你的途径，如邮箱、GitHub、LinkedIn链接。也可以嵌入一个简单的联系表单（需后端支持，静态站可用Formspree等第三方服务）。
7. 页脚：版权信息、再次放置核心社交链接。

设计上要遵循“移动优先”原则。这意味着你先为小屏幕（手机）设计布局和样式，然后使用媒体查询逐步适配到大屏幕（平板、桌面）。这样可以确保在移动设备上有最好的体验。

3.2 关键组件实现细节

以“项目卡片”这个核心组件为例，我们来拆解其实现：

1. 数据结构设计 (types/projects.ts)：首先，用TypeScript定义项目数据的类型，这能保证数据传递的安全性和IDE的智能提示。

export interface Project { id: number; title: string; description: string; longDescription?: string; // 可选，用于详情页 techStack: string[]; // 技术栈数组，如 ['React', 'TypeScript', 'Tailwind CSS'] imageUrl: string; // 项目封面图路径 githubUrl: string; // GitHub仓库链接 liveDemoUrl?: string; // 在线演示链接（可选） featured?: boolean; // 是否为重点项目 }

2. 数据常量 (constants/projects.ts)：将实际项目数据集中管理。

import { Project } from '@/types/projects'; export const projects: Project[] = [ { id: 1, title: '电商后台管理系统', description: '一个基于React和Node.js的全功能后台管理仪表盘，包含商品、订单、用户管理模块。', techStack: ['React', 'TypeScript', 'Node.js', 'Express', 'MongoDB', 'Ant Design'], imageUrl: '/assets/projects/ecommerce-admin.png', githubUrl: 'https://github.com/yourname/ecommerce-admin', liveDemoUrl: 'https://admin-demo.yourdomain.com', featured: true }, // ... 更多项目 ];

3. 项目卡片组件 (components/common/ProjectCard.tsx)：

import React from 'react'; import { Project } from '@/types/projects'; import { ExternalLink, Github } from 'lucide-react'; // 使用图标库 interface ProjectCardProps { project: Project; } const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => { return ( <div className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1 dark:border-gray-700 dark:bg-gray-800"> {/* 项目封面图 */} <div className="aspect-video overflow-hidden"> <img src={project.imageUrl} alt={`${project.title} screenshot`} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" // 延迟加载，优化性能 /> </div> {/* 卡片内容 */} <div className="p-6"> <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white"> {project.title} </h3> <p className="mb-4 text-gray-600 dark:text-gray-300 line-clamp-2"> {/* 限制描述行数 */} {project.description} </p> {/* 技术栈标签 */} <div className="mb-6 flex flex-wrap gap-2"> {project.techStack.map((tech) => ( <span key={tech} className="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200" > {tech} </span> ))} </div> {/* 操作按钮 */} <div className="flex items-center justify-between"> <a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400" aria-label={`View ${project.title} on GitHub`} > <Github size={18} /> Code </a> {project.liveDemoUrl && ( <a href={project.liveDemoUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700" aria-label={`Live demo of ${project.title}`} > Live Demo <ExternalLink size={16} /> </a> )} </div> </div> {/* 可选：Featured 角标 */} {project.featured && ( <div className="absolute right-0 top-0 rounded-bl-lg bg-gradient-to-r from-amber-500 to-orange-500 px-3 py-1 text-xs font-bold text-white"> Featured </div> )} </div> ); }; export default ProjectCard;

4. 项目展示区组件 (components/sections/ProjectsSection.tsx)：

import React from 'react'; import ProjectCard from '@/components/common/ProjectCard'; import { projects } from '@/constants/projects'; const ProjectsSection = () => { // 可以在这里添加状态来实现过滤或排序功能 // const [filteredTech, setFilteredTech] = useState<string>('all'); return ( <section id="projects" className="py-16 md:py-24"> <div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="mb-12 text-center"> <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"> 我的项目 </h2> <p className="mt-4 text-lg text-gray-600 dark:text-gray-400"> 以下是我在学习和实践中完成的一些项目，点击查看详情和代码。 </p> </div> {/* 项目网格 */} <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> {projects.map((project) => ( <ProjectCard key={project.id} project={project} /> ))} </div> {/* 可以在这里添加一个“查看全部”的按钮，链接到独立的项目页面 */} {/* <div className="mt-12 text-center"> <a href="/projects" className="text-blue-600 hover:text-blue-800 dark:text-blue-400"> 查看所有项目 → </a> </div> */} </div> </section> ); }; export default ProjectsSection;

注意事项：

• 图片优化：项目封面图务必进行压缩（可使用 Squoosh、TinyPNG 等在线工具），并使用loading="lazy"属性实现原生懒加载，这对性能至关重要。
• 无障碍访问：为所有链接和按钮添加aria-label，为图片添加alt文本，这是专业前端工程师的好习惯。
• 响应式断点：使用 Tailwind 的响应式前缀（如sm:,md:,lg:）时，要有一套统一的断点规划，保持布局在不同设备上和谐变化。
• 深色模式：使用 Tailwind CSS 可以非常方便地支持深色模式。在tailwind.config.js中设置darkMode: 'class'，然后在HTML根元素上通过JS切换.dark类。组件中所有颜色都需要提供深色版本（如text-gray-900 dark:text-white）。

4. 样式、交互与性能优化实战

4.1 使用Tailwind CSS进行高效样式开发

Tailwind CSS 是一种“实用优先”的框架，它通过组合原子类来构建设计。对于作品集网站，它能极大提升开发效率。

配置与初始化：首先安装并初始化 Tailwind。在 Vite 项目中，通常这样做：

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

这会生成tailwind.config.js和postcss.config.js。

关键配置 (tailwind.config.js):

/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", // 确保扫描所有源文件中的类名 ], darkMode: 'class', // 启用基于class的深色模式 theme: { extend: { colors: { // 可以在这里定义品牌主色 primary: { 50: '#eff6ff', 600: '#2563eb', // ... 其他色阶 } }, fontFamily: { // 引入自定义字体 'sans': ['Inter', 'system-ui', 'sans-serif'], }, animation: { // 自定义动画 'float': 'float 3s ease-in-out infinite', }, keyframes: { float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' }, } } }, }, plugins: [], }

在全局样式文件 (src/styles/globals.css) 中引入：

@tailwind base; @tailwind components; @tailwind utilities; /* 可以在这里添加一些全局自定义样式 */ @layer base { html { scroll-behavior: smooth; /* 实现锚点平滑滚动 */ } body { @apply antialiased text-gray-900 bg-white dark:bg-gray-950 dark:text-gray-100; } } /* 自定义组件类，避免重复的原子类组合 */ @layer components { .btn-primary { @apply inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm transition-all hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900; } .section-padding { @apply px-4 sm:px-6 lg:px-8 py-16 md:py-24; } }

使用技巧：

• 提取组件：像上面的.btn-primary和.section-padding，将频繁使用的类组合提取到@layer components中，保持模板整洁。
• 响应式设计：始终遵循移动优先。先写不加前缀的样式（针对手机），然后用sm:、md:、lg:、xl:来覆盖大屏样式。例如：text-lg md:text-xl lg:text-2xl。
• 深色模式：为所有涉及颜色的工具类添加dark:变体。例如：bg-white dark:bg-gray-900。

4.2 交互增强与动画

适当的交互和动画能让网站感觉更生动、专业。

1. 平滑滚动与活动导航指示：

   • 在CSS中设置html { scroll-behavior: smooth; }实现锚点链接平滑滚动。
   • 导航栏高亮：监听页面滚动，通过计算各章节位置，动态为对应的导航链接添加活动状态类。可以使用Intersection Observer API来实现，性能比监听scroll事件更好。

2. 微交互与悬停效果：

   • 为按钮、卡片等元素添加transition类，实现颜色、阴影、位移的平滑过渡。例如在项目卡片上使用transition-all duration-300 hover:shadow-lg hover:-translate-y-1。
   • 使用CSStransform和transition实现图片缩放、图标旋转等效果。

3. 视差滚动或滚动触发动画：

   • 对于希望制造视觉冲击的“英雄区”，可以考虑使用视差滚动效果（通过background-attachment: fixed实现，注意移动端兼容性）。
   • 使用framer-motion或AOS(Animate On Scroll) 这类库，可以轻松实现元素在进入视口时的淡入、滑动等动画效果。这能有效引导用户视线，提升浏览体验。

4.3 性能优化关键点

一个加载快、交互流畅的作品集网站，能给人留下更好的印象。

1. 代码分割与懒加载：

   • 路由级懒加载：如果你使用了 React Router 等路由库，确保用React.lazy()和Suspense来动态导入页面组件。这样初始加载的JS包体积会小很多。
   • 组件/图片懒加载：对于“项目展示”这类可能包含大量图片的区块，使用原生loading="lazy"属性或Intersection Observer实现图片懒加载。对于非首屏的组件也可以进行懒加载。

2. 资源优化：

   • 图片：这是性能大头。务必使用 WebP 等现代格式，并使用图片 CDN 或像vite-plugin-imagemin这样的构建插件在打包时自动压缩图片。
   • 字体：使用font-display: swapCSS属性，防止字体加载期间文本不可见。考虑使用preconnect和preload来优化字体加载。
   • 第三方库：谨慎引入。评估是否真的需要某个大型库。对于图标，可以考虑使用像lucide-react这样支持按需导入的图标库，或者直接使用 SVG sprite。

3. 构建优化：

   • Vite 本身已经做了很多优化。确保在生产构建时（vite build）启用压缩和代码分割。
   • 使用rollup-plugin-visualizer分析构建产物体积，找出可以优化的依赖。

4. 核心Web指标：

   • LCP：确保首屏最大的内容（通常是英雄区的标题和背景图）快速加载。优化关键图片，内联关键CSS。
   • FID/INP：减少JavaScript主线程的长时间任务。避免在组件渲染中执行繁重的同步计算，使用Web Worker处理复杂逻辑，或使用setTimeout将任务拆分。
   • CLS：为图片和视频等媒体元素指定明确的宽高（width和height属性，或使用CSS宽高比盒子，如aspect-ratio），防止布局偏移。

5. 开发、部署与持续维护

5.1 本地开发与Git工作流

1. 初始化与开发：

   # 使用Vite模板创建项目 npm create vite@latest arch-portfolio -- --template react-ts cd arch-portfolio npm install # 安装其他依赖，如Tailwind CSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p # 启动开发服务器 npm run dev

2. Git工作流：

   • main分支：存放稳定、可部署的代码。
   • develop分支：日常开发集成分支。
   • feature/xxx分支：从develop拉取，用于开发新功能（如“添加暗黑模式”）。开发完成后，合并回develop。
   • 提交信息规范：使用约定式提交，如feat: add projects section、fix: correct mobile navigation bug、style: update button hover effect。

3. 代码质量：

   • 配置 ESLint 和 Prettier，统一代码风格。
   • 在package.json中设置脚本："lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","format": "prettier --write \"src/**/*.{ts,tsx,css}\""。
   • 考虑在提交前使用husky和lint-staged自动运行检查和格式化。

5.2 部署上线

静态网站部署选择非常多，且大多有免费套餐。

1. Vercel：对前端项目，尤其是 Next.js，体验最佳。关联 GitHub 仓库后，每次推送到main分支都会自动部署。它提供全球 CDN、自定义域名、HTTPS 等。

   • 操作：在 Vercel 官网导入你的 GitHub 仓库，构建命令填npm run build，输出目录填dist，一键部署。

2. Netlify：与 Vercel 类似，也是优秀的静态站点托管平台，提供持续部署、表单处理、函数等功能。

   • 操作：同样连接 GitHub，指定构建命令和发布目录。

3. GitHub Pages：完全免费，与 GitHub 无缝集成。适合纯静态项目。

   • 操作：在仓库设置中，找到 Pages 选项，选择构建源分支（如main或gh-pages）和文件夹（/dist）。需要确保项目base路径配置正确（在vite.config.ts中设置base: '/your-repo-name/'）。

4. Cloudflare Pages：构建速度快，全球网络优秀，同样提供持续集成和自定义域名。

部署前检查清单：

• [ ] 运行npm run build成功，无错误。
• [ ] 在本地用npm run preview预览构建产物，检查所有功能是否正常。
• [ ] 确保所有资源路径正确（图片、字体等），在线上环境能加载。
• [ ] 配置正确的404.html页面（如果使用 SPA 路由）。
• [ ] 提交并推送代码到main分支。

5.3 持续维护与内容更新

网站上线不是终点。一个活跃的作品集需要维护。

1. 内容更新：将项目数据、个人简介、技能列表等抽离成常量文件（如constants/下的文件），更新内容只需修改这些文件，然后重新构建部署即可。
2. 依赖更新：定期运行npm outdated检查依赖版本，并谨慎升级。特别是主要版本升级，可能会引入破坏性变更。
3. 性能监控：使用 Google Search Console 和 Lighthouse（Chrome DevTools 内置）定期检查网站性能和 SEO 健康状况。
4. 备份：代码本身由 Git 托管，但也要记得定期备份public/assets中的重要原创图片等资源。

6. 常见问题与排查技巧实录

在实际开发中，你一定会遇到各种问题。这里记录一些典型问题的解决思路。

6.1 样式相关

问题1：Tailwind CSS 类名不生效。

• 排查：首先检查tailwind.config.js中的content配置，确保它包含了你的模板文件路径（如./src/**/*.{js,ts,jsx,tsx}）。如果路径不对，Tailwind 不会扫描你的文件，也就不会生成对应的 CSS。
• 检查：确保全局 CSS 文件正确引入了@tailwind指令。
• 注意：动态构建的类名（如text-${color}-600）Tailwind 无法识别，必须写完整类名。

问题2：深色模式切换后，部分元素颜色没变。

• 排查：检查该元素是否应用了带有dark:变体的颜色类。例如，text-gray-900需要对应的dark:text-white。
• 检查：确保在根元素（通常是<html>）上正确添加或移除了dark类。切换逻辑通常由一段 JS 控制。
• 注意：某些内联样式或通过 JS 直接设置的颜色，不会响应dark类，需要手动处理。

6.2 构建与部署

问题3：本地开发正常，部署后页面空白或资源404。

• 排查：这是最常见的问题，通常是资源路径错误。
• 检查Vite配置：在vite.config.ts中，如果你部署到子路径（如 GitHub Pages），需要设置base: '/your-repo-name/'。如果部署到根域名，则设为base: '/'。
• 检查资源引用：在代码中引用public或src/assets下的资源时，使用绝对路径（以/开头）或由 Vite 处理的相对路径。部署后，打开浏览器开发者工具的“网络”选项卡，查看具体是哪个文件加载失败。
• 检查路由：如果使用了客户端路由（如 React Router），需要在服务器配置将所有路径重定向到index.html（单页应用）。Vercel、Netlify 等平台会自动处理，但如果你用 Nginx 自己托管，需要手动配置try_files。

问题4：Lighthouse 性能评分低，特别是 LCP 和 CLS。

• LCP 优化：识别 LCP 元素（通常是英雄区大图或标题）。优化该图片（压缩、转换为 WebP），考虑使用<link rel="preload">预加载关键资源。确保服务器响应时间快（使用 CDN）。
• CLS 优化：为所有图片和视频指定尺寸。使用 CSSaspect-ratio或直接设置width/height属性。避免在现有内容上方动态插入内容（如突然弹出的横幅）。

6.3 交互与功能

问题5：移动端导航菜单点击后不关闭。

• 排查：这是一个常见的状态管理问题。当点击菜单内的一个链接时，链接跳转了，但控制菜单显示/隐藏的 React 状态（如isMenuOpen）没有重置为false。
• 解决：在导航链接的点击事件处理函数中，除了跳转，还要手动关闭菜单。或者，使用 React Router 的<Link>组件，并在其onClick回调中关闭菜单。

问题6：项目卡片在 hover 时布局抖动。

• 排查：通常是因为 hover 时添加了shadow或border，导致元素尺寸发生微小变化。
• 解决：为卡片预先设置一个透明的border和shadow，hover 时只改变其颜色或不透明度，而不是从无到有。例如：

  .project-card { border: 1px solid transparent; /* 预先占位 */ box-shadow: 0 0 transparent; /* 预先占位 */ transition: all 0.3s ease; } .project-card:hover { border-color: #e5e7eb; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }

问题7：表单提交后，页面刷新跳转。

• 排查：如果你使用原生<form>且没有阻止默认事件，提交时会触发页面跳转。
• 解决：在 React 中，使用onSubmit事件，并调用event.preventDefault()。然后使用fetch或axios发送异步请求。对于静态站点，可以使用 Formspree、Netlify Forms 等第三方服务来处理表单，无需自建后端。

搭建一个作品集网站，从技术选型到最终上线，是一个完整的、微缩的全栈项目实践。它考验的不仅仅是编码能力，更是项目规划、问题解决和工程化思维。把这个过程走通，并且把每个环节都做到位，你的收获会远超一个网站本身。最重要的是，这个网站将成为你技术成长路上一个动态的、可视化的里程碑，随时可以更新，也随时可以向世界展示你是谁，以及你能做什么。