Olivia 是一套面向平面设计师、插画师和自由职业者的单页作品集网站模板，采用 Tailwind CSS 4 与 Alpine.js 3。人物照片、个人介绍、六张作品卡和联系区域都放在同一页，适合用几件代表作展示视觉风格，并给潜在客户留下联系入口。
双卡首屏与方形作品
首屏左侧是人物照片，右侧是带暖黄色渐变的介绍卡片；下方的浅灰作品卡使用圆角和留白，让插画、标志或图形组合成为视觉重点。页面适合展示完整的单幅设计，也能作为品牌项目的封面目录。如果作品需要长篇解释调研、推导和交付过程，则需要另补案例内容。
中等及以上屏幕使用十二列网格：照片占五列、介绍占七列，作品每张占四列，形成一行三件的排列；窄屏则改成单列，照片、介绍和作品依次向下展开。替换素材时，两种图片的处理方式不同：
- 人物照片：
assets/photo.jpg使用方形区域和object-cover，超出比例的部分会被裁切。换图后先看脸部和肩部是否完整，再决定是否调整裁切位置。 - 作品图片：
assets/project1.png至project6.png使用方形区域和object-contain，尽量完整显示画面。替换对应图片后，再修改卡片标题、时间标签和 ALT；宽扁或长竖作品会留下更多空白，需要根据实际画面决定是否重排卡片。
页头只有 Projects 与 Hire me 两个导航入口，分别定位到第一张作品卡和联系区域。它没有单独的关于页、作品详情页或博客，适合内容不多、希望先建立个人展示页的人。
哪些交互已经实现
深浅色切换由 Alpine.js 控制：点击页头图标后，在根元素上切换 dark 类，背景、文字、卡片和输入框跟随变化。默认从浅色开始，刷新后会恢复浅色；代码没有保存主题偏好，也没有自动跟随系统主题的逻辑。
作品、联系和社交入口还需分别处理：
| 入口 | 当前状态 | 使用前需补齐 |
|---|---|---|
| 六张作品卡 | 悬停显示箭头、轻微放大图片；点击为占位 | 真实项目地址或详情页 |
| 联系表单 | 姓名、邮箱、消息三项；提交被阻止 | 接收服务及发送反馈 |
| 页脚社交图标 | 账号链接尚未填写，另有示例仓库入口 | 自己的账号地址或删除入口 |
作品卡使用 javascript:void(0)，没有图片弹窗或分类筛选，不能把悬停箭头当成已接通的详情页。表单虽然带有字段名和邮箱输入类型，但 onsubmit="return false;" 明确阻止提交，包内也没有邮件处理程序。需要接收询盘时，还要接入表单服务或后端，并处理校验、发送中、成功和失败状态；演示人物的从业年限与可接案状态也应换成真实信息。
修改与部署的两种路径
先用单文件修改
包内的正式页面只有 index.html，图片集中在 assets/，没有另附独立的业务页面。可以先在 HTML 中替换姓名、职业介绍、作品标题与联系文案，再处理图片和目标链接；项目卡上的 This month、Last month 是静态文字，不会根据项目日期自动更新。
布局、间距和颜色主要写在 Tailwind 类名中。调整浅色外观时，也要一起查看对应的 dark: 类，避免切换主题后仍留下旧配色。<head> 中的 @theme 设置默认字体为 Inter，字体从 Bunny Fonts 在线加载；希望使用中文字体时，需要自行选择字体并调整设置，再检查中文简介换行后的卡片高度。
加入构建与业务功能
原包通过 CDN 加载 Tailwind 浏览器运行脚本和 Alpine.js，页面打开后生成样式并初始化交互，没有附带 package.json、预编译 CSS 或构建命令。保留这些外部依赖时，可以直接以静态文件方式查看和部署，显示效果取决于脚本与字体资源能否加载。
准备长期维护时，可以另配 Tailwind 构建流程，把样式预先生成并固定依赖版本。新增案例详情页、主题偏好保存和询盘接收也属于另外的开发工作，原页面不会自动补齐这些功能。部署到子目录时保留 index.html 与 assets/ 的相对关系，并检查手机单列布局、两个导航定位和全部作品链接。
暂无评论内容