Bootstrap

Profile Gallery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Gallery</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .profile-card {
            margin-bottom: 20px;
        }
        .profile-card img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="my-4">Profile Gallery</h1>
        <input type="text" id="searchInput" class="form-control mb-4" placeholder="Search profiles...">

        <div class="row" id="profileGallery">
            <!-- Profile cards will go here -->
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JS *//file to handle the profile data and search functionality//*

// Sample profile data
const profiles = [
  { name: 'Reno Doe', image: 'https://codezillaye.com/wp-content/uploads/2024/06/place3.jpg', description: 'Web Developer' },
  { name: 'Mado Smith', image: 'https://codezillaye.com/wp-content/uploads/2024/06/place2.jpg', description: 'Graphic Designer' },
  { name: 'Mike son', image: 'https://codezillaye.com/wp-content/uploads/2024/06/place4.jpg', description: 'Project Manager' },
  { name: 'Nana Williams', image: 'https://codezillaye.com/wp-content/uploads/2024/06/place5.jpg', description: 'Content Writer' }
];

function displayProfiles(profilesToDisplay) {
  const profileGallery = document.getElementById('profileGallery');
  profileGallery.innerHTML = '';

  profilesToDisplay.forEach(profile => {
      const profileCard = document.createElement('div');
      profileCard.className = 'col-md-3 profile-card';

      profileCard.innerHTML = `
          <div class="card">
              <img src="${profile.image}" class="card-img-top" alt="${profile.name}">
              <div class="card-body">
                  <h5 class="card-title">${profile.name}</h5>
                  <p class="card-text">${profile.description}</p>
              </div>
          </div>
      `;

      profileGallery.appendChild(profileCard);
  });
}

function filterProfiles() {
  const searchInput = document.getElementById('searchInput').value.toLowerCase();
  const filteredProfiles = profiles.filter(profile => 
      profile.name.toLowerCase().includes(searchInput) ||
      profile.description.toLowerCase().includes(searchInput)
  );
  displayProfiles(filteredProfiles);
}

document.getElementById('searchInput').addEventListener('input', filterProfiles);

// Initial display of profiles
displayProfiles(profiles);