Added our valuable contributors

Website/index.html

@@ -83,6 +83,14 @@ <h2>Repositories</h2>
             </ul>
         </section>
 
+        <section id="contributors">
+            <h1 class="contri-heading">Our Contributors</h1>
+            <div id="contributors-grid" class="contributors-grid">
+                <!-- Contributors will be loaded here by JavaScript -->
+            </div>
+        </section>
+
+
     </main>
 
     <footer class="footer">

Website/js/script.js

@@ -112,3 +112,37 @@ document.addEventListener('DOMContentLoaded', function() {
     fetchRepoStats();
     toggleStatsSection();
 });
+
+document.addEventListener("DOMContentLoaded", function() {
+    fetchContributors();
+
+    function fetchContributors() {
+        const repoOwner = 'recodehive'; // Replace with your repository owner
+        const repoName = 'machine-learning-repos'; // Replace with your repository name
+        const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/contributors`;
+
+        fetch(apiUrl)
+            .then(response => response.json())
+            .then(contributors => {
+                const contributorsGrid = document.getElementById('contributors-grid');
+
+                contributors.forEach(contributor => {
+                    const contributorDiv = document.createElement('div');
+                    contributorDiv.className = 'contributor';
+
+                    contributorDiv.innerHTML = `
+                        <img src="${contributor.avatar_url}" alt="${contributor.login}" class="contributor-image">
+                        <div class="contributor-info">
+                            <a href="${contributor.html_url}" target="_blank" class="contributor-github">GitHub Profile</a>
+                        </div>
+                    `;
+
+                    contributorsGrid.appendChild(contributorDiv);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching contributors:', error);
+            });
+    }
+});
+

Website/styles.css

@@ -226,4 +226,96 @@ button#toggle-languages:hover {
         flex: 1 1 100%; 
         max-width: 100%;
     }
-}
+}
+#contributors {
+    padding: 40px;
+    background-color: #f9f9f9;
+    text-align: center;
+}
+
+#contributors h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+/* Container for contributors grid */
+#contributors-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Reduced space between contributors */
+    justify-content: center;
+    padding: 20px; /* Padding around the grid */
+    background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Subtle gradient background */
+}
+
+/* Styling for individual contributor div */
+.contributor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 180px; /* Adjusted width for better visuals */
+    border: none; /* Remove default border */
+    border-radius: 15px; /* More rounded corners */
+    padding: 15px;
+    background: #ffffff; /* White background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
+}
+
+.contributor:hover {
+    transform: translateY(-8px); /* Slight lift effect on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for contributor's image */
+.contributor-image {
+    width: 110px; /* Adjusted size */
+    height: 110px; /* Adjusted size */
+    border-radius: 50%; /* Circular image */
+    object-fit: cover; /* Ensure image covers area without distortion */
+    border: 3px solid #0366d6; /* Border around the image */
+    transition: border-color 0.3s ease; /* Smooth border color change */
+}
+
+.contributor-image:hover {
+    border-color: #024c8c; /* Darker border color on hover */
+}
+
+/* Styling for the GitHub profile link */
+.contributor-info {
+    margin-top: 10px; /* Adjusted space between image and link */
+}
+
+.contributor-github {
+    text-decoration: none;
+    color: #0366d6; /* GitHub blue color */
+    font-size: 14px; /* Slightly smaller font size */
+    font-weight: bold; /* Bold font */
+    background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Gradient background */
+    padding: 8px 12px; /* Adjusted padding around the link */
+    border-radius: 20px; /* Rounded button shape */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for button */
+    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition effects */
+}
+
+.contributor-github:hover {
+    background: #0366d6; /* Darker background on hover */
+    color: #ffffff; /* White text color on hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for the heading with class 'contri-heading' */
+.contri-heading {
+    font-size: 2.5rem; /* Increase font size */
+    font-weight: 900; /* Bold font weight */
+    color: #2c3e50; /* Dark color for better contrast */
+
+}
+
+
+
+
+
+