Rakesh9100 · Rakesh9100 · Jan 14, 2025 · Jan 12, 2025 · Jan 13, 2025 · Jan 14, 2025
diff --git a/assets/about/about.html b/assets/about/about.html
@@ -29,6 +29,7 @@
                     <li><a href="#"><i class="fas fa-circle-info"></i> About</a></li>
                     <li><a href="../../index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
                     <li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a></li>
+                    <li><a href="../contributors/contributor.html"><i class="fa-solid fa-users"></i>Contributors</a></li>
                     <li><a href="../contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
                 </ul>
                 <div class="theme-switcher">

diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -29,6 +29,7 @@
                     <li><a href="../about/about.html"><i class="fas fa-circle-info"></i> About</a></li>
                     <li><a href="../../index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
                     <li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a></li>
+                    <li><a href="../contributors/contributor.html"><i class="fa-solid fa-users"></i>Contributors</a></li>
                     <li><a href="#"><i class="fas fa-phone"></i> Contact</a></li>
                 </ul>
                 <div class="theme-switcher">

diff --git a/assets/contributors/contributor.css b/assets/contributors/contributor.css
@@ -0,0 +1,88 @@
+body {
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+    background-color: #f7f8fa;
+    color: #333;
+    line-height: 1.6;
+}
+
+.ctnr {
+    text-align: center;
+    max-width: 1200px;
+    width: 100%;
+    padding: 35px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    font-size: 3rem;
+    color: #1da1f2;
+    margin-top: 100px;
+    margin-bottom: 30px;
+    font-weight: bold;
+    letter-spacing: 2px;
+}
+
+.contributors-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: calc(10px + 1vw);
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+}
+
+/* Contributor card Css */
+
+.contributor-card {
+    background: #ffffff;
+    color: #333;
+    border-radius: 15px;
+    padding: 20px;
+    width: 250px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+}
+
+.contributor-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.contributor-card img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px solid #1da1f2;
+    margin-bottom: 15px;
+}
+
+.contributor-card h3 {
+    font-size: 1.4rem;
+    margin: 10px 0;
+}
+
+.contributor-card a {
+    display: inline-block;
+    margin: 5px 0;
+    color: #1da1f2;
+    font-weight: bold;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.contributor-card a:hover {
+    color: #004e64;
+    text-decoration: none;
+}
+
+@media (min-width: 768px) {
+    .contributors-grid {
+        gap: calc(10px + 1.5vw);
+    }
+}
diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicons/favicon1.png">
+    <link rel="stylesheet" href="../../style.css">
+    <link rel="stylesheet" href="./contributor.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
+    <title>Eventica | Contributors</title>
+</head>
+
+<body>
+    <!-- Navigation bar section -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="../../index.html" class="logo-container">
+                <img src="../images/logos/logo1.png" alt="Logo" class="logo">
+                <span class="logo-text">Eventica</span>
+            </a>
+            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="nav-items">
+                <ul class="nav-links">
+                    <li><a href="../../index.html"><i class="fas fa-house"></i> Home</a></li>
+                    <li><a href="../about/about.html"><i class="fas fa-circle-info"></i> About</a></li>
+                    <li><a href="../../index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
+                    <li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a></li>
+                    <li><a href="#"><i class="fa-solid fa-users"></i>Contributors</a></li>
+                    <li><a href="../contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
+                </ul>
+                <div class="theme-switcher">
+                    <button id="theme-toggle" aria-label="Change theme color">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="5"/>
+                            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>
+                        </svg>
+                    </button>
+                    <div class="theme-options">
+                        <button class="theme-btn" data-color="blue" aria-label="Blue theme"></button>
+                        <button class="theme-btn" data-color="red" aria-label="Red theme"></button>
+                        <button class="theme-btn" data-color="yellow" aria-label="Yellow theme"></button>
+                        <button class="theme-btn" data-color="green" aria-label="Green theme"></button>
+                        <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
+                    </div>
+                </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Contributors main section -->
+    <div class="ctnr">
+        <h1>Meet Our Contributors</h1>
+        <div id="contributors" class="contributors-grid"></div>
+    </div>
+
+    <!-- Footer section -->
+    <footer>
+        <p class="copyright">Created By Rakesh Roshan ❤️ | ©
+            <script>
+                document.write(new Date().getFullYear());
+            </script>: All Rights Reserved
+        </p>
+    </footer>
+
+    <!-- Scroll to top button -->
+    <a href="#" class="to-top">
+        <i class="fas fa-chevron-up"></i>
+    </a>
+
+    <script src="../../script.js"></script>
+    <script src="./contributor.js"></script>
+</body>
+
+</html>
diff --git a/assets/contributors/contributor.js b/assets/contributors/contributor.js
@@ -0,0 +1,65 @@
+const REPO_OWNER = "Rakesh9100";
+const REPO_NAME = "Eventica";
+const GITHUB_TOKEN = ""; // Optional: Add your GitHub personal access token to avoid rate limits
+
+async function fetchContributors() {
+    const contributorsContainer = document.getElementById("contributors");
+
+    try {
+        // Fetch contributors from the GitHub API
+        const response = await fetch(
+            `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contributors`, {
+                headers: GITHUB_TOKEN ? {
+                    Authorization: `token ${GITHUB_TOKEN}`
+                } : {},
+            }
+        );
+
+        if (!response.ok) throw new Error("Failed to fetch contributors");
+
+        const contributors = await response.json();
+        // Filter out the repository owner
+        const filteredContributors = contributors.filter(
+            (contributor) => contributor.login !== REPO_OWNER
+        );
+
+        filteredContributors.forEach((contributor) => {
+            // Create a card for each contributor
+            const card = document.createElement("div");
+            card.className = "contributor-card";
+
+            // Profile image
+            const img = document.createElement("img");
+            img.src = contributor.avatar_url;
+            img.alt = contributor.login;
+
+            // GitHub username
+            const name = document.createElement("h3");
+            name.textContent = contributor.login;
+
+            // GitHub profile link
+            const githubLink = document.createElement("a");
+            githubLink.href = contributor.html_url;
+            githubLink.target = "_blank";
+            githubLink.textContent = "GitHub Profile";
+
+            // Append elements to card
+            card.appendChild(img);
+            card.appendChild(name);
+            card.appendChild(githubLink);
+
+            // Append card to container
+            contributorsContainer.appendChild(card);
+        });
+    } catch (error) {
+        console.error("Error fetching contributors:", error);
+
+        // Show error message on the page
+        const errorMessage = document.createElement("p");
+        errorMessage.textContent = "Failed to load contributors. Please try again.";
+        contributorsContainer.appendChild(errorMessage);
+    }
+}
+
+// Fetch and render contributors on page load
+fetchContributors();
diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
@@ -35,6 +35,7 @@
                     <li><a href="../about/about.html"><i class="fas fa-circle-info"></i> About</a></li>
                     <li><a href="../../index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
                     <li><a href="#"><i class="fas fa-calendar-check"></i> Past Events</a></li>
+                    <li><a href="../contributors/contributor.html"><i class="fa-solid fa-users"></i>Contributors</a></li>
                     <li><a href="../contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
                 </ul>
                 <div class="theme-switcher">

diff --git a/index.html b/index.html
@@ -40,6 +40,7 @@
                     <li><a href="./assets/about/about.html"><i class="fas fa-circle-info"></i> About</a></li>
                     <li><a href="./index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
                     <li><a href="./assets/pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a></li>
+                    <li><a href="assets/contributors/contributor.html"><i class="fa-solid fa-users"></i>Contributors</a></li>
                     <li><a href="./assets/contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
                 </ul>
                 <div class="theme-switcher">