个人介绍网站设计

针对你的要求（前端工程师 + webgl (three.js) + echarts + 大屏展示 + mongodb），我给你列一套比较全面、有深度的个人网站功能点和内容规划，保证既炫技又实用：

🌟 网站核心板块功能建议：

炫酷首页（WebGL特效）
- 使用 Three.js 制作动态背景，比如：
  - 粒子流动特效（例如星空、粒子飞舞）
  - 3D 地球（带旋转、交互）
  - 低多边形动画场景
- 首页一句话介绍自己（比如：「Hi，我是 XXX，专注前端与 3D 交互开发」）
个人简介 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 保存访问数据（可以用简单埋点脚本）
3D交互小应用（FunLab）
- 小型 WebGL 交互 Demo，比如：
  - 3D 物理模拟（弹跳球、布料模拟）
  - 自己制作一个简单的小型 3D 游戏（比如 First-Person View 行走）
  - 用 Three.js 自建一个小型虚拟展厅
留言板/访客系统
- 支持发表留言，存储在 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？我可以针对性优化）