index.js

const attendees = [
  {
    name: "Orlando Donado",
    nickname: "Orli 🌝",
    bio: "Front end dev @ Zemoga. Music, bicycle and soccer lover (even though I'm really bad at it!). Wario main in MarioKart / SMBU and noob Valorant controller improving every day! 🔫",
    githubLink: "https://github.com/OurxD"
  },
  {
    name: "Antonia Serna",
    nickname: "Anto 🌝",
    bio: "Front end dev @ Zemoga",
    githubLink: "https://github.com/mariaserna"
  },
  {
    name: "Valentina Alvarez",
    nickname: "Valen #12102397;",
    bio: "Front end dev @ Zemoga",
    githubLink: "https://github.com/Valentina2021"
  }
];

const makeCard = ({
  name,
  nickname,
  bio,
  githubLink
}) => `
  <div class="col py-3">
    <div class="card">
      <h5 class="card-header">
        ${name}
        <small class="text-muted">a.k.a ${nickname}</small>
      </h5>
      <div class="card-body">
        <p class="card-text">
          ${bio}
        </p>
        <a href="${githubLink}" class="btn btn-primary" target="_blank">Check my Github!</a>
      </div>
    </div>
  </div>
`;

const attendeesCardsWrapper = document.querySelector("#attendees-cards");
const attendeesCardsString = attendees.map(makeCard).join("");

attendeesCardsWrapper.insertAdjacentHTML("afterbegin", `
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
    ${attendeesCardsString}
  </div>
`);