Portofolio yang meyakinkan dimulai dari keputusan yang konsisten, bukan dari kartu-kartunya. Karena halaman ini merangkum seluruh materi kursus, kita buat fondasinya lebih rapi daripada proyek-proyek sebelumnya: seluruh warna, jarak, radius, bayangan, dan kecepatan gerak didefinisikan sebagai design token di dalam :root, lalu dipakai berulang oleh setiap komponen pada bagian-bagian berikutnya. Bagian ini juga menyiapkan base reset pendek agar margin bawaan browser tidak mengganggu komponen yang akan kita tulis. Berkas styles.css pada tahap ini baru 54 baris, tetapi sembilan puluh persen keputusan visual proyek sudah diputuskan di sini.

Design Token Warna dan Spasi #

Palet portofolio ini berangkat dari dua kelompok warna. Kelompok utama memakai rose: --warna-utama: #be123c untuk tombol dan penekanan, --warna-utama-pekat untuk keadaan hover, --warna-utama-lembut untuk latar sekunder, dan --warna-utama-tinta yang gelap untuk latar panel kontak serta skip link. Kelompok kedua adalah aksen teal, --warna-aksen dan --warna-aksen-lembut, yang nantinya menandai label keahlian dan nama peran pada kartu proyek. Netral diatur per-peran: --warna-latar bernuansa krem hangat, --warna-permukaan putih untuk kartu dan header, dua tingkat teks, dan --warna-garis untuk border tipis.

css 
:root {
  --warna-utama: #be123c;    --warna-utama-tinta: #881337;
  --warna-aksen: #0f766e;    --jarak-4: 16px;
}

Isi token inti itu bisa dipetakan langsung ke swatch, batang skala spasi, dan tiga kartu bayangan berikut:

Di stylesheet sungguhan, token ini belum dipakai komponen mana pun; setiap bagian berikutnya cukup memanggil var(--warna-utama) dan var(--jarak-4) tanpa mengulang kode warna. Skala spasi --jarak-1 sampai --jarak-8 mengikuti basis 4 px dan 8 px sehingga ritme jarak halaman seragam. Tiga token --bayangan-* menyimpan tiga tingkat elevasi; tingkat tertingginya memakai rona rose, bukan hitam murni, agar bayangan menyatu dengan palet. Token --durasi: 200ms dan --pelunakan: ease-out dipakai seluruh transisi pada Bagian 7, sedangkan --lebar-isi: 1020px membatasi lebar konten.

Base Reset Minimal #

Reset yang kita pakai sengaja pendek, hanya tiga kelompok aturan. Selector universal *, *::before, *::after menerapkan box-sizing: border-box supaya padding tidak menambah lebar elemen — penting untuk kartu galeri yang paddingnya tebal. Margin h1–h3, p, dan ul dinolkan agar jarak antarelemen sepenuhnya diputuskan per komponen; inilah sebabnya tiap komponen nanti mendeklarasikan margin dan gap miliknya sendiri. Terakhir, img dibuat display: block dengan max-width: 100% agar logo di header tidak meluber dari pembungkusnya.

Kebiasaan ini terasa kecil, tetapi dampaknya besar: tanpa reset margin, judul seksi akan membawa jarak bawaan yang berbeda-beda antar browser, dan perataan kartu galeri jadi sulit diprediksi.

Snapshot Berkas Tahap Ini #

Berkas berikut adalah kondisi styles.css selelah Bagian 1. Simpan sebagai css/styles.css di dalam folder proyek kalian:

css 
/* ============================================================
   Portofolio Desainer — stylesheet utama
   Kondisi: selelah Bagian 1
   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%; }

Ringkasan #

Fondasi design system sudah berdiri: token warna, spasi, radius, bayangan, gerak, dan reset dasar. Bagian 2 langsung memakainya untuk membangun kerangka halaman, tombol, hero perkenalan, serta berkas HTML pertama proyek.