个人介绍网站设计
针对你的要求（前端工程师 + webgl (three.js) + echarts + 大屏展示 + mongodb），我给你列一套比较全面、有深度的个人网站功能点和内容规划，保证既炫技又实用：
🌟 网站核心板块功能建议：
-
炫酷首页（WebGL特效）
- 使用 Three.js 制作动态背景，比如：
- 粒子流动特效（例如星空、粒子飞舞）
- 3D 地球（带旋转、交互）
- 低多边形动画场景
- 首页一句话介绍自己（比如：「Hi，我是 XXX，专注前端与 3D 交互开发」）
- 使用 Three.js 制作动态背景，比如：
-
个人简介 About Me
- 技能树（用 ECharts 做技能雷达图或环形图）
- 个人经历时间轴（Three.js / ECharts timeline 展示）
- 下载简历（PDF）
-
作品展示 Portfolio
- 项目列表，可以是 3D 卡片切换效果（Three.js）
- 每个作品点击后进入详细页，展示：
- 项目简介
- 技术栈图（ECharts）
- 参与角色 / 解决了什么问题
-
博客系统 Blog
- 支持 Markdown 编辑
- MongoDB 后端管理文章内容
- 分类、标签、搜索功能
- 推荐可以自己写一个极简 CMS 后台（Next.js/Node.js + MongoDB）
-
数据可视化大屏（Data Dashboard）
- 使用 ECharts 搭建：
- 地图热力图（比如访问来源国家、城市）
- 网站访问量、用户行为、项目点击量等统计（实时更新）
- 3D 柱状图、折线图联动展示
- 后端 MongoDB 保存访问数据（可以用简单埋点脚本）
- 使用 ECharts 搭建：
-
3D交互小应用（FunLab）
- 小型 WebGL 交互 Demo，比如：
- 3D 物理模拟（弹跳球、布料模拟）
- 自己制作一个简单的小型 3D 游戏（比如 First-Person View 行走）
- 用 Three.js 自建一个小型虚拟展厅
- 小型 WebGL 交互 Demo，比如：
-
留言板/访客系统
- 支持发表留言，存储在 MongoDB
- 可以用 WebSocket 实时推送新留言（加强互动感）
-
后台管理系统（Admin Panel）
- 登录鉴权（JWT）
- 博客管理、数据大屏配置、留言管理
- 全栈实践机会：Next.js + MongoDB + Express/Koa
🌟 技术点推荐：
| 分类 | 技术点 |
|---|---|
| 前端框架 | React + Next.js / Vue 3 (根据喜好选择) |
| 3D 技术 | Three.js、GLSL shader 入门、3D 模型加载（GLTF） |
| 数据可视化 | ECharts + ECharts GL（支持 3D 效果） |
| 后端 API | Node.js + Express / Koa + MongoDB Atlas 云数据库 |
| 用户鉴权 | JWT + OAuth（如果想加 Github 登录） |
| 部署平台 | Vercel / Netlify / 自己搭建 VPS (Nginx) |
| 其他增强 | WebSocket 实时更新、Docker 容器化部署 |
🌟 网站设计风格建议：
- 现代极简风（Minimalism）+ 微动效（Framer Motion / GSAP）
- 黑色/深色背景 + 亮色元素（突出 3D 效果）
- 模块化布局，保持页面清爽
- 动态元素不过多，点到为止，重点突出你的专业能力
🌟 一个简单的导航结构可以是：
首页 (Home) ➔ 个人介绍 (About) ➔ 作品集 (Portfolio) ➔ 博客 (Blog) ➔ 数据大屏 (Dashboard) ➔ 实验室 (FunLab) ➔ 留言 (Message)
要不要我帮你顺便列一个初步的项目文件夹结构？如果你需要，我可以给你搭个最初版的骨架。😎
要的话告诉我，顺带说下你倾向用 React 还是 Vue？（我可以按你的栈来配合）✨
明白了！你是要把刚才那份网站功能规划，整理成一份清晰的规则（rule）格式，好直接放到像 MCP（Multi-Character Prompt） 或类似 AI 协作开发场景里用，对吧？
我理解你的需求了，我这就帮你把它标准化整理成适合AI理解和执行的规则文档（rule），比如这样结构化：
Personal Website Development Rule
(For MCP AI Development Assistance)
🛠️ Project Overview
- 目标：开发一个前端工程师个人网站，展示技能、作品、博客、数据可视化能力。
- 技术关键词：Three.js、ECharts、MongoDB、数据大屏展示、可视化、WebGL。
🧩 Required Core Functionalities
1. Home Page (首页)
- Three.js制作动态背景特效（如粒子、星空、3D地球）
- 展示一句话介绍（自我简介）
- 简洁，突出视觉冲击力
2. About Me (个人介绍)
- 使用ECharts绘制技能雷达图或环形图
- 个人经历以时间轴形式展示（可选Three.js/ECharts timeline）
- 支持简历下载（PDF）
3. Portfolio (作品展示)
- 3D卡片式项目展示
- 每个项目包含简介、技术栈图（ECharts）、项目亮点描述
4. Blog System (博客系统)
- 支持Markdown文章编辑
- 使用MongoDB存储文章
- 分类、标签、搜索功能
- 简易CMS后台管理（Next.js/Node.js + MongoDB）
5. Data Visualization Dashboard (数据可视化大屏)
- ECharts搭建数据大屏：
- 网站访问来源地图（GeoMap）
- 访问量、用户行为、项目热度
- 柱状图、折线图、热力图联动展示
- 后端MongoDB存储并提供数据接口
6. FunLab (3D小应用实验室)
- 搭建小型Three.js实验Demo（如物理模拟、3D小游戏）
- WebGL互动性体验
7. Message Board (留言系统)
- 用户可发表留言
- MongoDB存储
- 支持WebSocket实时推送留言更新
8. Admin Panel (后台管理)
- 登录鉴权（JWT）
- 博客管理、数据可视化配置、留言管理
- 支持内容增删改查（CRUD）
🛠️ Technical Stack
| 层级 | 技术要求 |
|---|---|
| 前端 | React + Next.js 或 Vue3任选其一 |
| 3D渲染 | Three.js (支持GLTF模型加载) |
| 可视化 | ECharts + ECharts GL |
| 后端API | Node.js + Express/Koa + MongoDB Atlas |
| 用户鉴权 | JWT 或 OAuth（Github登录可选） |
| 实时通讯 | WebSocket |
| 部署 | Vercel / Netlify / VPS服务器 |
| 其他增强 | Docker部署（可选）、自动化构建 |
🎨 Design Requirements
- 风格：现代极简，深色背景优先，细腻动效
- 动效：Framer Motion、GSAP加强细节
- 布局：模块化、响应式（移动端适配）
- 交互：轻微但流畅，体验自然
🌐 Site Navigation Structure
首页 (Home) ➔ 个人介绍 (About) ➔ 作品集 (Portfolio) ➔ 博客 (Blog) ➔ 数据大屏 (Dashboard) ➔ 实验室 (FunLab) ➔ 留言 (Message)
📋 Rule Summary
- 以Three.js+ECharts+MongoDB为核心技术。
- 确保每一模块有独立清晰的设计稿与功能清单。
- 开发过程需保持良好的代码规范，模块化、组件化。
- 重要特性如博客、数据可视化、3D交互必须完成。
- 部署上线后需要进行性能优化（如资源懒加载、Three.js对象回收、图表数据分页加载）。
- 后台管理可适当简化，但前台展示需完整炫酷。
- 优先采用TypeScript开发（可选）。
✅ 以上就是一个标准可直接交给AI协助开发的 “规则文档（rule）版”。
需要的话，我还可以帮你顺便把任务拆分成一个详细的开发阶段和子任务清单（比如可以给AI喂 Task Tree 形式），要不要一起做？😎
要的话告诉我！🚀
（另外顺便说下：你想初版是用 Next.js 还是 Vue3+Vite？我可以针对性优化）