Tutorial: Membuat Galeri Portofolio yang Bisa Difilter (HTML, CSS, & Sedikit JavaScript)

Portofolio desainer grafis punya satu masalah umum: seiring bertambahnya karya, portofolio itu menjadi berantakan.

Anda mungkin seorang desainer multitalenta. Anda membuat logo, mendesain website, mengerjakan ilustrasi, dan sesekali mengedit video. Anda ingin memamerkan semuanya. Tapi klien yang mencari "desainer logo" tidak mau repot menggulir 20 proyek ilustrasi Anda.

Mereka ingin melihat apa yang relevan dengan kebutuhan mereka, dan mereka ingin melihatnya sekarang.

Solusinya? Galeri yang bisa difilter. Ini adalah fitur profesional di mana pengguna bisa mengklik tombol (misal: "Logo", "Web Desain", "Ilustrasi") dan galeri akan secara ajaib menyembunyikan semua karya lain.

Ini terlihat sangat canggih, tapi hari ini saya akan tunjukkan cara membuatnya hanya dengan HTML, CSS, dan sedikit kode JavaScript yang mudah dipahami.

Langkah 1: HTML (Struktur Galeri dan Tombol)

Pertama, kita siapkan kerangkanya. Kita perlu dua bagian:

Kontainer untuk tombol-tombol filter kita.
Kontainer untuk gambar-gambar galeri kita.

Buat file index.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeri Portofolio Filter</title>
    <!-- Tautkan file CSS kita -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h2>Portofolio Saya</h2>

    <!-- 1. Kontainer Tombol Filter -->
    <div id="filter-buttons">
        <!-- 
          data-filter="all" dan data-filter="logo" adalah "kunci" 
          yang akan dibaca oleh JavaScript.
        -->
        <button class="filter-btn active" data-filter="all">Semua</button>
        <button class="filter-btn" data-filter="logo">Logo</button>
        <button class="filter-btn" data-filter="web">Web Desain</button>
        <button class="filter-btn" data-filter="ilustrasi">Ilustrasi</button>
    </div>

    <!-- 2. Kontainer Galeri -->
    <div id="portfolio-gallery">
        <!-- 
          Perhatikan class "logo", "web", "ilustrasi".
          Ini adalah "gembok" yang cocok dengan "kunci" di tombol.
        -->
        <div class="item logo">
            <img src="https://via.placeholder.com/300x200?text=Logo+Klien+A" alt="Logo A">
        </div>
        <div class="item web">
            <img src="https://via.placeholder.com/300x200?text=Web+Desain+B" alt="Web B">
        </div>
        <div class="item ilustrasi">
            <img src="https://via.placeholder.com/300x200?text=Ilustrasi+C" alt="Ilustrasi C">
        </div>
        <div class="item logo">
            <img src="https://via.placeholder.com/300x200?text=Logo+Klien+D" alt="Logo D">
        </div>
        <div class="item web">
            <img src="https://via.placeholder.com/300x200?text=Web+Desain+E" alt="Web E">
        </div>
        <div class="item web">
            <img src="https://via.placeholder.com/300x200?text=Web+Desain+F" alt="Web F">
        </div>
    </div>

    <!-- Tautkan file JavaScript kita (Selalu di akhir body) -->
    <script src="script.js"></script>
</body>
</html>

Poin Kunci di HTML:

data-filter="logo": Ini adalah data attribute di tombol. Kita akan gunakan ini untuk memberi tahu JavaScript "kategori apa yang harus ditampilkan".
class="item logo": Setiap item di galeri memiliki class "item" (untuk styling umum) dan class kategori (misal: "logo", "web", "ilustrasi") yang harus sama persis dengan nilai data-filter di tombol.

Langkah 2: CSS (Mempercantik Tampilan)

Sekarang, kita buat agar terlihat bagus. Kita akan menggunakan Flexbox untuk membuat galeri yang rapi dan kita akan menambahkan style untuk tombol yang "aktif".

Buat file style.css:


/* Styling Dasar */
body {
    font-family: sans-serif;
    padding: 20px;
}

