kshitizkannojia/My-Portfolio
GitHub: kshitizkannojia/My-Portfolio
一个基于 Next.js 和 Spline 构建的 3D 交互式开发者作品集模板，以可交互 3D 键盘展示技能，并提供博客、联系表单和可选实时协作功能。
Stars: 6 | Forks: 0
# 🚀 3D 作品集
一个令人惊叹的开发者作品集，包含交互式 3D 动画、丝滑流畅的过渡效果以及太空主题美学。这不是普通的作品集模板！它拥有一个完全交互式的 3D 键盘，每个键帽都代表一项技能。
[](https://vercel.com/new/clone?repository-url=https://github.com/kshitizkannojia/My-Portfolio)
## ✨ 功能
- **交互式 3D 键盘** — 自定义 Spline 键盘，每个键帽代表一项技能，悬停/按下时会显示标题和描述
- **丝滑动画** — 由 GSAP + Framer Motion 驱动的滚动、悬停和显示动画
- **太空主题** — 在深色画布上漂浮的粒子，营造出宇宙氛围
- **明亮与深色模式** — 完整的主题支持，并附带幽默的免责声明 toast
- **响应式设计** — 适用于所有屏幕尺寸
- **联系表单** — 通过 Resend 发送电子邮件
- **分析** _(可选)_ — 集成 Umami 分析
## 🛠️ 技术栈
| 层级 | 技术 |
|---|---|
| **框架** | Next.js 14, React 18, TypeScript |
| **样式** | Tailwind CSS, Shadcn UI, Aceternity UI |
| **动画** | GSAP, Framer Motion |
| **3D** | Spline Runtime |
| **邮件** | Resend |
| **其他** | Lenis (平滑滚动), Zod, next-themes |
## 🚀 快速开始
### 前置条件
- Node.js (v18+)
- pnpm (推荐), npm 或 yarn
### 安装说明
1. **克隆仓库：**
git clone https://github.com/kshitizkannojia/My-Portfolio.git
cd 3d-portfolio
2. **安装依赖：**
pnpm install
3. **设置环境变量：**
将 `.env.example` 复制到 `.env.local` 并填写相关值：
cp .env.example .env.local
| 变量 | 必填 | 描述 |
|---|---|---|
| `RESEND_API_KEY` | 是 | 用于联系表单的 [Resend](https://resend.com) API key |
| `NEXT_PUBLIC_WS_URL` | 否 | 用于实时功能（光标、聊天、在线状态）的 WebSocket 服务器 URL |
| `UMAMI_DOMAIN` | 否 | Umami 分析脚本的 URL |
| `UMAMI_SITE_ID` | 否 | Umami 网站 ID |
4. **运行开发服务器：**
pnpm dev
5. 打开 [http://localhost:3000](http://localhost:3000) 见证魔法 ✨
## 🎨 打造你的专属作品集
所有个人信息都集中存放在 [`src/data/config.ts`](src/data/config.ts) 中。编辑此单个文件即可对作品集进行重新品牌化：
```
const config = {
title: "Your Name | Your Title",
description: {
long: "Your long description for SEO...",
short: "Your short description...",
},
keywords: ["your", "keywords"],
author: "Your Name",
email: "you@example.com",
site: "https://yoursite.com",
// GitHub stars button in the header
githubUsername: "your-github-username",
githubRepo: "your-repo-name",
social: {
twitter: "https://x.com/you",
linkedin: "https://linkedin.com/in/you",
instagram: "https://instagram.com/you",
facebook: "https://facebook.com/you",
github: "https://github.com/you",
},
};
```
你可能想要自定义的其他文件：
| 文件 | 修改内容 |
|---|---|
| `src/data/projects.tsx` | 你的项目、截图、描述和技术栈 |
| `src/data/constants.ts` | 技能列表（名称、描述、图标）和工作经历 |
| `public/assets/` | 你的图片、OG 图像和项目截图 |
## ⌨️ 更新 3D 键盘技能
3D 键盘的键帽被内置在 Spline 文件中。要更新键盘上显示的技能：
1. **导入** `public/assets/skills-keyboard.spline` 文件到 [Spline](https://spline.design/)
2. **取消隐藏** 你想要编辑的键帽对象
3. **更新** 每个键帽上的徽标图像为你新的技能图标
4. **重命名** 每个键帽对象，使其与 `src/data/constants.ts` 中技能的 `name` 字段相匹配（例如 `js`, `react`, `docker`）
5. 再次 **隐藏** 所有键帽对象
6. **导出** 场景并覆盖 `public/assets/skills-keyboard.spline`
更新 Spline 文件后，请确保 `src/data/constants.ts` 中包含与键盘上各项技能匹配的条目：
```
// Each keycap object name in Spline must match a key in SKILLS
export const SKILLS: Record = {
js: { name: "js", label: "JavaScript", shortDescription: "...", ... },
react: { name: "react", label: "React", shortDescription: "...", ... },
// ... add/remove entries to match your keyboard
};
```
`SkillNames` 枚举、`SKILLS` 记录以及 Spline 键帽名称必须全部保持同步，键盘交互才能正常工作。
## 🔌 实时功能（可选）
该作品集支持由 **独立的后端 API** 驱动的可选实时功能：
- 🖱️ **实时光标** — 实时查看其他访问者的光标
- 👥 **在线状态** — 显示当前正在网站上的用户
- 💬 **聊天** — 访问者之间的实时聊天
当设置了 `NEXT_PUBLIC_WS_URL` 环境变量时，这些功能会自动激活。如果没有设置，该作品集将作为静态站点完美运行 —— 无实时功能，无后端依赖。
## 🚀 部署
[](https://vercel.com/new/clone?repository-url=https://github.com/kshitizkannojia/My-Portfolio)
本站点部署在 **Vercel** 上。要部署你自己的站点：
1. 将你的代码推送到 GitHub 仓库
2. 将该仓库连接到 [Vercel](https://vercel.com)
3. 在 Vercel 控制台中添加你的环境变量
4. Vercel 会处理剩下的工作 —— 每次推送时自动部署
## 📄 许可证
本项目是开源的，并基于 [MIT 许可证](LICENSE) 发布。
如果你使用了这个作品集，如果能提供署名或链接回 [原始仓库](https://github.com/kshitizkannojia/My-Portfolio)，我们将不胜感激 ❤️
标签：3D交互, React, Syscalls, 个人作品集, 动画效果, 自动化攻击