Portfolio system

作品不是堆在一起，而是分成三条清楚的展示线。

一个适合正式投递和公开展示的 Astro 作品集，结构清楚，适合快速替换成真实项目内容，并直接部署到 Cloudflare Pages。

进入视频作品集进入开发项目作品集

03 portfolio tracks

06 detail pages ready

Astro maintainable

Pages deployable

Video portfolio 视频作品集

展示完整片子、短版切片和镜头语言拆解。重点是节奏、氛围和叙事推进。

Editorial portfolio 图文作品集

把策略背景、制作过程和最终表达串起来，适合长图文和案例复盘。

Build portfolio 开发项目作品集

展示产品结构、技术方案和上线结果，适合网页、系统和自动化项目。

Homepage logic

首页先让访问者快速判断你擅长什么。

三类作品集分别承担不同任务：视频负责气质和节奏，图文负责解释和复盘，开发项目负责结构和落地。

Video portfolio

视频作品集

展示完整片子、短版切片和镜头语言拆解。重点是节奏、氛围和叙事推进。

查看视频项目 Editorial portfolio

图文作品集

把策略背景、制作过程和最终表达串起来，适合长图文和案例复盘。

查看图文项目 Build portfolio

开发项目作品集

展示产品结构、技术方案和上线结果，适合网页、系统和自动化项目。

查看开发项目

Featured details

每条线都直接通向详情页。

作品卡片不做过度装饰。用户点击后直接进入详情页，看结果、看流程，也看设计思路。

2026

策划 / 分镜 / 后期独立茶饮品牌

茶饮品牌发布短片

把产品气质、空间氛围和社媒传播压缩进 45 秒。

这个项目用于品牌首发。页面详情拆开说明脚本节奏、镜头组织方式和后期如何服务品牌调性。

2026

选题 / 采访 / 图文编辑品牌内容团队

品牌栏目图文专题

把拍摄意图、版式结构和传播重点一次讲清楚。

适合展示内容策划和图文组织能力。详情页把文章结构、信息层级和视觉节奏拆开说明。

2026

产品设计 / 前端实现内容团队内部工具

创作者数据看板

把分散的数据、筛选条件和内容状态组织成一个可操作界面。

这个项目重点展示产品结构、信息架构和前端落地。详情页解释页面拆分、状态设计和为什么这样排布信息。

Update flow

后续更新只改内容，不重做结构。

这套结构的重点是后续维护成本低。新增作品时，直接补一条数据和对应的详情内容即可。

内容更新步骤

在 src/data/site.js 中替换作品标题、摘要、标签、流程说明和设计思路。
把封面图、流程图和页面截图放到 public/，再把数据里的图片路径改成对应相对地址。
本地统一从 E:\xcweb_alias 执行 npm run dev，优先检查手机宽度和桌面宽度下的排版。
确认无误后执行 npm run build，再运行 npm run deploy:pages 发布到 Cloudflare Pages。

查看完整运维文档

包含新的导航结构、详情页内容模型、图片替换方式以及 Cloudflare Pages 的正式发布流程。