Nagpal45/portfolio

# 🚀 个人作品集 欢迎来到 **Portfolio** 仓库！这是一个现代化、全动画且高度响应的个人开发者作品集。它专为卓越的性能和视觉体验而构建，在保持顶级 SEO 和无障碍实践的同时，展示了项目、工作经验和技术技能。 ## 🌟 主要特性 - **现代技术栈**：利用 Next.js 16 App Router 和 React 19 实现最大渲染性能。 - **丰富动画**：由 **Framer Motion** 驱动的沉浸式用户体验，包括流畅的页面过渡和滚动显示效果。 - **交互式 UI**：自定义动画 3D 光标、集成的交互式骰子组件以及精美的布局设计。 - **内置安全**：使用 `isomorphic-dompurify` 强化表单，持续净化所有用户输入以防止 XSS 注入。 - **实时联系表单**：集成 **EmailJS**，实现直接发送到您收件箱的实时作品集咨询。 - **优化 SEO**：生成语义化 `sitemap.ts`、`robots.ts`、本地化元数据和优化字体。 - **简历分发**：内置简洁的 UI 流程，用于下载专业简历。 ## 🛠️ 使用的技术与概念 | 类别 | 技术 | 用途与实现 | | :--- | :--- | :--- | | **核心框架** | **Next.js 16** (App Router) | 服务端渲染 (SSR)、静态生成 (SSG)、高级布局和路由。 | | **UI 库** | **React 19** | 利用 React 的最新范式，通过 React Compiler 自动进行记忆化。 | | **类型安全** | **TypeScript** | 跨组件和净化数据接口的严格类型定义。 | | **样式引擎** | **Tailwind CSS v4** & CSS Modules | 结合实用优先的速度与自定义 CSS 作用域，用于复杂的交互组件。 | | **动画** | **Framer Motion v12** | 所有 UI 微交互、布局过渡和 `motion.tsx` 包装器的核心引擎。 | | **表单处理** | **EmailJS Browser** | 客户端 API，允许从 `ContactClient.tsx` 安全地直接路由电子邮件。 | | **输入安全** | **Isomorphic DOMPurify** | 跨环境工具，确保传入的任何标记都经过彻底净化 (`lib/sanitize.ts`)。 | ## 📂 项目结构 快速了解应用程序的组织方式： ``` portfolio-2026/ ├── app/ # Next.js 16 App Router Entry Points │ ├── contact/ # Contact Page and Client Forms │ ├── projects/ # Project Showcase Page │ ├── layout.tsx # Global Application Layout │ ├── page.tsx # Homepage │ └── sitemap/robots # Crawlability logic ├── components/ # Reusable Modular React Components │ ├── Homepage/ # Custom complex UI (Intro, Dice, Techstack, Experience) │ ├── ui/ # Core isolated design system components (Motion, Resume Button) │ ├── cursor/ # Custom animated mouse follower │ └── navbar/footer # Global persistent navigational elements ├── lib/ # Utility functions (e.g., sanitize.ts) └── public/ # Static assets (images, icons, resume PDFs) ``` ## ⚙️ 本地设置与开发 要在本地计算机上运行此项目，请按照以下步骤操作： ### 1. 环境要求 确保已安装 **Node.js 20+**。 ### 2. 安装 克隆仓库并安装所有依赖项： ``` git clone https://github.com/your-username/portfolio-2026.git cd portfolio-2026 npm install ``` ### 3. 环境变量 要使联系表单完全正常运行，您需要设置一个 [EmailJS](https://www.emailjs.com/) 帐户。 在根目录中创建一个 `.env.local` 文件并定义以下变量： ``` NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key ``` ### 4. 运行开发服务器 启动本地 Next.js 服务器： ``` npm run dev ``` 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 以体验该站点！ ## 🚀 部署 该项目通过根目录中的 `vercel.json` 配置针对 **Vercel** 进行了高度优化。 通过将 Git 仓库连接到 Vercel 项目或运行以下命令即可轻松部署： ``` npx vercel ``` 不要忘记在构建之前在 Vercel 控制面板中配置您的环境变量。 *利用 Next.js 和 Framer Motion 的前沿技术，充满 ❤️ 构建。*

标签：3D交互, App Router, CSS Modules, DOM净化, EmailJS, Framer Motion, Next.js 16, React 19, React Compiler, SSG, SSR, Tailwind CSS, TypeScript, UI动画, Web安全, XSS防护, 个人品牌, 作品集网站, 全栈, 响应式设计, 安全插件, 技术SEO, 无障碍访问, 现代Web开发, 站点地图, 简历下载, 联系表单, 自动化攻击, 蓝队分析, 语义化HTML, 软件工程师