arunjitk/Resume-OpenCode

# ARUNJIT.K — 赛博朋克安全作品集 这是为 Arunjit K（拥有 8 年以上威胁狩猎、事件响应和云安全经验的高级安全分析师）打造的单页 3D 交互式作品集网站。    ## 预览  ## 功能 ### 视觉效果 - **矩阵代码雨** — 动态下落的代码雨背景（基于 Canvas） - **CRT 扫描线** — 营造复古显示器感觉的微妙水平扫描线叠加层 - **故障动画** — 标题和悬停状态下的 CSS 驱动故障效果 - **自定义光标** — 带有 GPU 加速拖尾效果的发光光标 - **晕影与网格** — 增强深度感的晕影和透视网格图层 ### 3D 元素（Three.js - 懒加载） - **主视觉地球** — 主视觉区域中旋转的线框地球 - **技能球体** — 交互式 3D 技能可视化（降级备用为六边形网格） ### 交互功能 - **终端彩蛋** — 按 `` ` `` 打开秘密终端 - **Konami Code** — 输入 ↑↑↓↓←→←→BA 获取惊喜 - **滚动显示** — 各区域在滚动时以动画形式出现 - **可过滤技能** — 按类别（核心、SIEM、云等）过滤技能 ### 后端 / 实时功能 - **联系表单** — 通过 Email (Resend) + Telegram 发送通知 - **下载线索捕获** — 收集访客信息以供简历下载 - **Hub 访问追踪** — 针对受限内容访问的 IP 地理位置追踪 - **实时聊天** — 集成 Telegram 的实时聊天功能 ### 页面区域（共 12 个） 1. **主视觉/开机** — ASCII 艺术、开机序列动画、3D 地球 2. **档案** — 以机密文件风格展示的个人简介 3. **工作经验** — 4 项任务卡片式时间轴（Smarsh、Trellix、OLA、SISA） 4. **技能矩阵** — 可过滤的六边形网格 + 3D 球体 5. **武器库** — 安全工具和平台网格 6. **项目** — 关联 GitHub 的项目卡片（ThreatScope、ThreatTrace、ChittyApp、FundLens） 7. **教育背景** — 终端风格的教育记录 8. **专业认证** — 带有全息徽章效果的卡片（13 项认证） 9. **奖项** — 带有引用说明的滑入式奖项横幅 10. **语言能力** — 英语、马拉雅拉姆语、印地语、泰米尔语、泰卢固语的进度条 11. **兴趣爱好** — 离线活动（摄影、游戏） 12. **实地记录** — 摄影画廊（镜头记录） 13. **联系方式** — 终端风格的联系表单（带 mailto） ## 技术栈 ### 前端 - **HTML5** — 具有可访问性特性的语义化标记 - **CSS3** — 自定义属性（变量）、动画、响应式设计 - **JavaScript (ES6+)** — 原生 JS，无框架 - **Three.js** — 3D 地球和技能球体（懒加载） - **Google Fonts** — Share Tech Mono、Orbitron、IBM Plex Mono ### 后端 - **Express.js** — Node.js Web 服务器 - **Resend** — 邮件发送 API - **Telegram Bot API** — 通知与实时聊天 - **Vite** — 构建工具与开发服务器 ## 文件结构 ``` Resume-OpenCode/ ├── index.html # Main HTML file ├── server.js # Express server with all API routes ├── vite.config.js # Vite configuration ├── package.json # Dependencies ├── ecosystem.config.js # PM2 production config ├── vercel.json # Vercel deployment config ├── css/ │ ├── style.css # Main stylesheet │ └── sim.css # Attack simulation styles ├── js/ │ ├── rain.js # Matrix digital rain effect │ ├── animations.js # Scroll reveals, cursor, easter eggs, parallax │ ├── globe.js # 3D wireframe globe (Three.js) │ ├── skills-sphere.js # 3D skills sphere (Three.js) │ ├── gallery.js # Photography gallery │ ├── github-heatmap.js # GitHub contribution heatmap │ ├── attack-sim.js # Attack simulation functionality │ └── chat.js # Live chat client ├── api/ │ ├── contact.js # Contact form handler (also in server.js) │ └── download-lead.js # Resume download lead capture ├── dist/ # Built production files ├── ResumePDF/ # PDF resume └── README.md # This file ``` ## API 端点 | 方法 | 端点 | 描述 | |--------|----------|-------------| | POST | `/api/contact` | 联系表单 - 发送邮件 + Telegram | | POST | `/api/download-lead` | 简历下载的线索捕获 | | POST | `/api/hub-access` | 使用 IP 归属地追踪受限内容的访问 | | GET | `/api/chat/events` | 实时聊天的 SSE 流 | | POST | `/api/chat/message` | 向 Telegram 发送聊天消息 | | GET | `/api/telegram/set-webhook` | 配置 Telegram webhook | ## 本地运行 ### 开发环境 ``` cd /Users/n50/Documents/Code-Project/Resume-OpenCode npm install npm run dev ``` 在 http://localhost:5173 打开 ### 生产环境构建 ``` npm run build npm start ``` 在 http://localhost:3000 运行 Express 服务器 ### PM2 生产环境 ``` npx pm2 start ecosystem.config.js ``` ## 环境变量 创建一个 `.env` 文件： ``` PORT=3000 RESEND_API_KEY=re_xxx RESEND_FROM_EMAIL=your@email.com TELEGRAM_BOT_TOKEN=xxx TELEGRAM_CHAT_ID=xxx ``` ## 响应式断点 - **桌面端**：1200px+ - **平板端**：768px - 1199px - **移动端**：< 768px ## 无障碍访问 - `prefers-reduced-motion` 支持 — 为偏好减少动态效果的用户禁用动画 - 交互元素上的 ARIA 标签 - 键盘可导航（如有需要，可通过 CSS 隐藏自定义光标） ## 自定义 ### 颜色（在 `style.css` 中） ``` :root { --matrix-green: #00FF41; --cyber-cyan: #00F0FF; --neon-magenta: #FF00FF; --dark-bg: #0A0A0A; /* ... */ } ``` ### 内容 编辑 `index.html` 以更新： - 档案区域的个人资料信息 - 工作经验时间轴项目 - 技能六边形网格项目 - 项目详情和 GitHub 链接 - 联系信息 ## 已知问题 - **技能球体降级**：如果 Three.js 加载失败，将转而显示六边形网格 - **自定义光标**：在 body 上使用了 `cursor: none` — 可能需要针对触摸设备进行调整 ## 浏览器支持 - Chrome 80+ - Firefox 75+ - Safari 13+ - Edge 80+ ## 致谢 - **Three.js** — 用于 3D 地球和球体渲染 - **Google Fonts** — Share Tech Mono、Orbitron、IBM Plex Mono - **ASCII Art** — 为 "ARUNJIT.K" 标题生成

标签：3D交互, CRT复古效果, Express.js, IP地理位置, MITM代理, Telegram机器人集成, Three.js, Web3D, WebGL, 个人作品集, 单页应用, 安全专家简历, 安全分析师, 实时聊天, 彩蛋设计, 技能展示, 故障艺术, 数据可视化, 滚动动画, 矩阵代码雨, 简历下载, 网络安全, 自定义脚本, 访客追踪, 赛博朋克, 邮件通知, 隐私保护, 高级安全分析师