Bagaimana Situs Ini Dibangun
STANDAR AUDIT KEAMANAN • SKOR PERFORMA NYATA • KEPUTUSAN ARSITEKTUR
Bagi seorang insinyur perangkat lunak dengan fokus pada keamanan aplikasi, situs portofolio pribadi adalah bukti nyata dari standar rekayasa yang ia pegang. Halaman ini mendokumentasikan spesifikasi teknis, hasil audit keamanan, serta prinsip trade-off yang diterapkan.
FCP 0.6s • LCP 1.1s • CLS 0.00
Contrast > 15:1 • WCAG AA Pass
Modern Web APIs • Zero Dep Risk
Schema.org JSON-LD • OG Meta
* Skor dicapai melalui pemanfaatan Next.js Server Components, gambar terkompresi WebP/AVIF dengan ukuran proporsional, pemuatan font mandiri lokal tanpa request round-trip ke Google Fonts, serta pengurangan JavaScript overhead.
max-age=63072000; includeSubDomains; preloadMemaksa seluruh koneksi browser menggunakan protokol terenkripsi HTTPS selama 2 tahun dan terdaftar pada preloaded list browser.
default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; frame-ancestors 'self'Membatasi sumber eksekusi script dan resource hanya dari origin yang sah, memitigasi serangan XSS dan pembajakan framing clickjacking.
SAMEORIGINMencegah pembajakan clickjacking dan UI redressing dengan menolak rendering lintas-domain di dalam iframe luar.
nosniffMencegah MIME-type sniffing oleh browser terhadap konten multimedia atau respons teks statis.
strict-origin-when-cross-originMelindungi privasi pengunjung dengan membatasi transmisi referrer saat melakukan navigasi lintas-origin.
camera=(), microphone=(), geolocation=(), browsing-topics=()Menonaktifkan akses hardware sensitif klien (kamera, mikrofon, geolokasi, dan pelacak iklan pihak ketiga).
curl -I https://andikarizky.my.idHeaders disuntikkan langsung via middleware edge Next.js pada setiap respons HTTP. Uji laporan kepatuhan secara independen di portal pemindai publik:
Next.js 16 App Router & Turbopack
Mendapatkan keunggulan React Server Components (RSC) untuk meminimalkan beban bundle JavaScript klien menjadi ~102 kB First Load JS.
Mengharuskan isolasi ketat antara Server Components untuk metadata SEO dan Client Components untuk kanvas 3D WebGL.
Motion Budget & Restraint Motion
Hanya menganimasikan properti transform dan opacity berdurasi 150–350ms, menghormati prefers-reduced-motion, dan tanpa scroll-jacking buatan.
Menghilangkan efek animasi dekoratif berlebih demi responsivitas maksimal dan efisiensi baterai pengguna.
Palette Berbasis Semantik (Ink & Warm Cream)
Warna latar #120E0C dengan teks #F3EFE6 menghasilkan kontras >15:1 (melampaui standar WCAG AA 4.5:1). Aksen emas #D4AF37 dibatasi ketat hanya untuk aksi CTA utama.
Elemen UI sekunder menggunakan palet krem dan abu hangat untuk menjaga fokus hierarki visual.
Zero Third-Party Trackers & Cookie-Free
Tidak menggunakan Google Analytics, tracking pixel, atau skrip eksternal yang membebani privasi dan latensi jaringan pengguna.
Tidak memiliki metrik analitik pengunjung komersial, berfokus murni pada kinerja dan keamanan tanpa telemetri.
Pelajaran & Rencana Pengembangan Mendatang
1. Spesifisitas Mengalahkan Sekadar Poles (Specificity beats generic polish): Banyak situs portofolio modern terlihat generik karena dipenuhi elemen klise: fake ticker kata kunci yang terus bergerak, HUD label berlebihan, sound effect artifisial, dan custom cursor yang merusak aksesibilitas native OS. Menghilangkan elemen-elemen tersebut dan menggantikannya dengan bukti rekayasa nyata (replay audit lab OWASP Juice Shop, rekaman hasil verifikasi diferensial, dan halaman arsitektur transparan) membuat situs jauh lebih dihormati oleh senior engineer dan HR recruiter.
2. Rencana Pengembangan Selanjutnya:
- Integrasi Service Worker PWA untuk akses offline penuh terhadap CV dan dokumentasi studi kasus.
- Otomatisasi pengujian end-to-end (Playwright) yang memvalidasi integritas security headers setiap kali proses build CI/CD berjalan.
- Live CVE feed worker yang secara berkala menampilkan benchmark terbaru dari OTOPen scanner engine.