NSS IIT Guwahati Website 🌟

A modern, responsive website for the National Service Scheme (NSS) cell of IIT Guwahati, built with React and modern web technologies.

🚀 Features

• Interactive Hero Section

  • Dynamic content slider with Swiper.js
  • Smooth animations and transitions
  • Responsive navigation menu
  • Mobile-friendly hamburger menu

• Activities Showcase

  • Filter activities by category
  • Responsive grid layout
  • Pagination for better content organization
  • Beautiful hover effects

• Objectives Section

  • Clear presentation of NSS goals
  • Interactive cards with hover effects
  • Responsive grid system
  • Optimized images

• Modern UI/UX

  • Clean and professional design
  • Smooth scrolling navigation
  • Responsive typography
  • Optimized for all devices

🛠️ Technologies Used

• Frontend Framework

  • React 18
  • React Router DOM
  • Swiper.js

• Styling

  • CSS3 with modern features
  • CSS Grid and Flexbox
  • CSS Variables
  • Responsive Design

• Development Tools

  • Vite
  • Git & GitHub
  • npm

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

1. Clone the repository

   git clone https://github.com/Ash469/NSS.git

2. Navigate to project directory

   cd NSS

3. Install dependencies

   npm install

4. Start development server

   npm run dev

5. Build for production

   npm run build

📁 Project Structure

nss-iitg/
├── public/
│   ├── images/
│   └── nss-logo.png
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Hero/
│   │   ├── Activity/
│   │   └── Objectives/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
└── README.md

🔧 Configuration

The project uses Vite for development and building. Key configuration files:

• vite.config.js - Vite configuration
• package.json - Project dependencies and scripts
• .gitignore - Git ignore rules

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Development Guidelines

• Follow React best practices
• Use functional components and hooks
• Maintain consistent code formatting
• Write meaningful commit messages
• Document complex logic
• Optimize images before committing

📱 Responsive Design

The website is fully responsive with breakpoints at:

• Mobile: 480px
• Tablet: 768px
• Desktop: 1024px
• Large Desktop: 1200px

🚀 Performance Optimization

• Lazy loading of images
• Code splitting
• Optimized asset delivery
• Minimized bundle size
• Efficient CSS animations

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

• Project Lead: Ayush Shandilya
• UI/UX Design: Ayush Shandilya
• Development: Ayush Shandilya

📞 Contact

For any queries regarding the project, please contact:

• Email: nss@iitg.ac.in
• Website: NSS IIT Guwahati

🙏 Acknowledgments

• IIT Guwahati
• NSS Cell
• All contributors and volunteers

---

Made with ❤️ by Ayush Shandilya