Isi terpenting sebuah portofolio adalah karyanya, dan Bagian 3 mengisinya: enam kartu proyek untuk klien fiktif seperti Kopi Relung dan Lumbung Data. Tantangan teknisnya menarik karena kita tidak memakai satu pun berkas gambar — sampul tiap kartu dibentuk dari linear-gradient dengan huruf inisial besar, sehingga halaman tetap ringan dan latihan kita murni CSS. Di sinilah CSS Grid dari materi khususnya bekerja: enam kartu dengan panjang teks berbeda harus menyusun kolom yang rapi di semua lebar layar. Berkas HTML pada snapshot ikut bertambah dengan seksi #karya yang berisi enam elemen article.

Grid Galeri Adaptif #

Jantung galeri adalah satu deklarasi grid-template-columns:

css 
.galeri-proyek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--jarak-5); margin-top: var(--jarak-5);
}

Baris demi baris: display: grid menjadikan .galeri-proyek wadah grid; repeat(auto-fit, ...) menyuruh browser menentukan sendiri jumlah kolom; minmax(280px, 1fr) menetapkan setiap kolom paling sempit 280 px dan selebar itu boleh melebar membagi rata sisa ruang. gap: var(--jarak-5) memberi jarak antarkartu 24 px, seragam horizontal maupun vertikal.

Pola itu bisa ditiru dalam skala kecil pada tiga lebar wadah — perhatikan jumlah kolom berubah tanpa satu pun media query:

Pola auto-fit dengan minmax ini layak dihafal karena muncul di hampir setiap situs nyata: galeri produk, deretan artikel, sampai baris fitur. Ketika jumlah kartu berubah dari enam menjadi empat, grid tetap bekerja tanpa suntingan.

Kartu Proyek dan Sampul Gradien #

Anatomi tiap kartu terbagi dua: sampul dan isi. .kartu-proyek membungkus keduanya dengan overflow: hidden agar sudut sampul yang penuh terpotong bersih oleh border-radius kartu — tanpa itu, sudut gradien akan menembus lengkungan kartu. Latar putih, border tipis, dan --bayangan-1 membuat kartu terpisah dari latar krem halaman.

Sampul memakai dua teknik:

