Next.jsReact作品集

Persona3-like-web — Next.js 作品集模板

作者 Masonli1203

受《女神异闻录3》视觉节奏启发的 Next.js 作品集模板，包含斜向构图、自定义光标、玻璃时钟与圆形页面转场。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

整体预览

查看源码在新标签页打开

作者提供的预览

查看现有预览图，更多页面尚未采集。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-18查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

斜向构图与超大斜体字，参考《女神异闻录3》的视觉节奏

全站共享自定义光标：即时指针跟踪、拖尾墨迹与悬停反馈

进入章节时出现 11 到 12 点时钟与玻璃溶解，章节间为圆形擦除转场

首页包含鼠标视差、标题倾斜、磁吸链接、漫画式悬停扩展和实时区块预览

Creative 页提供可筛选作品卡片与可展开学习笔记，Projects 页为交互式列表与预览面板

动画使用 CSS、SVG 和少量 canvas 精灵，无 Three.js 或 WebGL 依赖

模板详细介绍

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、分析、视频服务或后端集成。默认文本是通用内容，原作品集中的个人肖像、照片、本地设计档案、证书和机器相关验证文件已被排除。

Next.js作品集

适合你的项目吗？

适用场景

个人作品集网站：展示创意作品、项目列表与学习笔记
需要强视觉风格与页面转场的 Next.js 前端项目起点
学习 Framer Motion、自定义光标与路由转场生命周期的参考实现
作为 GitHub 模板复制后替换示例数据，快速搭建独立作品集

适合人群

熟悉 Next.js、TypeScript 和 Tailwind CSS 的前端开发者
希望以《女神异闻录3》风格呈现个人作品的设计师或创作者
需要可定制光标、转场和响应式布局的模板使用者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
使用 Node.js 24 和 npm；Node.js 22 也满足 package 要求，无需环境变量或 API 密钥
2
本地运行：git clone 后执行 npm ci 和 npm run dev，打开 http://127.0.0.1:3000
3
在 GitHub 上选择 Use this template 创建独立作品集；若想参与共享项目开发，应 fork 并提交 pull request
4
主要修改文件：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
5
桌面作品图槽位当前使用 1672 × 941 画布；替换作品图或使用长名称前请阅读 docs/CUSTOMIZATION.md

查看仓库使用说明