🌟 Open Source Contributor Directory

A modern, interactive directory showcasing open-source contributors and community members. Built with Next.js 14, React, TypeScript, and Tailwind CSS.

This project serves as both a community showcase and a hands-on workshop repository for first-time open-source contributors to practice submitting Pull Requests (PRs), debugging code, and adding custom profile cards.

---

✨ Features

• 🎴 Contributor Cards: View contributor bios, skills, GitHub avatars, and social links.
• 🔍 Interactive Search & Filtering: Filter contributors in real-time by name, skill, or role.
• 📊 Community Stats: Dynamic count of active contributors, total skills represented, and contributions.
• 🎨 Modern Dark UI: Designed with Tailwind CSS, micro-interactions, and glassmorphism styling.
• 🚀 Workshop Ready: Includes step-by-step contribution tasks and exercise issues for PR practice.

---

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React

---

🚀 Getting Started

Prerequisites

Make sure you have Node.js (v18.x or higher) and npm installed.

Installation

1. Clone the repository:

   git clone https://github.com/OpenSource-UIT/Open-Source-Contributor-Directory.git
   cd Open-Source-Contributor-Directory

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser to view the application.

---

🤝 How to Contribute

We welcome all contributions! Whether you want to add your own profile card or tackle one of the workshop exercises:

1. Read our CONTRIBUTING.md for detailed instructions.
2. Add your entry to src/data/contributors.json.
3. Create a feature branch and submit a Pull Request!

---