Colophon

Panduan gaya dan catatan pembuatan situs ini. Semua yang ada di bawah dirender dari token CSS dan komponen situs sendiri, jadi ikut berubah saat keduanya berubah.

Warna

Nilai dibaca dari variabel CSS yang aktif dengan getComputedStyle, satu kali untuk tiap tema.

--bg

Latar halaman

Gelap Terang
--surface

Kartu, panel menu

Gelap Terang
--ink

Teks utama

Gelap Terang
--ink-2

Teks sekunder, label

Gelap Terang
--line

Garis tipis, garis putus-putus baris

Gelap Terang
--line-strong

Bingkai kontrol, ruler, crosshair

Gelap Terang
--dot

Titik-titik latar

Gelap Terang
--grid

Garis grid hero

Gelap Terang
--accent

Link, cincin fokus, penanda aktif, tombol utama

Gelap Terang
--ok

Status berhasil

Gelap Terang
--err

Status galat

Gelap Terang

Kontras

Rasio kontras WCAG 2.x, dihitung dari nilai di atas. Teks isi butuh 4,5:1 (AA); teks besar dan bagian UI butuh 3:1.

--ink / --bg

Teks utama di halaman

Gelap Terang
--ink-2 / --bg

Teks sekunder di halaman

Gelap Terang
--ink-2 / --surface

Teks sekunder di kartu

Gelap Terang
--accent / --bg

Aksen di halaman (link, penanda)

Gelap Terang
--bg / --accent

Teks tombol utama di atas aksen

Gelap Terang
--ok / --bg

Tanda berhasil di halaman

Gelap Terang
--err / --bg

Teks galat di halaman

Gelap Terang

Tipografi

Judul dan tombol memakai Hubot Sans, label dan path memakai Martian Mono, teks isi memakai font sistem. Kedua web font di-host sendiri dan di-preload.

--display

Judul, brand, tombol

Dodi Sopandi, 0123456789

--mono

Path, label, navigasi, tanggal, kode

Dodi Sopandi, 0123456789

--sans

Teks isi

Dodi Sopandi, 0123456789

Skala yang dipakai

Contoh memakai class aslinya; ukuran diukur dari elemen yang dirender.

Judul section

Cara saya bekerja

Judul baris

  • Platform transaksi

Teks isi

Membangun dan merawat platform transaksi secara menyeluruh.

Tombol
Lihat pekerjaan saya
Label path
/process
Label baris

  • Proyek klien

Headline hero bersifat fluid: clamp(2rem, 3.2vw, 2.625rem) di desktop, diskalakan per bahasa dengan --fit (Indonesia 0,78).

Jarak dan grid

Layout berasal dari empat token. Nilainya dibaca langsung, jadi menunjukkan viewport saat ini (gutter hilang di layar kecil).

--frame

Lebar konten maksimum

--gutter

Margin bertitik berisi ruler, tiap sisi

--pad-x

Padding horizontal di dalam section

--pad-y

Padding vertikal di dalam section

Breakpoint

767px
Ruler dan gutter hilang, split section menumpuk, baris jadi satu kolom
879px
Header beralih ke tombol menu
880–1023px
Jarak header lebih rapat; hero menumpuk di bawah 1024px
1024px
Desktop: hero dua kolom, scrollbar halaman disembunyikan

Pola blueprint

Titik-titik
Pola titik radial-gradient di latar halaman.
Ruler
Garis putus-putus vertikal dengan tanda tiap 80px, di gutter.
Crosshair
Tanda + di sudut tempat garis section bertemu.
Garis putus-putus
Border putus-putus untuk baris dan kontrol; garis penuh hanya untuk tepi section.

Langsung: section dengan sudut crosshair dan baris putus-putus

Komponen

Contoh langsung dari yang ada di kode. Tidak ada varian yang tidak dipakai situs.

Tombol utama
Kirim email

Satu aksi utama dalam sebuah grup, seperti Kirim email.

Tombol sekunder
Salin email

Aksi lain di samping tombol utama, seperti Salin email.

Rows

  • Label

    Judul baris

    Satu kalimat singkat tentang baris ini.

  • Label

    Baris lain

    Baris dipisahkan garis putus-putus.

