TIGC History - 科创中心前端项目

本项目是 科创中心 (Technology and Innovation Guidance Center) 的官方历史与成员展示网站。展示平台+前端入门实战！通过实践学习HTML、CSS和JavaScript。

“如果你停止，就是谷底。如果你还在继续，就是上坡。” 欢迎来到科创中心，在这里开始你的探索之旅！

✨ 项目特色

• 动态主页: 主页采用深色、动态渐变的背景，并根据任期年份动态加载和分组核心成员。
• 交互式部门展示: 全新的封面页 (index4cov.html) 带有翻转动画，作为进入各个部门页面的门户。
• 丰富且独特的部门页面: 每个部门都有自己高度定制、独立封装的单页应用，展示了广泛的Web技术：
  • 技术推广部 (jt): 拥有基于时钟的交互式项目时间线、用于部门内训的全屏幻灯片，以及一个带深色模式切换的独立成员详情页。
  • 前研探索部 (qy): 展示了实验性的UI设计，包括交互式迷宫、3D卡片轮播和动画扇形布局。
  • 文宣部 (wx): 呈现了艺术化的拼贴风格布局，通过弹窗（Modal）展示信息，并配有唯美的樱花飘落粒子特效。
  • 创新实践部 (cj): 提供简洁、专业的设计，可通过时间轴浏览历届成员，并为每个核心活动设有详细的独立页面。
• 全新的“加入我们”板块: 主页现已包含专门的招新部分，附有二维码以及指向官方推文和报名表的链接。
• 新手友好: 项目包含大量注释，特别是 example/exp_index.html 文件，它是一个为新成员准备的、手把手的教学示例。
• 数据驱动内容: 主页的成员列表由 script.js 文件中的JavaScript数组动态生成，实现了内容与结构的初步分离。

🛠️ 技术栈

• HTML5: 语义化标签构建页面结构。
• CSS3: 用Flexbox、Grid布局、CSS变量以及高级动画/过渡效果，现代化的响应式布局。
• JavaScript (ES6+): DOM操作、事件处理、动态内容生成和复杂的动画效果。
• Font Awesome: 丰富的图标库。
• Google Fonts: Web字体支持。

📂 项目结构

模块化结构，每个部门都拥有自己独立的文件集。

/
├── index.html              # 网站主页
├── index4cov.html          # 部门展示封面页
├── script.js               # 主页的核心脚本 (包含成员数据)
├── style.css               # 主页的全局样式表
├── readme.md               # 本说明文件
│
├── departments/            # 存放所有部门的独立页面
│   ├── cj/                 # 创新实践部 (一个简洁的多页面示例)
│   │   ├── dep_home.html
│   │   └── ...
│   ├── jt/                 # 技术推广部 (一个功能丰富的复杂示例)
│   │   ├── dep_home.html
│   │   ├── members.html
│   │   ├── project.html
│   │   ├── style.css
│   │   └── script.js
│   ├── qy/                 # 前研探索部 (实验性UI示例)
│   │   ├── department_intro.html
│   │   └── ...
│   ├── wx/                 # 文宣部 (艺术化布局与弹窗)
│   │   ├── dep_home.html
│   │   └── ...
│   └── example/            # 包含一个带有详细注释的教学页面
│       └── exp_index.html
│
└── image/                  # 存放共享的图片资源

🚀 如何开始与贡献

欢迎新成员为本项目做出贡献！以下是为你的部门添加或更新信息的步骤：

1. 克隆仓库: 首先，将此项目克隆到你的本地计算机。
2. 添加/修改你的部门页面:
   • 进入 departments/ 文件夹，找到你所在部门对应的目录 (例如 jt/)。
   • 如果你的部门还没有页面，可以复制 departments/cj/ 的内容作为一个简洁、清晰的模板，或者复制 departments/jt/ 作为一个功能更丰富的起点。
   • 对于初学者，example/exp_index.html 文件是一个绝佳的起点，因为它包含了逐行解释代码的详细注释。
3. 更新主页信息:
   • 打开根目录下的 script.js 文件。
   • 在 members 数组中，添加或修改你的个人信息（姓名、角色、简介、头像链接等）。
   • 重要: 确保你的 departmentId 和 year 属性填写正确，这样你的信息卡片才能在主页的正确位置显示。
4. 添加图片:
   • 将你的头像或其他部门活动照片放入 image/ 文件夹（或你部门特定的图片文件夹）。
   • 在代码中引用图片时，请使用相对路径 (例如，从部门页面引用主图片文件夹：../image/your-photo.jpg)。
5. 提交你的更改: 完成修改后，提交并推送你的代码。

---