---

前言

本文介绍了一个响应式个人作品集网站的开发实践，采用HTML5、CSS3和JavaScript技术栈，结合Tailwind CSS和Bootstrap框架实现。项目包含8个核心模块：多终端适配导航栏、沉浸式首页、专业技能展示、作品分类筛选、时间轴成就展示、博客文章及联系表单。通过动态进度条、悬停动效、网格布局等技术增强交互体验，并实现PC端与移动端的完美适配。项目成果展示了包括UI/UX设计作品、开发技能图谱、职业经历等专业内容，体现了前端开发与设计能力的有机结合。

---

一、项目整体概述

1. 项目功能介绍

1.1 导航栏

导航栏采用多终端适配设计，桌面端以横向菜单呈现核心功能模块（首页、关于我等 7 个主菜单），移动端通过汉堡菜单按钮展开抽屉式导航，点击菜单项可触发平滑滚动至对应页面锚点。滚动页面时，导航栏会自动切换背景颜色（透明→白色）和文字颜色（白色→深色），增强视觉层次感；移动端菜单支持图标动态切换（汉堡图标↔关闭图标），结合 JavaScript 事件监听实现交互逻辑，确保不同设备下导航体验一致且流畅。

1.2 首页模块

首页以全屏背景图叠加渐变蒙层营造沉浸式视觉效果，居中展示个人姓名、职业标签及 “查看作品”“联系我” 等行动按钮，底部 “向下箭头” 图标通过 CSS 动画引导用户滚动页面。标题文字采用clamp()函数实现自适应缩放（最小 2.5rem，最大 5rem），适配不同屏幕尺寸；背景图通过object-cover保持比例显示，按钮悬停时触发颜色加深和阴影放大效果（hover:bg-secondary/90+shadow-lg），强化交互反馈，快速建立用户对个人品牌的第一印象。

1.3 关于我模块

该板块左侧展示个人照片及悬浮的工作年限标签（5 + 年经验），右侧详细介绍职业定位、设计理念、合作经历及核心技能（UI/UX 设计、前端开发等），通过图标 + 文字组合（如公文包图标 +“UI/UX 设计”）直观呈现专业领域。照片标签采用绝对定位覆盖于右下角，搭配阴影效果增强立体感；技能部分使用响应式网格布局（grid-cols-1 md:grid-cols-2），文字通过text-gray-600弱化辅助信息，突出核心内容，同时提供双行动按钮引导用户进一步探索作品或建立联系。

1.4 技能模块

技能板块分为 “设计技能” 和 “开发技能” 两类，每项技能通过名称、百分比进度条及动画效果展示掌握程度（如 UI/UX 设计 90%、HTML5/CSS3 95%），滚动至该区域时进度条从 0% 平滑填充至目标值。工具列表以卡片形式呈现（Figma、VS Code 等），采用响应式网格排列（grid-cols-2 lg:grid-cols-6），鼠标悬停时触发阴影放大动画（hover:shadow-lg）。技术实现上，进度条通过data-width属性动态设置宽度，结合 JavaScript 监听视口事件触发动画，工具卡片则利用统一的图标风格和背景色（bg-primary/10）提升视觉一致性。

1.5 作品模块

作品板块支持分类筛选功能，顶部按钮可按 “网站设计”“应用设计” 等类别过滤项目卡片，点击后通过 JavaScript 动态显示 / 隐藏对应内容，同时更新按钮视觉状态（切换主色背景）。每个项目卡片包含预览图、标题及操作按钮，鼠标悬停时图片缩放（group-hover:scale-110）并显示半透明遮罩层，遮罩层内提供链接和查看详情按钮（带毛玻璃效果）。卡片采用响应式网格布局（grid-cols-1 md:grid-cols-2 lg:grid-cols-3），底部 “查看更多作品” 按钮预留扩展接口，方便后续加载更多内容或跳转至完整作品集页面。

1.6 成就模块

成就板块以时间轴布局展示工作经验、教育背景及专业认证，左侧通过伪元素绘制垂直时间轴线条和圆形节点（蓝色主色），右侧以卡片形式呈现具体内容（如科技创新有限公司高级职位、清华大学计算机科学学士学位），关键信息通过颜色标签（bg-primary/10）和字体权重区分层级。荣誉奖项部分采用网格布局（grid-cols-1 md:grid-cols-2 lg:grid-cols-4），每个奖项卡片包含奖杯图标、名称和年份，背景色（bg-secondary/10）与主色形成对比，突出获奖记录的专业性和权威性。

1.7 博客模块

博客板块展示最新 3 篇文章，每篇包含分类标签（如 “UI/UX 设计”）、发布时间、评论数及摘要，点击 “” 可跳转至全文页。文章预览图通过object-cover保持比例显示，小屏幕设备下自动调整高度（h-48）；分类标签以绝对定位固定于图片左上角，通过主色（bg-primary）或辅助色（bg-secondary）区分类别；标题支持鼠标悬停变色（group-hover:text-primary），日期和评论数通过 Font Awesome 图标配合 Flex 布局水平排列，整体设计简洁直观，便于用户快速浏览行业见解和教程。

1.8 联系我模块

联系板块左侧为交互表单，支持用户提交姓名、邮箱、主题和消息，输入框通过焦点状态样式（focus:border-primary+focus:ring-2）提升操作反馈，按钮点击后触发模拟发送动画（纸飞机图标动态效果）；右侧展示地址、邮箱、电话、工作时间及社交媒体链接，图标采用统一的圆形背景（bg-primary/10），鼠标悬停时切换为实心主色背景（hover:bg-primary），引导用户关注。整体布局采用双列响应式设计（grid-cols-1 lg:grid-cols-2），表单与联系方式分区清晰，兼顾功能性与视觉美观。

2. 技术选型说明

• Web技术：HTML5、CSS3、JS
• 前端框架和库：Tailwind CSS、Bootstrap
• 字体图标库：Font Awesome

---

二、项目成果展示

1. PC端展示

1.1 首页

1.2 关于我

1.3 技能

1.4 作品

1.5 成就

1.6 博客

1.7 联系我

2. 移动端展示

2.1 首页

2.2 关于我

2.3 技能

2.4 作品

2.5 成就

2.6 博客

2.7 联系我