Daftar karya, pengalaman, dan stack. Label kiri menyala saat hover.

Split section

Section konten: label di kiri, isi di kanan.

Label path

Label kecil di atas judul section; sama dengan anchor di URL.

Kartu
Kartu dengan border putus-putus.

Blok berbingkai dengan border putus-putus dan warna surface.

Status

Tidak sedang aktif mencari kerja, tapi senang diajak ngobrol.

Satu baris keadaan singkat; titik hijau hanya untuk “ok”.

Kontrol header (tombol menu, pilihan EN | ID, tombol tema) dan kontrol footer (Animasi, Inspect) juga aktif di halaman ini.

Gerakan

Semua gerakan singkat dan hanya memakai transform dan opacity, jadi layout tidak pernah bergeser.

--dur-fast

Perubahan opacity, geseran kecil

--dur

Transform

--ease

Easing untuk semuanya

Yang bergerak

Intro loader
Satu baris boot log sekali per sesi; tombol apa saja atau klik melewatinya.
Blur-in
Teks hero muncul perlahan dengan blur kecil.
Ganti tema
Tema baru membesar sebagai lingkaran dari tombol (View Transition 450ms).
Ikon tema
Lingkaran bayangan bergeser menutup matahari jadi bulan sabit.
Ganti bahasa
Kotak penanda bergeser ke bahasa pilihan sebelum halaman berganti.
Link navigasi
Kurung siku muncul saat hover dan fokus keyboard.
Hover baris
Garis aksen tipis tumbuh di kiri baris.
Link berpanah
Panah bergeser 3px ke arah tujuannya saat hover.
Salin email
Centang hijau tergambar dan bingkai jadi hijau, lalu kembali setelah 2 detik.
Click feedback
Tanda sudut muncul di sekitar tombol saat hover dan ditekan.
Tiba di section
Crosshair menyala setelah link menu dipakai.
Panel menu
Menu mobile muncul dengan fade dan geser (150ms).

Mematikannya

Tombol Animasi di footer memasang data-motion="off" pada <html> dan mengingatnya. Durasi jadi 0s, dan loader, blur-in, serta animasi ganti tema dilewati. prefers-reduced-motion melakukan hal yang sama, dan Animasi mulai dalam keadaan off untuk pengunjung itu. Perubahan status tetap terlihat, hanya tanpa gerakan.

Aksesibilitas

Yang dilakukan kode saat ini.

Fokus keyboard
Setiap elemen interaktif mendapat outline aksen 2px dengan offset 3px pada :focus-visible.
Skip link
“Lewati ke konten” adalah elemen pertama yang bisa difokuskan.
Struktur
Satu h1 per halaman, landmark header, nav, main, dan footer, serta section yang dinamai oleh judulnya.
Status lewat ARIA
aria-current untuk section dan bahasa aktif, aria-pressed pada toggle, aria-expanded dan aria-controls pada tombol menu, serta live region untuk umpan balik salin email.
Bahasa
html lang mengikuti halaman, dan link bahasa membawa hreflang dan lang.
Area sentuh
Kontrol header setinggi minimal 40px, tombol 44px.
Kontras
Rasio setiap pasangan teks tercantum di bagian Warna, dihitung dari nilai yang aktif.
Gerakan
Mengikuti prefers-reduced-motion dan tombol Animasi.

Dibuat dengan

Hanya fakta yang bisa dicek di repositori.

Framework
Astro 7.4.1, output statis
JavaScript
Tanpa framework di sisi klien. Beberapa script inline kecil mengurus tema, bahasa, menu, salin email, dan Inspect.
Hosting
Cloudflare Workers dengan static assets, di domain kustom stackfolio.web.id.
Deploy
Push ke branch main di GitHub; Cloudflare yang membangun dan men-deploy-nya.
Font
Hubot Sans dan Martian Mono, di-host sendiri sebagai variable font.
Bahasa
Inggris dan Indonesia dari kamus bertipe, dengan hreflang dan sitemap.
Dependensi
4 paket: Astro, integrasi sitemap, dan dua font.
Tracker
Tidak ada di kode: tanpa analytics, tanpa script pihak ketiga.
Halaman ini
…

Kembali ke beranda