script.js

const githubRepo = "NextStd/NextStd";

async function renderContributors() {
  const grid = document.getElementById('dev-grid');
  try {
    const response = await fetch(`https://api.github.com/repos/${githubRepo}/contributors`);
    if (!response.ok) throw new Error("Could not fetch contributors.");
    const contributors = await response.json();

    grid.innerHTML = '';

    const humans = contributors.filter(dev => dev.login !== "github-actions[bot]");

    humans.forEach((dev, i) => {
      let role = "Open Source Contributor";
      if (dev.login === "vaishnav-sg") role = "Lead Developer / Creator";

      const card = document.createElement('a');
      card.className = 'dev-card';
      card.href = dev.html_url;
      card.target = '_blank';
      card.rel = 'noopener noreferrer';
      card.style.animationDelay = `${i * 80}ms`;
      card.innerHTML = `
        <img src="${dev.avatar_url}" alt="${dev.login}" loading="lazy">
        <div class="dev-info">
          <div class="dev-name">${dev.login}</div>
          <div class="dev-role">${role}</div>
          <div class="dev-commits">${dev.contributions} commit${dev.contributions !== 1 ? 's' : ''}</div>
        </div>
      `;
      grid.appendChild(card);
    });

  } catch (error) {
    console.error("GitHub fetch error:", error);
    grid.innerHTML = `
      <a class="dev-card" href="https://github.com/vaishnav-sg" target="_blank" rel="noopener noreferrer">
        <img src="https://github.com/vaishnav-sg.png" alt="vaishnav-sg" loading="lazy">
        <div class="dev-info">
          <div class="dev-name">vaishnav-sg</div>
          <div class="dev-role">Lead Developer / Creator</div>
          <div class="dev-commits">GitHub Profile</div>
        </div>
      </a>
    `;
  }
}

document.addEventListener('DOMContentLoaded', renderContributors);