Displayed contributor name on hover over contributor icons

assets/css_files/contributor.css

@@ -85,39 +85,41 @@ body {
 }
 
 #contributor {
-    margin: 34px;
-    padding: 0px 25px;
-    line-height: 10;
+    margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
+    gap: 20px; /* Add some space between the cards */
     justify-content: center;
     align-items: center;
 }
 
 .contributor-card {
-    width: 95px;
-    height: 95px;
-    clip-path: circle(40%);
-    margin: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 120px; 
+    margin: 10px;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    text-align: center;
 }
 
 .contributor-card:hover {
     transform: scale(1.22);
-    opacity: 0.85;
+    opacity: 10;
 }
 
 .contributor-card img {
-    width: 100%;
-    height: 100%;
+    width: 95px;
+    height: 95px;
+    clip-path: circle(50%); /* True circle */
     object-fit: cover;
+    display: block;
+    margin-bottom: 10px; /* Add some space below the image */
 }
 
-.contributor-card:nth-child(4n+1),
-.contributor-card:nth-child(4n+3) {
-    margin-top: -4px;
+.contributor-name {
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 5px;
+    color: #c9d1d9; /* Ensure visibility */
 }
-
-.footer {
-    margin-top: 1em;
-}

assets/js_files/contributor.js

@@ -29,9 +29,10 @@ async function fetchAllContributors() {
             allContributors = allContributors.concat(contributorsData);
             pageNumber++;
         }
-        allContributors.forEach((contributor) => {
+
+        for (let contributor of allContributors) {
             if (contributor.login === owner) {
-                return;
+                continue;
             }
 
             const contributorCard = document.createElement('div');
@@ -46,13 +47,23 @@ async function fetchAllContributors() {
             loginLink.target = '_blank';
             loginLink.appendChild(avatarImg);
 
+            // Fetch detailed info for the name
+            const contributorDetails = await fetch(contributor.url);
+            const contributorData = await contributorDetails.json();
+            const displayName = contributorData.name || contributor.login;
+
+            const nameDiv = document.createElement('div');
+            nameDiv.classList.add('contributor-name');
+            nameDiv.textContent = displayName;
+
             contributorCard.appendChild(loginLink);
+            contributorCard.appendChild(nameDiv);
 
             cont.appendChild(contributorCard);
-        });
+        }
     } catch (error) {
         console.error(error);
     }
 }
 
-fetchAllContributors();
+fetchAllContributors();