/* 1. Styling Tombol Filter */
#filter-buttons {
    margin-bottom: 20px;
    text-align: center;
}

.filter-btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.filter-btn:hover {
    background-color: #ddd;
}

/* Ini adalah class untuk tombol yang sedang aktif */
.filter-btn.active {
    background-color: #007bff;
    color: white;
}

/* 2. Styling Galeri */
#portfolio-gallery {
    display: flex;
    flex-wrap: wrap; /* Membuat item turun ke baris baru jika tidak muat */
    gap: 15px; /* Jarak antar item */
    justify-content: center;
}

.item {
    width: 300px; /* Lebar setiap item galeri */
    transition: transform 0.3s, opacity 0.3s;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.item img {
    width: 100%;
    display: block;
}

/* Class 'hide' inilah yang akan kita tambahkan/hapus 
  dengan JavaScript untuk menyembunyikan item.
*/
.item.hide {
    transform: scale(0.8);
    opacity: 0;
    width: 0; /* Trik agar layout rapi */
    margin: 0;
    padding: 0;
}

Poin Kunci di CSS:

.filter-btn.active: Ini adalah style khusus untuk tombol yang sedang diklik.
.item.hide: Ini adalah style untuk "menyembunyikan" item. Kita tidak pakai display: none; agar bisa diberi efek transisi (transform dan opacity) yang cantik.

Langkah 3: JavaScript (Logika Ajaib)

Ini adalah inti dari tutorial kita. Kita akan menulis kode yang "mendengarkan" klik pada tombol, lalu "melihat" semua item galeri, dan "memutuskan" mana yang harus disembunyikan dan mana yang harus ditampilkan.

Buat file script.js:


// Tunggu sampai semua HTML dimuat sebelum menjalankan script
window.onload = () => {

    // 1. Ambil semua tombol filter
    const filterButtons = document.querySelectorAll(".filter-btn");

    // 2. Ambil semua item galeri
    const galleryItems = document.querySelectorAll(".item");

    // 3. Tambahkan "event listener" (pendengar klik) ke setiap tombol
    filterButtons.forEach(button => {
        button.addEventListener("click", () => {
            
            // Hapus class 'active' dari SEMUA tombol
            filterButtons.forEach(btn => btn.classList.remove("active"));
            
            // Tambahkan class 'active' HANYA ke tombol yang diklik
            button.classList.add("active");

            // Ambil "kunci" filter dari tombol yang diklik (misal: "logo", "web")
            const filterValue = button.getAttribute("data-filter");

            // 4. Periksa setiap item di galeri
            galleryItems.forEach(item => {
                
                // Jika tombol yang diklik adalah "all"
                if (filterValue === "all") {
                    // Tampilkan semua item
                    item.classList.remove("hide");
                } 
                // Jika tidak...
                else {
                    // Periksa apakah item ini punya class yang cocok dengan "kunci" filter
                    const hasCategory = item.classList.contains(filterValue);
                    
                    if (hasCategory) {
                        // Jika cocok, tampilkan (hapus class 'hide')
                        item.classList.remove("hide");
                    } else {
                        // Jika tidak cocok, sembunyikan (tambahkan class 'hide')
                        item.classList.add("hide");
                    }
                }
            }); // akhir loop galeri
        }); // akhir event listener klik
    }); // akhir loop tombol
}; // akhir window.onload

Kesimpulan

Buka file index.html Anda di browser. Coba klik tombol "Logo", "Web Desain", "Ilustrasi", dan "Semua".

Lihat? Dengan 3 file sederhana, Anda telah mengubah portofolio yang "penuh" menjadi pengalaman interaktif yang elegan. Anda tidak hanya menunjukkan karya Anda, tetapi Anda juga menunjukkan bahwa Anda menghargai waktu klien dengan memberi mereka kontrol untuk melihat apa yang paling relevan bagi mereka.

Ini adalah salah satu peningkatan fungsionalitas terbaik yang bisa Anda tambahkan ke portofolio Anda.

Apakah Anda berhasil membuatnya? Atau punya ide untuk menambahkan animasi yang lebih keren? Bagikan di kolom komentar!

Sintaks Logis

Cari Blog Ini