// COLOPHON / COLO-01

Colophon

Semua keputusan teknis dan desain yang membentuk website ini — terbuka untuk siapa pun yang ingin tahu cara kerjanya.

STACK TEKNIS

MARKUP

HTML5 semantik. Tanpa framework. Tanpa kompiler. Buka devtools, kamu langsung bisa baca strukturnya.

STYLING

CSS modern — custom properties, grid, clamp(). Satu file. Tidak ada preprocessor, tidak ada purge, tidak ada build step.

INTERAKSI

Vanilla JavaScript ES6+ dalam satu IIFE. IntersectionObserver, Web Animations API, Canvas 2D untuk grafik sensor.

HOSTING

cPanel shared hosting. Upload via SFTP atau File Manager. .htaccess untuk HTTPS redirect, kompresi gzip, dan cache header.

TIPOGRAFI

Bricolage Grotesque

Display — heading besar. Dipilih karena ekspresif dan sedikit tidak biasa, cocok dengan karakter "ngulik" tapi tetap terbaca.

DIPAKAI DI → Semua heading (h1–h4), nama layanan, judul proyek

IBM Plex Sans

Teks bacaan. Terbaca nyaman di berbagai ukuran layar. Italic-nya bagus untuk deskripsi pendek.

DIPAKAI DI → Body text, deskripsi, paragraf konten

JetBrains Mono

Label, kode, angka koordinat, kode komponen (SVC-01). Memperkuat estetik blueprint/teknis.

DIPAKAI DI → Label section, kode komponen, angka sensor, stack tags

PALET WARNA

#0E1116
Latar Gelap

#171C24
Surface

#3DDC84
Hijau PCB

#FFB224
Amber Solder

#FF6B57
Koral

#F2EFE6
Krem Paper

TARGET PERFORMA

95+

Lighthouse (all)

<2.5s

LCP (4G)

<200KB

Total (minus font)

WCAG Kontrast

KEPUTUSAN DESAIN

Kenapa tidak pakai React/Vue/Next.js?

Website ini konten statis yang diperbarui jarang. Overhead framework tidak sebanding dengan manfaatnya. File HTML/CSS/JS langsung bisa di-upload ke cPanel tanpa build pipeline.

Kenapa tidak ada stock photo?

Semua ilustrasi dibuat dari SVG inline dan CSS. Tidak ada gambar orang tersenyum di depan laptop. Setiap elemen visual harus punya fungsi: menjelaskan sesuatu, bukan menghias.

Kenapa blueprint/datasheet?

Gaya ini mencerminkan cara kerja tim — spesifikasi jelas, komponen terlabel, proses terdokumentasi. Ini bukan estetika keren-kerenan; ini cara berpikir kami.