css 
.sampul { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.sampul--kopi { background: linear-gradient(135deg, #7c2d12, #ea580c); }

aspect-ratio: 16 / 10 menjaga semua sampul sama tinggi meskipun isinya hanya satu huruf, sehingga baris kartu sejajar sempurna. place-items: center menaruh huruf inisial tepat di tengah. Enam varian sampul--kopi sampai sampul--rupa menyimpan enam pasangan warna gradien: cokelat kopi, biru keuangan, magenta katalog, teal dasbor, indigo editorial, dan abu-abu galeri. Hurufnya dibungkus aria-hidden="true" pada HTML karena inisial itu dekoratif; pembaca layar tidak perlu membacanya.

Bagian isi memakai tiga tingkat teks: .kartu-nama tebal 18 px, .kartu-peran huruf kapital 13 px dengan letter-spacing: 0.06em, dan .kartu-catatan 14,5 px berwarna teks lembut. Perbedaan ukuran, ketebalan, dan warna inilah yang membuat kartu mudah dipindai tanpa garis pembatas tambahan.

Demo berikut merakit satu kartu lengkap dengan sampul gradien dan tiga tingkat teksnya:

Snapshot Berkas Tahap Ini #

Dua berkas berikut adalah kondisi proyek selelah Bagian 3:

css 
/* ============================================================
   Portofolio Desainer — stylesheet utama
   Kondisi: selelah Bagian 3
   Urutan seksi: token, base, kerangka, tombol, hero,
   galeri proyek, tentang, kontak, footer, navigasi responsif,
   responsif, tipografi seksi, keadaan interaksi, aksesibilitas
   ============================================================ */

/* ---------- 1. Design token ---------- */
:root {
  /* Warna semantik, tema terang */
  --warna-latar: #faf7f2;         --warna-permukaan: #ffffff;
  --warna-teks: #1c1917;          --warna-teks-lembut: #78716c;
  --warna-garis: #e7e5e4;         --warna-utama: #be123c;
  --warna-utama-pekat: #9f1239;   --warna-utama-kontras: #ffffff;
  --warna-utama-lembut: #ffe4e6;  --warna-utama-tinta: #881337;
  --warna-aksen: #0f766e;         --warna-aksen-lembut: #ccfbf1;

  /* Skala spasi, basis empat dan delapan piksel */
  --jarak-1: 4px;  --jarak-2: 8px;
  --jarak-3: 12px; --jarak-4: 16px;
  --jarak-5: 24px; --jarak-6: 32px;
  --jarak-7: 48px; --jarak-8: 64px;

  /* Radius sudut */
  --radius-kecil: 8px; --radius: 14px;
  --radius-penuh: 999px;

  /* Elevasi bayangan */
  --bayangan-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --bayangan-2: 0 8px 20px rgba(28, 25, 23, 0.10);
  --bayangan-3: 0 16px 32px rgba(190, 18, 60, 0.16);

  /* Tipografi dan gerak */
  --font-dasar: system-ui, "Segoe UI", sans-serif;
  --tinggi-baris: 1.65;

  --durasi: 200ms; --pelunakan: ease-out;

  /* Kerangka halaman */
  --lebar-isi: 1020px;
}

/* ---------- 2. Base dan reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--font-dasar); line-height: var(--tinggi-baris);
  background-color: var(--warna-latar); color: var(--warna-teks);
}

h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- 3. Kerangka halaman ---------- */
.pembungkus {
  max-width: var(--lebar-isi);
  margin-inline: auto; padding-inline: var(--jarak-4);
}

.laman-kepala {
  position: sticky; top: 0; z-index: 20;
  padding-block: var(--jarak-3);
  background-color: var(--warna-permukaan);
  border-bottom: 1px solid var(--warna-garis);
}

.kepala-baris {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--jarak-3); flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: var(--jarak-2); }
.brand img { width: 34px; height: 34px; }
.brand-nama { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

.nav-utama { display: flex; gap: var(--jarak-4); }
.nav-utama a { color: var(--warna-teks-lembut); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-utama a:hover { color: var(--warna-utama); }

/* ---------- 4. Tombol ---------- */
.tombol {
  display: inline-block;
  padding: 10px 20px; border: none;
  border-radius: var(--radius-kecil);
  background-color: var(--warna-utama); color: var(--warna-utama-kontras);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}

.tombol--garis {
  border: 1px solid var(--warna-utama);
  background-color: transparent; color: var(--warna-utama);
}

/* ---------- 5. Hero dan perkenalan ---------- */
.hero { padding-block: var(--jarak-8) var(--jarak-7); max-width: 680px; }

.hero-pembuka {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warna-utama);
}

.judul-halaman {
  margin-top: var(--jarak-3);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15; letter-spacing: -0.02em;
}

.pengantar { margin-top: var(--jarak-4); max-width: 52ch; font-size: 17px; color: var(--warna-teks-lembut); }

.hero-aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-3); margin-top: var(--jarak-5); }

.section-judul { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }

.perkenalan {
  max-width: 62ch; padding-block: var(--jarak-6);
  border-top: 1px solid var(--warna-garis);
}

.perkenalan p + p { margin-top: var(--jarak-3); }

/* ---------- 6. Galeri proyek ---------- */
.seksi-karya { margin-top: var(--jarak-7); }

.galeri-proyek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--jarak-5); margin-top: var(--jarak-5);
}

.kartu-proyek {
  overflow: hidden;
  background-color: var(--warna-permukaan); border: 1px solid var(--warna-garis);
  border-radius: var(--radius); box-shadow: var(--bayangan-1);
}

.sampul { display: grid; place-items: center; aspect-ratio: 16 / 10; }

