/NiMoment2023

Primary LanguageJavaScript

NiMoment2023

上海交通大学网络信息管理部(NIMO)2023年度业务报告(首次发布)

Features

  • 展示年度业务数据
  • 展示个人业务数据
  • 展示个人年度成就
  • 实现动态UI
  • 优化用户交互体验

UI设计与交互体验

  • 首页
    • 跟随鼠标视差滚动
    • 呼吸文字效果,打字机动画,同时加载数据
  • 部门数据界面
    • 飞船降落视差滚动
    • message进入视口后延迟弹出
    • 查看消息
  • 个人数据界面
    • 动态UI(组件呼吸、旋转效果)
    • 数字攀升计数
    • 昼夜切换,白天/黑夜响应按钮
  • 个人成就界面
    • 视觉冲击卡片

效果展示

详见 视频展示

  1. 首页

image

  1. 部门数据界面

image

  1. 个人数据界面

image

image

  1. 个人年度成就

image

  1. 尾页

安装与运行程序

克隆项目

> $ git clone https://github.com/Uric369/NiMoment2023.git

进入React项目目录下安装依赖包

> $ npm install

在React项目目录下运行前端

> $ npm run start

发布项目文件命令

> $ npm run build

执行完npm run start命令后,打开浏览器 http://localhost:3000/查看项目