Setif Developers Group (SDG) Website

🚀 Overview

This repository contains the source code for the official website of the Setif Developers Group (SDG). SDG is a dynamic scientific club affiliated with the Faculty of Sciences at Ferhat Abbas Sétif 1 University.

The website serves as a hub for the community, showcasing our activities, departments, members, and projects. It also provides a portal for new members to join the club.

✨ Features

• Modern & Responsive Design: Built with a mobile-first approach using Tailwind CSS, ensuring a seamless experience across all devices.
• Dynamic Navigation: Smooth scrolling for internal sections and client-side routing for external pages (like Registration).
• Interactive Elements:
  • Hero Section: Engaging introduction with key statistics.
  • Departments: Detailed overview of our specialized teams (Administration, Development, Design, Media, Organization, Competitive).
  • Projects Showcase: Highlighted projects with hover effects and details.
  • Members Gallery: Spotlight on our core team members and their roles.
  • Partners: A section dedicated to our collaborators and sponsors.
• Registration Portal: A dedicated page for new members to apply, featuring a comprehensive form.
• Contact Form: Integrated contact section for inquiries.
• Animations: Smooth fade-in and scroll animations for a polished feel.

🛠️ Technology Stack

This project is built using modern web development technologies:

• Frontend Framework: React (v18)
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router
• Icons: Lucide React

📦 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/setif-developers-group/website.git
   cd website

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev

   The application will be available at http://localhost:5173.

Building for Production

To create a production-ready build:

npm run build

The output will be in the dist directory.

📂 Project Structure

src/
├── components/       # Reusable UI components (Navbar, Hero, About, etc.)
├── types/           # TypeScript type definitions
├── App.tsx          # Main application component & Routing setup
├── main.tsx         # Entry point
└── index.css        # Global styles and Tailwind directives
public/              # Static assets (images, logos)

🤝 Contributing

We welcome contributions from the community! If you'd like to improve the website:

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

📞 Contact & Social Media

Connect with us:

• Email: algeria.data@gmail.com
• LinkedIn: Setif Developers Group
• Instagram: @setif_developers_group
• Facebook: Setif Developers Group
• GitHub: setif-developers-group

---

Made with ❤️ by the Setif Developers Group