feat(creators): add hardcoded creators list with carousel UI

AbhinavOC24 · AbhinavOC24 · commit 196f543e2f9e · 2025-10-17T00:46:03.000+05:30
Added an initial hardcoded list of creators and implemented a carousel
for navigation. Skipped dynamic population of PR mergers from GitHub API
for now, since it requires multiple API requests and was hitting rate
limits.
diff --git a/app.js b/app.js
@@ -1,67 +1,70 @@
-'use strict';
+"use strict";
 
 // load more content
 function loadMore() {
-  const paragraphs = document.querySelectorAll('#projects_items .load_more');
+  const paragraphs = document.querySelectorAll("#projects_items .load_more");
   for (let i = 0; i < paragraphs.length; i++) {
-    paragraphs[i].classList.add('show');
+    paragraphs[i].classList.add("show");
   }
-  const hr = document.querySelectorAll('.line_hr');
+  const hr = document.querySelectorAll(".line_hr");
   for (let i = 0; i < hr.length; i++) {
-    hr[i].classList.add('sh');
+    hr[i].classList.add("sh");
   }
-  document.getElementById('load-more-button').style.display = 'none';
-  document.getElementById('hide-button').style.display = 'block';
+  document.getElementById("load-more-button").style.display = "none";
+  document.getElementById("hide-button").style.display = "block";
 }
 
 function hide() {
-  const paragraphs = document.querySelectorAll('#projects_items .load_more');
+  const paragraphs = document.querySelectorAll("#projects_items .load_more");
   for (let i = 0; i < paragraphs.length; i++) {
-    paragraphs[i].classList.remove('show');
+    paragraphs[i].classList.remove("show");
   }
-  const hr = document.querySelectorAll('.line_hr');
+  const hr = document.querySelectorAll(".line_hr");
   for (let i = 0; i < hr.length; i++) {
-    hr[i].classList.remove('sh');
+    hr[i].classList.remove("sh");
   }
-  document.getElementById('load-more-button').style.display = 'block';
-  document.getElementById('hide-button').style.display = 'none';
+  document.getElementById("load-more-button").style.display = "block";
+  document.getElementById("hide-button").style.display = "none";
 }
 
-const members_url = "https://api.github.com/orgs/move-fast-and-break-things/members";
+const members_url =
+  "https://api.github.com/orgs/move-fast-and-break-things/members";
 
 // fetch authors data
 async function getAuthors(apiURL) {
-
   const response = await fetch(apiURL);
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
   }
   const data = await response.json();
