Contributors Showcase Project 🌟

A beautiful, responsive website that showcases all contributors to our open-source community. Built with vanilla HTML, CSS, and JavaScript.

🎯 Features

• 🎨 Clean and modern card-based design
• 📱 Fully responsive layout
• 🔄 Automatic GitHub avatar integration
• 🚀 Fast and lightweight (no frameworks)
• 🛠 Easy to contribute
• 🤝 Community-driven

🖥 Live Demo

Visit our live site: Contributors Showcase

🤝 How to Contribute

We welcome contributions from everyone! Adding yourself to the showcase is easy:

1. Fork this repository
2. Create your profile JSON file in the data directory
3. Submit a Pull Request

For detailed instructions, check out our Contributing Guidelines.

🚀 Quick Start

1. Clone the repository:

git clone https://github.com/Jobin-S/contributors-showcase.git

2. Navigate to the project directory:

cd contributors-showcase

3. Open with a live server:

   • Using VS Code: Install "Live Server" extension and click "Go Live"
   • Using Python: python -m http.server 8000
   • Using Node.js: npx serve

4. Visit http://localhost:8000 (or the URL shown in your terminal)

📁 Project Structure

contributors-showcase/
├── index.html          # Main HTML file
├── styles.css          # Styling
├── script.js           # JavaScript functionality
├── data/              # Contributor JSON files
│   └── *.json         # Individual contributor files
├── CONTRIBUTING.md    # Contribution guidelines
└── README.md         # Project documentation

🛠 Technologies Used

• HTML5
• CSS3 (with Grid and Flexbox)
• Vanilla JavaScript
• GitHub API (for avatars)

✨ Features in Detail

• Dynamic Loading: Automatically loads all contributor files from the data directory
• GitHub Integration: Fetches profile pictures directly from GitHub
• Responsive Design: Looks great on all devices
• Error Handling: Graceful fallbacks for missing data
• Modern Layout: CSS Grid for responsive card layout
• Hover Effects: Smooth animations for better UX

🤔 Common Issues

• Images Not Loading: Make sure your GitHub username is correct
• CORS Issues: Use a local server instead of opening files directly
• JSON Errors: Validate your JSON file format

📝 License

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

🙏 Acknowledgments

• Thanks to all our amazing contributors
• GitHub for providing the avatar API
• The open-source community

📞 Support

Need help?

• Create an issue
• Check existing issues for solutions
• Read our Contributing Guidelines

🌟 Contributors

Check out all our amazing contributors on the live site!

---

Made with ❤️ by the open source community