A fully responsive, modern, and dynamic website for Midnapore Medical College's annual fest Impulse 2K25, built using:
- ⚛️ React + Vite
- 💨 Tailwind CSS v4
- 🎥 3D & video background elements
- 🎬 Animated transitions with Framer Motion
- 🌙 Dark/light theme support
- 🧭 React Router SPA routing
- ☁️ Deployed on Vercel
├── public/ # Public assets ├── src/ │ ├── assets/ # All images/videos/logos │ ├── components/ # Reusable components (Navbar, Footer, Loader, etc.) │ ├── data/ # Static JSON data (sponsor logos, members) │ ├── pages/ # Main page components (Home, Events, Schedule, etc.) │ ├── App.jsx # Root component with Router │ └── main.jsx # React entry point ├── tailwind.config.js # Tailwind v4 setup ├── index.html # Root HTML └── vercel.json # SPA rewrite for Vercel routing
- ✅ Fully responsive layout
- ✅ Framer Motion phrase animation
- ✅ Dynamic routing using
react-router-dom - ✅ Background video sections for immersive design
- ✅ Sponsor grid with 3D hover animation
- ✅ Teaser & gallery with video and carousel
- ✅ Modern, accessible UI with Tailwind
- ✅ Deployment-ready for Vercel (with SPA routing support)
git clone https://github.com/your-username/impulse-2k25.git
cd impulse-2k25npm install npm run devApp will be served at http://localhost:5173
Create a vercel.json file in the root:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}This ensures all React routes work even on direct URL entry like /events, /gallery, etc.
| Page | Path | Description |
|---|---|---|
| Home | / |
Hero section with video bg, animated CTA |
| Events | /events |
Day-wise fest event cards |
| Schedule | /schedule |
Timetable of the full fest |
| Sponsors | /sponsors |
Sponsor logos grid with CTA |
| Gallery | /gallery |
Teasers, photos, reels, carousel |
| Members | /members |
Member cards by designation |
| About | /about |
About MMCH & Impulse Fest |
react-router-dom– Routingframer-motion– Animationstailwindcss– Utility-first styling@heroicons/react– Icons
-
🧠 Use
Linkfromreact-router-dominstead of<a>tags for internal routing:import { Link } from "react-router-dom"; <Link to="/events">Explore Events</Link>
-
🛑 Avoid
href="/events"directly — it causes full-page reloads and breaks SPA routing. -
📹 Use CDN-hosted videos (e.g., Cloudinary) with
preload="auto"to reduce lag and improve performance.
-
Fork the repository
-
Create a new branch for your feature or fix:
git checkout -b feature/your-feature
-
Commit your changes:
git commit -m "✨ Add new feature" -
Push to your fork:
git push origin feature/your-feature
-
Submit a Pull Request ✅