Picto 是一套面向 UI/UX 设计师、自由职业者和独立开发者的个人作品集网站模板。它把人物介绍、工作流程、作品、服务和联系区组织在一个长页面里，用浅色渐变与紫色按钮突出个人形象，适合既要展示作品、也要说明合作方式的个人站。
演示里的 Brooklyn Gilbert 是示例姓名，模板资源名称为 Picto。页面先介绍本人，再展示作品和合作方式；已有个人肖像、作品截图和服务介绍时，可以从这些内容开始替换。
从人物介绍到作品
首屏采用左文右图的布局：姓名与职业介绍在左，右侧是一张大幅竖向人像，底部用三格数字展示年限、项目数和客户数。背景由粉紫、薄荷绿与浅暖色渐变组成，页面本身没有依赖大面积摄影背景，人物和作品图片会更显眼。
首屏人像框按约 536∶636 的竖向比例设计，后面的个人介绍又使用一张独立人物图。替换素材时，两处都要修改；横向合照直接放入这些位置，容易因裁切丢失主体。示例年限、项目数和客户数都是手工填写的文案，应换成自己的真实资料。
| 页面区域 | 现有布局 | 适合填入的内容 |
|---|---|---|
| 个人介绍 | 人像、社交图标、简介与双按钮 | 个人经历、定位及联系入口 |
| 工作流程 | Research、Analyze、Design、Launch 四张卡片 | 自己实际采用的合作步骤 |
| Portfolio | 六张图片卡片，含类别、标题和简介 | 项目截图、职责和案例入口 |
| 服务介绍 | UX、UI、Web Development 三项服务 | 具体服务范围与交付内容 |
作品区在宽屏显示三列，中等屏幕为两列，窄屏收成一列。六张卡片的图片分别独立，但示例标题都写成 Product Admin Dashboard，链接也还是 #!。整理自己的作品时，应同时换掉标题、类别、说明和目标地址，不能只替换截图。
博客与客户评价
Blog 使用 Swiper 展示六条静态示例，通过分页圆点切换；宽屏可同时显示四张，窄屏减少可见数量。日期、评论数和标题都写在组件数据里，没有文章详情路由，也没有内容管理后台。若准备长期写博客，需要继续接入内容系统或开发文章页面；如果只想展示作品，可以从首页移除这一段。
客户评价另有三条轮播内容，适合放简短引语、姓名和职位。客户标志、评价和首屏数字都是展示素材，不会自动读取真实客户记录。个人站刚开始运营时，保留确有依据的内容即可，不必照搬所有示例区块。
联系与下载入口
导航使用页内滚动切换 Home、About、Process、Portfolio、Blog、Services 与 Contact；它们指向同一页面中的区域，不代表有七个独立页面。移动端提供折叠菜单，页面还带有返回顶部入口。
以下几个看起来可以直接操作的入口，正式使用前还需要补齐：
- Say Hello!：原首屏按钮调用邮件客户端，地址是示例邮箱；应换成自己的邮箱或联系区链接。本次在线演示已改为跳到页面内的联系区。
- Download CV：目前是
#!占位，没有关联简历文件。准备好自己的 PDF 后，再填写真实下载地址。 - Case Study、More Project 与合作按钮：仍使用占位链接，需要接到项目详情、外部作品页或实际咨询入口。
- 联系表单：提供姓名、邮箱、地点、预算、主题和消息六项输入，以及必填校验；源码未接入收件接口、数据库或提交处理。本次演示点击提交只显示未发送消息的提示。
内容修改与运行
先换个人资料和作品
- 姓名与首屏介绍：修改
src/components/introduction/Introduction.jsx，同步替换三项统计数据；导航与页脚中的 Brooklyn 文案也要一起调整。 - 人物与简历：修改
src/components/profile/Profile.jsx和两处人像资源，填写真实的简历地址；社交入口集中在common/socialMedia/SocialMedia.jsx。 - 作品与博客：分别修改
portfolio/Portfolio.jsx的projectData和blog/Blog.jsx的blogData。卡片图片随项目导入，不能只改浏览器里看到的文字。 - 流程、服务与评价：修改对应组件中的数组；首页区块顺序在
src/pages/Home.jsx中组合，删减区块时同时处理导航入口。 - 颜色与页面信息：根目录
index.css包含紫色主色#9929fb、浅底色和渐变配置；浏览器标题、favicon 与字体引入在index.html。
安装和构建条件
工程采用 React、Vite、Tailwind CSS 4、daisyUI 和 Swiper，本地包没有依赖锁文件。本次临时副本实际构建使用 React 19.3.1、Vite 6.4.5 和 Tailwind CSS 4.3.3；这些版本说明的是本次构建结果，不是原包锁定的版本。
运行时可按以下顺序处理：
- 准备 Node.js 20 或更高版本，进入项目目录执行
npm install。本次已在 Windows 环境完成安装与构建。 - 运行
npm run dev调整内容；部署路径由VITE_REPO_NAME控制，Vite 的资源前缀与 React Router 的basename需要一致。 - 执行
npm run build，将dist/中的静态产物部署到对应路径。本次演示使用/picto/，构建产物只有一个 HTML 入口。
包内还直接列有 lightningcss-win32-x64-msvc，这是 Windows x64 专用依赖。若在 macOS 或 Linux 安装，需要先调整这项平台依赖，不能直接假定同一安装清单通用。原配置中的本机 /api 开发代理也不等于附带了后端服务。
本次演示副本修正了字符集声明、页脚部分锚点与子目录路径，移除了未使用的日历脚本，并将实际引用的图片转为 WebP；字体仍依赖 Google Fonts。原始源码保留，个人正式站的域名、路径和服务接入仍需按自己的环境设置。
暂无评论内容