Persona3-like-web
Next.js · React / 作品集 · 作者 Masonli1203
受《女神异闻录3》视觉节奏启发的 Next.js 作品集模板，包含斜向构图、自定义光标、玻璃时钟与圆形页面转场。
模板详细介绍
Persona3-like-web 是一个基于 Next.js App Router、TypeScript、Tailwind CSS 和 Framer Motion 的前端作品集模板。它的视觉语言参考《女神异闻录3》：斜向构图、超大斜体字、墨迹般的指针反馈，以及富有表现力的页面转场。首页提供鼠标视差、标题倾斜、磁吸链接、漫画式悬停扩展和实时区块预览；Creative 页有可筛选的作品卡片与可展开的学习笔记；Projects 页是交互式项目列表与预览面板；About 页可编辑个人资料、背景与兴趣。
共享光标在所有路由上即时跟踪指针、留下拖尾墨迹并响应悬停。从首页进入章节时会出现 11 到 12 点的时钟与玻璃溶解效果，章节之间使用圆形擦除转场。动画由 CSS、SVG 和少量 canvas 精灵实现，不依赖 Three.js 或 WebGL。模板包含响应式排版、稳定的滚动条空间、键盘焦点、触摸布局和减少动态效果支持。
这是一个前端模板：示例作品、媒体、简介和简历均为占位内容，不包含认证、CMS、分析、视频服务或后端集成。默认文本是通用内容，原作品集中的个人肖像、照片、本地设计档案、证书和机器相关验证文件已被排除。
主要特点
- 斜向构图与超大斜体字，参考《女神异闻录3》的视觉节奏
- 全站共享自定义光标：即时指针跟踪、拖尾墨迹与悬停反馈
- 进入章节时出现 11 到 12 点时钟与玻璃溶解，章节间为圆形擦除转场
- 首页包含鼠标视差、标题倾斜、磁吸链接、漫画式悬停扩展和实时区块预览
- Creative 页提供可筛选作品卡片与可展开学习笔记，Projects 页为交互式列表与预览面板
- 动画使用 CSS、SVG 和少量 canvas 精灵，无 Three.js 或 WebGL 依赖
适用场景
- 个人作品集网站：展示创意作品、项目列表与学习笔记
- 需要强视觉风格与页面转场的 Next.js 前端项目起点
- 学习 Framer Motion、自定义光标与路由转场生命周期的参考实现
- 作为 GitHub 模板复制后替换示例数据，快速搭建独立作品集
适合人群
- 熟悉 Next.js、TypeScript 和 Tailwind CSS 的前端开发者
- 希望以《女神异闻录3》风格呈现个人作品的设计师或创作者
- 需要可定制光标、转场和响应式布局的模板使用者
使用前需要核对
- 使用 Node.js 24 和 npm；Node.js 22 也满足 package 要求，无需环境变量或 API 密钥
- 本地运行：git clone 后执行 npm ci 和 npm run dev，打开 http://127.0.0.1:3000
- 在 GitHub 上选择 Use this template 创建独立作品集；若想参与共享项目开发，应 fork 并提交 pull request
- 主要修改文件：src/data/site.ts、src/data/sections.ts、src/data/works.ts、public/images/hero-placeholder.svg、src/app/globals.css、src/app/(modules)/modules.css、src/app/transitions.css
- 桌面作品图槽位当前使用 1672 × 941 画布；替换作品图或使用长名称前请阅读 docs/CUSTOMIZATION.md
本介绍由 AI 根据目录元数据和仓库 README 整理，实际功能以原仓库为准。
功能与适用范围
目录记录的用途为作品集，主要技术栈为Next.js、React。功能是否完整实现，需要在源码和演示中进一步确认。
- Next.js
- 作品集