Merge pull request #758 from ratishjain12/contributors-page-fix

contributors page improved and added github url
aniketsinha2002 · Sep 4, 2023 · f5006e4 · f5006e4
2 parents e7e4f31 + 395e6f4
commit f5006e4
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 58 deletions.
diff --git a/Team/team.css b/Team/team.css
@@ -1,54 +1,64 @@
 /* Custom CSS to adjust the size of contributor cards */
 .mb-6 {
-    width: 55%; /* Adjust the value as needed */
-    margin: 0.25rem; /* Reduce the margin for spacing */
-    padding: 0; /* Remove padding to decrease gaps */
-    box-sizing: border-box; /* Include margin and border in the total width */
+  width: 270px; /* Adjust the value as needed */
+  margin: 0.25rem; /* Reduce the margin for spacing */
+  padding: 0; /* Remove padding to decrease gaps */
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.logo-img {
+  width: 30px;
 }
 
 /* Adjust maximum height of the contributor card container */
 .block {
-    max-height: 350px; /* Adjust the value as needed */
-    overflow: hidden; /* Hide overflowing content */
-    margin: 0; /* Remove default margins */
-    padding: 2rem; /* Add padding to the content */
+  max-height: 420px; /* Adjust the value as needed */
+  overflow: hidden; /* Hide overflowing content */
+  margin: 0; /* Remove default margins */
+  padding: 2rem; /* Add padding to the content */
+}
+
+.logo-img:hover {
+  transform: scale(1.4);
+  transition: ease-in-out 0.3s;
 }
 
 /* Make the contributor image responsive */
 .rounded-t-lg img {
-    width: 100%;
-    height: auto;
+  width: 100%;
+  height: auto;
 }
 
+.contributor-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  background-color: #f59e0b;
+  color: white;
+  font-weight: bold;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+.pa-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  background-color: #4caf50;
+  color: white;
+  font-weight: bold;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+/* Scale hover effect for images */
+.rounded-t-lg {
+  transition: transform 0.3s ease;
+}
 
-    .contributor-tag {
-        display: inline-block;
-        padding: 4px 8px;
-        background-color: #F59E0B;
-        color: white;
-        font-weight: bold;
-        border-radius: 4px;
-        margin-top: 4px;
-    }
-    .pa-tag {
-        display: inline-block;
-        padding: 4px 8px;
-        background-color: #4CAF50;
-        color: white;
-        font-weight: bold;
-        border-radius: 4px;
-        margin-top: 4px;
-    }
-    /* Scale hover effect for images */
-    .rounded-t-lg {
-        transition: transform 0.3s ease;
-    }
-
-    .rounded-t-lg:hover {
-        transform: scale(1.1);
-    }
+.rounded-t-lg:hover {
+  transform: scale(1.1);
+}
 
-    /* Additional styling for the parent container */
-    .contributor-container {
-        overflow: hidden;
-    }
+/* Additional styling for the parent container */
+.contributor-container {
+  overflow: hidden;
+}
diff --git a/Team/team.html b/Team/team.html
@@ -45,14 +45,14 @@ <h4>DATA SCIENCE</h4>
         </nav>
       </header>
       <!-- Container for demo purpose -->
-<div class="container my-24 mx-auto md:px-6">
+<div class="container my-24 mx-auto md:px-6 ">
     <!-- Section: Design Block -->
     <section class="mb-32 text-center">
       <h2 class="mb-12 text-6xl font-bold">
         Meet Our Team 💙</u>
       </h2>
 
-      <div class="grid gap-x-6 md:grid-cols-3 lg:gap-x-10 contributor-container" id="contributorsContainer">
+      <div class="flex flex-wrap items-center justify-center w-full gap-10" id="contributorsContainer">
         <!-- Contributors will be added here -->
       </div>
 

diff --git a/Team/team.js b/Team/team.js
@@ -1,5 +1,5 @@
-const ownerName = 'aniketsinha2002'; // Replace with the owner's GitHub username
-const repoName = 'DataScienceWebsite.github.io'; // Replace with the name of the GitHub repository
+const ownerName = "aniketsinha2002"; // Replace with the owner's GitHub username
+const repoName = "DataScienceWebsite.github.io"; // Replace with the name of the GitHub repository
 
 // Construct the API URL to get the list of contributors
 const apiUrl = `https://api.github.com/repos/${ownerName}/${repoName}/contributors`;
@@ -16,36 +16,58 @@ async function getContributorCommits(username) {
 fetch(apiUrl)
   .then((response) => {
     if (!response.ok) {
-      throw new Error('Network response was not ok');
+      throw new Error("Network response was not ok");
     }
     return response.json();
   })
   .then(async (contributors) => {
     // Render the contributors
-    const contributorsContainer = document.getElementById('contributorsContainer');
+    console.log(contributors);
+    const contributorsContainer = document.getElementById(
+      "contributorsContainer"
+    );
     for (const contributor of contributors) {
-      const isOwner = contributor.login === 'aniketsinha2002';
-      const isContributorXYZ = contributor.login === 'XYZ';
-      const contributorTitle = isOwner ? 'Project Admin' : isContributorXYZ ? '' : 'Contributor';
+      const isOwner = contributor.login === "aniketsinha2002";
+      const isContributorXYZ = contributor.login === "XYZ";
+      const contributorTitle = isOwner
+        ? "Project Admin"
+        : isContributorXYZ
+        ? ""
+        : "Contributor";
 
       // Get the number of commits for this contributor
       const numCommits = await getContributorCommits(contributor.login);
-
+      const gitHubLogo = "https://cdn-icons-png.flaticon.com/512/25/25231.png";
       const contributorHTML = `
-        <div class="mb-6 lg:w-1/3 md:w-1/2 w-full p-2">
+        <div class="mb-6 max-w-[200px] p-2">
           <div class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
-            <div class="relative overflow-hidden bg-cover bg-no-repeat">
+            <div class="relative overflow-hidden bg-cover bg-no-repeat object-contain">
               <a href="${contributor.html_url}">
-                <img src="${contributor.avatar_url}" class="w-full rounded-t-lg" />
+                <img src="${contributor.avatar_url}" class=" rounded-t-lg" />
                 <div class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed"></div>
               </a>
             </div>
-            <div class="p-6 flex flex-col justify-between h-full">
+            <div class="p-6 flex flex-col justify-between h-full items-center gap-2 ">
+             <a href="${contributor.html_url}"
+              > 
+                <img src="${gitHubLogo}" class="logo-img"/> 
+             </a>
               <div>
-                <h3 class="mb-4 text-lg font-bold" style="color: #000;">${contributor.login}</h3>
+                <h3 class="mb-4 text-lg font-bold" style="color: #000;">${
+                  contributor.login
+                }</h3>
                 <!-- Add the Contributor tag to everyone except for XYZ -->
-                ${isContributorXYZ ? '' : '<span class="contributor-tag">' + contributorTitle + '</span>'}
-                <p class="text-sm mt-2">${numCommits} commits</p>
+                ${
+                  isContributorXYZ
+                    ? ""
+                    : '<span class="contributor-tag">' +
+                      contributorTitle +
+                      "</span> "
+                }
+                
+               
+                <p class="text-md mt-2 text-black ">${numCommits} commits</p>
+               
               </div>
             </div>
           </div>
@@ -55,5 +77,5 @@ fetch(apiUrl)
     }
   })
   .catch((error) => {
-    console.error('Error fetching contributors:', error);
+    console.error("Error fetching contributors:", error);
   });