.sampul--kopi { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.sampul--setor { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.sampul--katalog { background: linear-gradient(135deg, #831843, #ec4899); }
.sampul--lumbung { background: linear-gradient(135deg, #134e4a, #14b8a6); }
.sampul--senja { background: linear-gradient(135deg, #312e81, #6366f1); }
.sampul--rupa { background: linear-gradient(135deg, #18181b, #71717a); }

.sampul-huruf { font-size: 64px; font-weight: 800; color: rgba(255, 255, 255, 0.92); }

.kartu-isi { padding: var(--jarak-4) var(--jarak-4) var(--jarak-5); }
.kartu-nama { font-size: 18px; font-weight: 800; }
.kartu-peran { margin-top: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warna-utama); }
.kartu-catatan { margin-top: var(--jarak-2); font-size: 14.5px; color: var(--warna-teks-lembut); }
html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lina Kartika — Portofolio Desainer</title>
  <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/main.js" defer></script>
</head>
<body>
  <header class="laman-kepala">
    <div class="pembungkus kepala-baris">
      <div class="brand">
        <img src="assets/logo.svg" alt="Logo Lina Kartika" width="34" height="34">
        <span class="brand-nama">Lina Kartika</span>
      </div>
      <nav class="nav-utama" id="nav-utama" aria-label="Navigasi utama">
        <a href="#karya">Karya</a>
        <a href="#tentang">Tentang</a>
        <a href="#kontak">Kontak</a>
      </nav>
    </div>
  </header>

  <main id="konten-utama">
    <div class="pembungkus">

      <section class="hero" aria-labelledby="judul-hero">
        <p class="hero-pembuka">Portofolio Desainer Produk</p>
        <h1 class="judul-halaman" id="judul-hero">Saya Lina — saya merancang produk digital yang nyaman dipakai.</h1>
        <p class="pengantar">Enam tahun terakhir saya membantu startup dan UMKM mengubah ide menjadi antarmuka yang jelas: mulai dari riset pengguna, wireframe, sistem desain, sampai dukungan implementasi bersama programmer.</p>
        <div class="hero-aksi">
          <a class="tombol" href="#karya">Lihat karya terpilih</a>
          <a class="tombol tombol--garis" href="#kontak">Hubungi saya</a>
        </div>
      </section>

      <section class="perkenalan" aria-labelledby="judul-perkenalan">
        <h2 class="section-judul" id="judul-perkenalan">Perkenalan</h2>
        <p>Saya desainer produk yang berbasis di Yogyakarta. Latar belakang saya di desain komunikasi visual membuat saya peka pada hierarki, tipografi, dan ruang kosong — tiga hal yang menentukan apakah sebuah halaman nyaman dibaca atau tidak.</p>
        <p>Di luar pekerjaan klien, saya menulis catatan praktik desain dan menggambar pola batik digital. Halaman portofolio ini sendiri saya bangun dari nol memakai HTML dan CSS murni sebagai latihan menyatukan seluruh materi kursus.</p>
      </section>


      <section class="seksi-karya" id="karya" aria-labelledby="judul-karya">
        <h2 class="section-judul" id="judul-karya">Karya Terpilih</h2>
        <div class="galeri-proyek">
          <article class="kartu-proyek">
            <div class="sampul sampul--kopi" aria-hidden="true"><span class="sampul-huruf">K</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Kopi Relung</h3>
              <p class="kartu-peran">Identitas Visual</p>
              <p class="kartu-catatan">Merek kedai kopi rakyat: logotype, kemasan, dan menu papan dari satu sistem warna hangat.</p>
            </div>
          </article>
          <article class="kartu-proyek">
            <div class="sampul sampul--setor" aria-hidden="true"><span class="sampul-huruf">S</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Setor</h3>
              <p class="kartu-peran">Desain UI Mobile</p>
              <p class="kartu-catatan">Aplikasi pencatat tabungan harian dengan alur setor dan tarik tiga langkah.</p>
            </div>
          </article>
          <article class="kartu-proyek">
            <div class="sampul sampul--katalog" aria-hidden="true"><span class="sampul-huruf">W</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Warnai Katalog</h3>
              <p class="kartu-peran">Desain Web</p>
              <p class="kartu-catatan">Katalog produk kerajinan dengan kartu responsif dan halaman detail yang ringan.</p>
            </div>
          </article>
          <article class="kartu-proyek">
            <div class="sampul sampul--lumbung" aria-hidden="true"><span class="sampul-huruf">L</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Lumbung Data</h3>
              <p class="kartu-peran">Desain Produk</p>
              <p class="kartu-catatan">Dasbor panen untuk kelompok tani: tabel, grafik, dan mode gelap yang bisa diandalkan.</p>
            </div>
          </article>
          <article class="kartu-proyek">
            <div class="sampul sampul--senja" aria-hidden="true"><span class="sampul-huruf">A</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Senja Literasi</h3>
              <p class="kartu-peran">Tipografi Editorial</p>
              <p class="kartu-catatan">Majalah daring sastra muda dengan skala huruf besar dan kolom baca 65 karakter.</p>
            </div>
          </article>
          <article class="kartu-proyek">
            <div class="sampul sampul--rupa" aria-hidden="true"><span class="sampul-huruf">R</span></div>
            <div class="kartu-isi">
              <h3 class="kartu-nama">Ruang Rupa</h3>
              <p class="kartu-peran">Desain Interaksi</p>
              <p class="kartu-catatan">Galeri digital karya seni grafis dengan turun pandu dan kartu karya yang bisa dibandingkan.</p>
            </div>
          </article>
        </div>
      </section>

    </div>
  </main>

  <footer class="laman-kaki">
    <div class="pembungkus">
      <p>Halaman ini masih dalam pengerjaan; daftar karya menyusul pada bagian berikutnya.</p>
    </div>
  </footer>
</body>
</html>

Ringkasan #

Galeri enam kartu kini menjadi pusat halaman, dengan grid adaptif dan sampul gradien tanpa gambar. Bagian 4 melengkapi komposisi halaman: strip tentang-saya, panel kontak, dan footer.