个人网站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+媒体查询实现响应式适配
     • 文件下载（简历、作品）

       

     • 个人简介 About Me

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

         

       • 作品集 Portfolio

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

1. 博客

   • 虚拟列表展示：IntersectionObserver&滚动动画、懒加载、虚拟列表
     • 初次请求10条数据
     • 懒加载，滚动到底部加载更多
     • canvas生成博客主题图片
     • 异步请求的竞态处理：异步请求的竞
     • 按类别展示CSDN部分热门文章

       TODO: CMS 后台（Next.js/Node.js + MongoDB ）

       • 支持博客文章 Markdown和富文本编辑
       • 支持分类管理
       • 支持标签管理
       • LLM 辅助生成博客

         

         

       • 荣誉奖项

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

           

           

           

         • 生活

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

             

             

           • 留言板/

             • 支持发表留言,支持表情包和图片评论

               TODO:数据管理至后台

               TODO:可以用 WebSocket 实时推送新留言

               

             • 3D交互小应用（FunLab）

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

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

🌟 技术点推荐：