Hudson 是一套面向产品设计师、UI 设计师和自由职业者的个人作品集网站模板，以左右分栏的人物首屏开场，把个人介绍、工作经历、精选作品和联系入口放在同一个页面。它采用 HTML、CSS 与 JavaScript，适合已有头像、简历和案例图片，希望先做一个个人展示站的人。
主页结构与选用条件
大字号姓名和职业介绍占据首屏左侧，右侧是大幅人物照片。这种开场适合把个人身份放在前面的求职作品集、接案主页和个人介绍站。如果手头主要是产品截图，需要另备适合首屏的人物照片；精选少量案例，也更容易沿用当前页面组织内容。
| 页面文件 | 用途 |
|---|---|
index.html | 正式主页，集中展示个人介绍、履历、作品与联系入口 |
styles.html | 排版和组件示例，可作为修改参考；不需要时可省去部署 |
因此，这份包应按一个业务主页加一个样式示例页理解。主页导航连接 Intro、About、Works 和 Contact 四个区域，向下滚动后会固定，方便访客在长页面中跳转。需要博客、独立项目详情页或案例管理后台时，还要另外开发页面和内容管理功能。
样式页包含标题、列表、按钮、表格、网格、提示框与表单的排版，还有一个外部视频响应式嵌入示例。它可以帮助扩展页面，但不表示主页已包含视频作品集或留言服务。
作品图片与弹窗
作品区预置六张卡片，悬停时显示名称和类别，点击后由 GLightbox 打开大图、标题和说明，支持前后切换。它适合用图片展示设计成果；卡片上的类别只是文字标签，没有分类筛选逻辑。
换一件作品时，需要同时处理两组图片与文字：
- 列表缩略图：位于
images/folio/，卡片的img和srcset分别使用普通图与带@2x的高清图。两份都要替换，避免高像素屏继续显示旧图；卡片名称和类别也应一起更新。 - 弹窗大图与说明：大图在
images/folio/gallery/，由卡片的href指向；data-glightbox对应弹窗标题和说明，.entry__desc-01至.entry__desc-06放各件作品的文字。Project Link 目前是通用示例地址，需要改为真实项目入口。
个人资料与联系设置
人物、履历与评价
姓名和职业介绍在 index.html 的 #intro，人物照片为 images/intro-bg.jpg，首屏与样式页共用。原图的两档 srcset 都指向同一文件，不代表包含两张不同清晰度的照片。
#about 将经历、奖项和技能分列展示。示例公司、职位、技能和获奖记录需要按真实材料替换，奖项链接也要对应实际页面。
作品后方的 .s-testimonials__slider 预置四条客户评价，由 Swiper 轮播展示，宽屏显示多条，手机显示一条，通过分页圆点切换。头像、姓名、身份和评价均需替换；#numbers 中的客户数、项目数、代码量与好评数字也是静态示例，不会自动读取业务数据。缺少可公开的真实材料时，可以移除相应评价或统计模块。
简历与联系入口
这几类入口的处理方式不同：
- 简历下载：首屏和页脚两个 Get My CV 都指向
#0，包内没有对应文件。准备自己的 PDF 后，把两处链接一并接到文件，并检查能否访问。 - 邮件与电话：页脚邮箱及 Message Me 使用占位邮件链接，电话也是示例值。只想让访客发邮件时，换成真实邮件链接即可；电话和社交链接也需同步更新。
- 网页咨询：主页没有接收表单的后端。若要在页面内留言，需要增加表单并接入接收服务，处理输入校验、发送结果和失败提示。
styles.html中的输入框、下拉框与按钮仅是样式示例，不能直接承担收件功能。
部署与手机检查
模板可作为静态文件放到 Web 服务器，无需先运行 Node 构建。部署到子目录时，保持图片、样式、脚本和简历文件的相对路径正确。
配色和字体主要在 css/styles.css 调整；平滑滚动、弹窗、轮播和手机菜单由 js/main.js 初始化。默认使用 Castoro 与 Public Sans 两套在线字体，显示取决于字体服务和网络；需要本地字体时，应自行准备文件并修改 CSS。
更换成长中文姓名或较长的职业介绍后，重点检查手机首屏的换行、人物裁切和按钮间距，再核对六件作品的缩略图与弹窗大图是否对应。项目、社交账号、简历及联系方式都应指向自己的有效内容。
暂无评论内容