Added Contributors 😎

Author: Avdhesh-Varshney

css/contributors.css

@@ -0,0 +1,61 @@
+@import 'https://fonts.googleapis.com/css?family=Permanent+Marker';
+
+.contributors {
+    margin: 2rem 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.contributors h1 {
+    font: 5.5vw/1 Permanent Marker;
+    color: black;
+    font-size: 2.5rem;
+    margin-bottom: 2%;
+    display: inline-block;
+    opacity: 0.7;
+}
+
+.contributors h1:hover {
+    opacity: 1;
+    text-decoration: underline;
+}
+
+#contributor {
+    width: 85%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.contributor-card {
+    width: 65px;
+    height: 65px;
+    margin: 5px;
+    clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
+}
+
+.contributor-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.contributor-card img:hover {
+    width: 78px;
+    height: 78px;
+    opacity: 1;
+}
+
+.contributor-card img:not(:hover) {
+    opacity: 0.8;
+}
+
+.contributor-card:nth-child(4n+1),
+.contributor-card:nth-child(4n+3) {
+    margin-top: -1.6rem;
+}

index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.17/dist/tailwind.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
+  <link rel="stylesheet" href="./css/contributors.css">
   <title>GitHub Automation Scripts 🤖</title>
   <style>
 
@@ -191,6 +192,10 @@ <h1 class="text-xl font-semibold mb-4">License</h1>
       </pre>
     </div>
   </main>
+  <div class="contributors">
+    <h1>Our Valuable Contributors</h1>
+    <div id="contributor"></div>
+  </div>
   <footer class="bg-gray-200 py-4">
     <div class="container mx-auto px-4">
       <p class="text-sm text-gray-600">© 2023 GitHub Automation Scripts 🤖. All rights reserved.</p>
@@ -199,6 +204,7 @@ <h1 class="text-xl font-semibold mb-4">License</h1>
 </div>
 
 <script src="js/scripts.js"></script>
+<script src="./js/contributors.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
 </body>
 </html>

js/contributors.js

@@ -0,0 +1,53 @@
+const cont = document.getElementById('contributor');
+
+async function fetchContributors(pageNumber) {
+    const perPage = 100;
+    const url = `https://api.github.com/repos/sahil-sagwekar2652/GitHub-Automation-scripts/contributors?page=${pageNumber}&per_page=${perPage}`;
+
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);
+    }
+
+    const contributorsData = await response.json();
+    return contributorsData;
+}
+
+// Function to fetch all contributors
+async function fetchAllContributors() {
+    let allContributors = [];
+    let pageNumber = 1;
+
+    try {
+        while (true) {
+            const contributorsData = await fetchContributors(pageNumber);
+            if (contributorsData.length === 0) {
+                break;
+            }
+            allContributors = allContributors.concat(contributorsData);
+            pageNumber++;
+        }
+
+        // Display contributors in the honeycomb-like layout
+        allContributors.forEach((contributor) => {
+            const contributorCard = document.createElement('div');
+            contributorCard.classList.add('contributor-card');
+
+            const avatarImg = document.createElement('img');
+            avatarImg.src = contributor.avatar_url;
+            avatarImg.alt = `${contributor.login}'s Picture`;
+
+            const loginLink = document.createElement('a');
+            loginLink.href = contributor.html_url;
+            loginLink.appendChild(avatarImg);
+
+            contributorCard.appendChild(loginLink);
+
+            cont.appendChild(contributorCard);
+        });
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+fetchAllContributors();