-  return Promise.all(data.map(async (element) => {
-    const userResponse = await fetch(element.url);
-    if (!userResponse.ok) {
-      throw new Error(`HTTP error! status: ${userResponse.status}`);
-    }
-    const userData = await userResponse.json();
-    return {
-      name: userData.name || userData.login,
-      bio: userData.bio,
-      avatar: userData.avatar_url,
-      html_url: userData.html_url,
-    };
-  }));
+  return Promise.all(
+    data.map(async (element) => {
+      const userResponse = await fetch(element.url);
+      if (!userResponse.ok) {
+        throw new Error(`HTTP error! status: ${userResponse.status}`);
+      }
+      const userData = await userResponse.json();
+      return {
+        name: userData.name || userData.login,
+        bio: userData.bio,
+        avatar: userData.avatar_url,
+        html_url: userData.html_url,
+      };
+    })
+  );
 }
 
 // set authors in the DOM
 async function setAuthors(apiURL) {
   const authors = await getAuthors(apiURL);
-  const container = document.querySelector("#creators > div > div");
+  const container = document.querySelector("#creators .persons");
   if (!container) {
     throw new Error("Container element not found");
   }
-  authors.forEach(author => {
-    const personDiv = document.createElement('div');
-    personDiv.className = 'person';
+  console.log(container);
+  authors.forEach((author) => {
+    const personDiv = document.createElement("div");
+    personDiv.className = "person";
     personDiv.innerHTML = `
                 <div class="name_and_img">
                 <a href="${author.html_url}" class="tooltip" target="_blank">  
@@ -70,67 +73,94 @@ async function setAuthors(apiURL) {
                     </a>
                 </div>
                 
-                <p class="about_person">${author.bio || 'No biography available'}</p>
+                <p class="about_person">${
+                  author.bio || "No biography available"
+                }</p>
             `;
     container.appendChild(personDiv);
   });
-
 }
 
 // set contributors in the DOM
 async function setContributors(apiURL, element) {
   try {
     const contributors = await getAuthors(apiURL);
-    element.innerHTML = contributors.length === 0 ? "No developers found" :
-      contributors.map(contributor => `
+    element.innerHTML =
+      contributors.length === 0
+        ? "No developers found"
+        : contributors
+            .map(
+              (contributor) => `
                 <span class="developer-name">
                     <a href="${contributor.html_url}" class="tooltip" target="_blank">  
                         <img src="${contributor.avatar}" alt="${contributor.name}'s avatar" class="shining-image">  
                         <span class="tooltip-text">${contributor.name}</span>  
                     </a>
                 </span>
-            `).join('');
+            `
+            )
+            .join("");
   } catch (error) {
     console.error("Error setting contributors:", error);
-    element.innerHTML = "Can't load the developer list. Check out the repository page to see all of the contributors 😅";
+    element.innerHTML =
+      "Can't load the developer list. Check out the repository page to see all of the contributors 😅";
   }
 }
 
 // load all contributors
 async function loadAllContributors() {
   const developerLists = document.querySelectorAll(".developers-list");
-  const promises = Array.from(developerLists).map(devList => {
+  const promises = Array.from(developerLists).map((devList) => {
     const apiURL = devList.getAttribute("data-value");
     return setContributors(apiURL, devList);
   });
   await Promise.all(promises);
+  renderCreators(Array.from(allContributors.values()));
 }
 
 // Scroll-to-top functionality
 function setupScrollToTop() {
-  const toTopButton = document.getElementById('toTop');
+  const toTopButton = document.getElementById("toTop");
   if (!toTopButton) return;
 
-  window.addEventListener('scroll', () => {
+  window.addEventListener("scroll", () => {
     if (window.scrollY > 100) {
-      toTopButton.style.display = 'block';
+      toTopButton.style.display = "block";
     } else {
-      toTopButton.style.display = 'none';
+      toTopButton.style.display = "none";
     }
   });
 
-  toTopButton.addEventListener('click', (e) => {
+  toTopButton.addEventListener("click", (e) => {
     e.preventDefault();
     window.scrollTo({
       top: 0,
-      behavior: 'smooth'
+      behavior: "smooth",
     });
   });
 }
 
+function initCarousel() {
+  const persons = document.querySelector(".persons");
+  const nextBtn = document.querySelector(".carousel-btn.next");
+  const prevBtn = document.querySelector(".carousel-btn.prev");
+
+  if (!persons || !nextBtn || !prevBtn) return;
+
+  nextBtn.addEventListener("click", () => {
+    persons.scrollBy({ left: 260, behavior: "smooth" });
+  });
+
+  prevBtn.addEventListener("click", () => {
+    persons.scrollBy({ left: -260, behavior: "smooth" });
+  });
+}
+
 // Wait for DOM content to be loaded before executing scripts
-document.addEventListener('DOMContentLoaded', () => {
-  setAuthors(members_url).catch(console.error);
+document.addEventListener("DOMContentLoaded", async () => {
+  //since the creators are hardcoded, we can skip this step for now
+  // setAuthors(members_url).catch(console.error);
   loadAllContributors();
+  initCarousel();
   setupScrollToTop();
-});
+});
diff --git a/index.html b/index.html
@@ -511,13 +511,13 @@ <h3>MFBT</h3>
       <section id="MAV" class="mav">
         <div class="container">
           <h2>Our Mission</h2>
-          <div class="TextBlock">
-            We are committed to making our community a welcoming space for everyone. 
-            Whether you're a seasoned developer, a beginner, or just curious, 
-            you're welcome here! We dedicated to fostering growth, collaboration, 
-            and continuous learning. Our mission is to cultivate an environment 
-            where individuals support each other in developing exceptional programs 
-            and expanding their knowledge.
+            <div class="TextBlock">
+              We are committed to making our community a welcoming space for everyone. 
+              Whether you're a seasoned developer, a beginner, or just curious, 
+              you're welcome here! We dedicated to fostering growth, collaboration, 
+              and continuous learning. Our mission is to cultivate an environment 
+              where individuals support each other in developing exceptional programs 
+              and expanding their knowledge.
             </div>
             <h2>Our Values</h2>
             <div class="TextBlock">
@@ -540,18 +540,82 @@ <h2>Our Values</h2>
                 </li>
               </ul>
             </div>  
-            </section>
+        </section>
 
       <section id="creators" class="creators">
         <div class="container">
-          <h2>Creators</h2>
-          <div class="persons">
-      
-          </div>
+            <h2>Creators</h2>
+             <div class="carousel-wrapper">
+              <button class="carousel-btn prev">‹</button>
+             <div class="persons">
+          <div class="person">
+                <div class="name_and_img">
+                <a href="https://github.com/ast3310" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/40520443?v=4" alt="Unarokov Astemir's avatar">
+                    <p class="person_name">Unarokov Astemir</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">✋ Hi, I’m Astemir. I’m a web developer who is creating a lot of  interesting things. I can work on front-end part and also on back-end part of the application.</p>
+            </div>
+            <div class="person">
+                <div class="name_and_img">
+                <a href="https://github.com/KogaiIrina" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/63745301?v=4" alt="Irina Kogai's avatar">
+                    <p class="person_name">Irina Kogai</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">Full-Stack Software Engineer &amp; Engineering Manager</p>
+            </div>
+            <div class="person">
+                <div class="name_and_img">
+                <a href="https://github.com/minervathebot" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/202535349?v=4" alt="Minerva Bot's avatar">
+                    <p class="person_name">Minerva Bot</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">A helpful bot</p>
+            </div>
+            <div class="person">
+                <div class="name_and_img">
+                <a href="https://github.com/Misofser" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/20745234?v=4" alt="Sofia Mikhalevich's avatar">
+                    <p class="person_name">Sofia Mikhalevich</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">Web developer with skills in illustrating and design</p>
+            </div>
+            <div class="person">
+                <div class="name_and_img">
+                <a href="https://github.com/PlutoniumSoup" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/145541424?v=4" alt="Andrey's avatar">
+                    <p class="person_name">Andrey</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">An ordinary man with extraordinary ideas.
+                  Also like home-made pizza
+                </p>
+            </div>
+			    	<div class="person">
+
+                <div class="name_and_img">
+                <a href="https://github.com/yurijmikhalevich" class="tooltip" target="_blank">  
+                    <img src="https://avatars.githubusercontent.com/u/4187729?v=4" alt="Yurij Mikhalevich's avatar">
+                    <p class="person_name">Yurij Mikhalevich</p>
+                    </a>
+                </div>
+                
+                <p class="about_person">No biography available</p>
+            </div>
+             </div>
+              <button class="carousel-btn next">›</button>
         </div>
       </section>
 
-      
       <section id="join" class="join">
         <div class="container">
           <hr size=3px width=100% color="#3D4250">
@@ -594,8 +658,7 @@ <h2>Join us</h2>
         </div>
       </section>
       
-
-      <footer>
+     <footer>
         <div class="container">
           <div class="github_container">
             <a href="#"><img class="f_logo" src="img/logo.svg" alt="MFBT" aria-label="Go to top of the page"></a>
diff --git a/main.css b/main.css
