个人网站versionI正式上线了！Personal Website for Jing Liu

Personal Website for Jing Liu

网站地址：

FE_Jinger’s Personal Website,Welcome !!!

技术栈:

React+TailwindCSS+AntDesign+Echart+Three+Canvas+BaiduMap

IDE:

Trea（国际版） AI IDE enpowers frontend development！！！

🌟 系统介绍

本系统采用​​React+TypeScript​​为核心的前端工程化方案，集成​​TailwindCSS+Ant Design​​构建现代化UI体系，融合​​ECharts+Three.js+Canvas​​实现数据可视化与动态交互，并接入​​百度地图API​​拓展地理信息服务，形成技术栈完备、响应式的个人网站解决方案。

🌟 网站核心板块功能：

1. 炫酷首页（WebGL特效）

   • 使用 Three.js /react-three制作动态背景：
     • 鼠标移动事件更新粒子吸引点
     • 动态粒子效果
     • 相关热门博客：React Three Fiber 详解：现代 Web3D 的利器
       
   • keyframes 动画
   • 媒体查询适配：Flex+媒体查询实现响应式适配
   • 文件下载（简历、作品）
     

2. 个人简介 About Me

   • 技能树（ ECharts 做条形动画技能树）
     

3. 作品集 Portfolio

   • 个人作品集（Ant-design）
   • 项目列表，每个作品点击后进入详细页，展示：
     • 项目源码/地址
     • 项目博客
     • 项目讲解

4. 博客

   • 虚拟列表展示：IntersectionObserver&滚动动画、懒加载、虚拟列表
     • 初次请求10条数据
     • 懒加载，滚动到底部加载更多
   • canvas生成博客主题图片
   • 异步请求的竞态处理：异步请求的竞
   • 按类别展示CSDN部分热门文章
     TODO: CMS 后台（Next.js/Node.js + MongoDB ）
     • 支持博客文章 Markdown和富文本编辑
     • 支持分类管理
     • 支持标签管理
     • LLM 辅助生成博客
       
       

5. 荣誉奖项

   • ECharts 图标可视&多端适配
   • 轮播图展示成果奖项和荣誉
     
     
     

6. 生活

   • 集成第三方地图Baidu Map
   • 地图要素适配
   • Arc轨迹迁移展示个人学习轨迹
     
     

7. 留言板/

   • 支持发表留言,支持表情包和图片评论
     TODO:数据管理至后台
     TODO:可以用 WebSocket 实时推送新留言
     

8. 3D交互小应用（FunLab）

   TODO：集成小型 WebGL 交互 Demo，如：

   • 古建筑在线交互
   • 城市灾害场景模拟
   • 其他 WebGL 交互效果

---

🌟 技术点推荐：

分类	技术点
前端框架	React + Next.js
3D 技术	Three.js、GLSL shader 入门、3D 模型加载（GLTF、3D Tiles、Obj等）
数据可视化	ECharts + bmapgl +AntDesign
后端 API	Next + MongoDB 云数据库
用户鉴权	JWT + OAuth（如果想加 Github 登录）
部署平台	Vercel / Ngnix+云服务器
其他增强	WebSocket 实时更新、Docker 容器化部署

---