Next.jsReact作品集

portfolio2025 — Next.js 作品集模板

作者 Rushikeshnimkar

基于 Next.js 15 与 TypeScript 的 AI 驱动个人作品集，集成 OpenRouter 对话、Pinecone 向量检索与自然语言主题定制。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图

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

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

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

值得关注的模板亮点

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

Next.js 15 + TypeScript + Tailwind CSS + Framer Motion 的前端组合

接入 OpenRouter 的 AI 对话，使用 Gemini 向量与 Pinecone 做语义检索

自然语言驱动的主题定制，支持页面级与全站级修改

AI 辅助邮件生成，含发件地址校验与文本生成动画

通过 Tavily 获取实时信息，扩展对话回答范围

提供 Vercel + Edge Functions 的部署说明

模板详细介绍

这是一个以个人品牌展示为核心的作品集站点，技术底座是 Next.js 15、TypeScript、Tailwind CSS 与 Framer Motion，后端逻辑由 Next.js API Routes 承担。它区别于普通静态作品集的地方在于把 AI 能力做进了页面本身：访客可以和作者的数字分身对话，也能用自然语言指令实时改变界面主题。

具体能力围绕三条线展开。对话侧接入 OpenRouter 的 LLM，并用 Google Gemini 生成 768 维向量、存入 Pinecone 做语义检索，必要时通过 Tavily 拉取实时信息；邮件侧提供 AI 辅助撰写与地址校验；主题侧则允许按页面或全站范围下发自然语言修改，README 称其会即时生成 JavaScript 来实现视觉效果。项目展示、响应式布局和深色模式属于基础配置。

需要留意的是，这套体验依赖较多外部服务：OpenRouter、Google Gemini、Pinecone、Tavily、Abstract API 以及用于发信的 Nodemailer 与 Google 应用密码，缺一不可，README 也明确要求先配好 .env 再启动。首次运行会因写入向量库而明显变慢。仓库标注 MIT 许可但状态为待复核，且 AI 主题定制会动态生成脚本，上线前建议自行核对许可文件与相关安全边界。

Next.js作品集

适合你的项目吗？

适用场景

想用 AI 对话形式介绍个人经历与项目的开发者作品集
需要展示向量检索、LLM 接入等 AI 工程能力的个人站点
希望访客能通过自然语言交互改变界面外观的演示型项目

适合人群

熟悉 Next.js App Router 与 API Routes 的前端开发者
愿意注册并维护 OpenRouter、Gemini、Pinecone、Tavily 等多个 API 账号的用户
以个人展示为目的、能接受外部服务依赖的独立开发者

上手与定制指南

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

1
启动前必须在 .env 中配置邮件、Abstract API、OpenRouter、Tavily、Pinecone、Google Gemini 及 JWT 相关变量，否则应用无法正常工作
2
需编辑 components/character/character.ts 填入个人信息，AI 才能正确代表作者
3
首次运行会创建并保存向量嵌入，耗时明显长于常规启动
4
开发环境下需在 api/chat/route.ts 与 api/theme/route.ts 中取消 localhost 地址的注释
5
向量库默认使用 768 维、余弦相似度与 Starter 免费档，可在 lib/embeddings.ts 的 initializeVectorStore 中调整

查看仓库使用说明