React作品集

luffy-portfolio — React 作品集模板

作者 anand-reddi

React + TypeScript + Tailwind 开发者作品集模板，含 One Piece 演示主题、明暗切换与 Lenis 平滑滚动。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

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

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

值得关注的模板亮点

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

React + TypeScript + Tailwind 技术栈，Vite 开发与构建

One Piece 演示主题，内容与图片可整体替换

明暗主题切换、Lenis 平滑滚动、开场动画与点击音效

产品详情页，可选 Play Store 指标展示

联系表单接入 Web3Forms，访客计数可选 Firebase 实时统计

MIT 许可，可用于个人或商业作品集

模板详细介绍

luffy-portfolio 是一个以《One Piece》为演示主题的开源开发者作品集模板，技术栈为 React、TypeScript 与 Tailwind。内容结构围绕个人主页、关于、项目、产品与 hire 页面展开，并配有产品详情页。它的辨识度更多来自交互细节：明暗主题的上下过渡、Lenis 平滑滚动、开场动画、点击音效，以及移动端的滑动导航。

可配置项集中在 constants.ts，包括个人信息、项目与副项目、社交链接、技能徽章和访客统计。联系表单走 Web3Forms，需要填入自己的 access key；GitHub 贡献图、实时 IST 时钟与在线状态指示器是内置展示组件。访客计数默认是静态数字，只有自行配置 Firebase 并开启 enableLiveCount 后才会走实时计数，模板本身不附带 Firebase 密钥。

适合想要一个带趣味主题、但结构完整的个人作品集起步项目。需要留意：演示站上的内容与图片均为占位，上线前要替换 assets 与 constants.ts 中的素材；联系表单、访客计数等外部服务需要自行申请密钥或配置后端，README 未说明这些服务的生产可用性。

React作品集

适合你的项目吗？

适用场景

开发者个人作品集网站，需要项目与副项目展示
希望用现成交互细节（平滑滚动、主题切换、开场动画）快速起步
需要产品详情页并展示应用商店指标的独立开发者
想以 One Piece 等趣味主题作为演示风格再替换为自有内容

适合人群

熟悉 React 与 TypeScript、能自行修改 constants.ts 的前端开发者
接受 Tailwind 样式体系并愿意替换占位图片与文案的人
需要 MIT 许可下可自由修改的作品集模板的个人或团队

上手与定制指南

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

1
克隆仓库后执行 npm install、npm run dev，本地地址通常为 http://localhost:5173
2
个人信息、项目、社交链接、技能等集中在 constants.ts 中修改
3
联系表单需在 web3forms.com 申请 access key 并填入 WEB3FORMS_ACCESS_KEY
4
访客计数默认静态；如需实时统计，需复制 .env.example 为 .env 并配置自己的 Firebase，参考 VISITOR_COUNTER_SETUP.md
5
构建产物在 dist/，可部署到 Firebase Hosting、Vercel、Netlify 或 GitHub Pages

查看仓库使用说明