Frontend Design
Layout Modes
| Page Type | Layout |
|---|---|
| Home / Event List / Resources / About / Honor Wall | Header + Navbar + Main Content + Footer |
| Event Detail / Resource Detail / Department Page | Navbar + Main Content + Footer |
| 404 | Navbar + Fallback Page + Footer |
Responsive Strategy
- Use Tailwind responsive classes primarily:
md:,lg:, etc. - Navbar provides a mobile hamburger menu that expands/collapses on click
- Use
useRef+useEffectto close the menu when clicking outside the page
Animation & Interaction
| Implementation | Purpose |
|---|---|
| Intersection Observer | Trigger animations when scrolling into viewport (e.g., Home.js) |
| Framer Motion | Dropdown menus, list transitions, AnimatePresence |
| Custom keyframes | fadeInUp, fadeInLeft, fadeIn, softPulse |
| ParallaxBackground | Parallax scroll background |
| ImageGallery | Image gallery display |
Navigation Structure
- Events: Spring Festival Carnival, If You Are The One, National Day Gala, Graduation Ball, Freshman Meetup, Past Highlights
- Resources: Join Us (external link), Freshman Handbook (external link), Career Development Hub, About Website
- About: Tech Department, Presidium, Culture & Entertainment Department, Career Development Department, Publicity Department, Media Department, Marketing Department, General Affairs Department
- Honor Wall: 2023-2024, 2024-2025 anchors