Ultra-Fast, Modern, Zero-JS Architecture Personal Platform & Strategic Portfolio built with Astro 5, Tailwind CSS, Decap CMS, and Advanced Technical SEO/GEO/AEO.
🌐 Kunjungi Website • ⚡ Audit Live PageSpeed (100/100) • 💼 LinkedIn • 💬 Kontak WhatsApp • 🐙 GitHub
- Ringkasan Eksekutif & Nilai Strategis
- Performa & Core Web Vitals (100/100 Mobile Score)
- Fitur Utama & Arsitektur Frontend
- Headless Content Management System (Decap CMS Studio)
- Strategi Optimasi Mesin Pencari: SEO, GEO & AEO
- Tech Stack & Ekosistem Teknologi
- Struktur Direktori Proyek
- Alur Otomatisasi & CI/CD Pipeline
- Panduan Pengembangan Lokal (Local Development)
- Kebijakan Privasi & Keamanan Data
- Kerangka Lisensi & Hak Kekayaan Intelektual
- Penghargaan & Credits
- Kontak & Kolaborasi
Website ini adalah platform digital profesional resmi milik Andre Wahyu Hermawan (Landing Page Strategist & Conversion Rate Specialist). Dibangun sebagai perwujudan standar tertinggi rekayasa website modern:
- Performa Ekstrem (Zero-JS Runtime): Memanfaatkan kompilasi HTML statis murni dengan Astro 5, menghasilkan loading kilat tanpa beban JavaScript runtime di browser pengunjung.
- Pengalaman Pengguna Elegan (Premium UX/UI): Navigasi mengambang (floating navbar) dengan deteksi rute aktif, mode gelap/terang otomatis tanpa kedipan (Zero-FOUC), dan tipografi yang nyaman dibaca.
- Manajemen Konten Mandiri Tanpa Biaya Server: Dikelola secara visual menggunakan Decap CMS Studio berbasis Git, menyimpan konten langsung ke repositori GitHub tanpa ketergantungan pada database SQL/NoSQL eksternal.
- Dirancang untuk Era Mesin Pencari AI: Menyiapkan konten agar mudah dirayapi, dipahami, dan dirangkum oleh mesin pencari konvensional (Google, Bing) maupun mesin pencari generasi AI (Perplexity, ChatGPT Search, Google AI Overviews).
Platform ini meraih skor sempurna 100/100 pada audit resmi Google PageSpeed Insights untuk pengujian perangkat seluler (Mobile), membuktikan kepatuhan penuh terhadap standar Core Web Vitals terbaru:
👆 Klik gambar atau tombol di atas untuk membuka laporan hasil audit resmi Google secara langsung.
| Metrik Core Web Vitals | Nilai Terukur | Ambang Batas Ideal Google | Evaluasi |
|---|---|---|---|
| First Contentful Paint (FCP) | < 0.8 detik |
< 1.8 detik |
🟢 Sangat Cepat (Good) |
| Largest Contentful Paint (LCP) | < 1.2 detik |
< 2.5 detik |
🟢 Sangat Cepat (Good) |
| Cumulative Layout Shift (CLS) | 0.000 |
< 0.1 |
🟢 Nol Pergeseran Tata Letak |
| Total Blocking Time (TBT) | 0 ms |
< 200 ms |
🟢 Tanpa Hambatan Eksekusi |
| Speed Index (SI) | < 1.0 detik |
< 3.4 detik |
🟢 Render Instan |
- Critical CSS Inlining: Seluruh stylesheet esensial diinjeksi secara langsung ke dalam tag
<style>di<head>(inlineStylesheets: 'always'di konfigurasi Astro), meniadakan render-blocking network requests. - Minifikasi HTML & Aset: Kompresi HTML otomatis saat build produksi.
- Optimasi Media Otomatis: Konversi gambar otomatis ke format WebP dengan resolusi responsif, rasio aspek eksplisit (
width&height), dan atributdecoding="async". - Zero Client-Side JavaScript Runtime: Tidak memuat framework JavaScript berat di frontend publik.
Website ini dilengkapi dengan mesin pewarnaan dinamis yang memungkinkan pemilik website mengubah warna aksen utama website kapan saja melalui Decap CMS:
- Penyimpanan Data: Warna utama tersimpan di file
src/data/theme.jsondalam format HEX atau RGB (contoh:#1E3F6E). - Parser Pintar: Modul
src/data/site.tssecara otomatis membedah dan mengonversi format warna menjadi kode HEX, CSS RGB standar, dan nilai RGB terpisah spasi (30 63 110) sesuai standar modern CSS Color Module Level 4. - Injeksi CSS Variables di Head: Diinjeksikan langsung ke
:rootmelalui tag<style is:inline>diBaseHead.astrountuk menjamin ketiadaan kedipan warna (Zero Flash of Unstyled Content). - Pemetaan Tailwind CSS: Terintegrasi langsung dengan konfigurasi Tailwind (
tailwind.config.mjs) sehingga kelas utilitasbg-primary,text-primary, danborder-primarylangsung mengikuti warna aktif secara otomatis di seluruh tombol, lencana, dan tautan.
- Penyimpanan Preferensi: Menggunakan
localStoragebrowser dan pendeteksi tema bawaan sistem operasi (prefers-color-scheme). - Pencegahan FOUC: Skrip inline mikro di bagian paling awal
<head>mengevaluasi tema sebelum rendering elemen body dimulai. - Kontras Terkalibrasi: Pada mode gelap, teks latar belakang menggunakan palet zinc netral gelap (
dark:bg-zinc-900), sementara elemen ikon navigasi utama (GitHub dan toggle tema) secara cerdas beralih ke putih bersih (dark:text-white) untuk memastikan kontras dan aksesibilitas maksimal.
- Desain Mengambang (Floating Capsule): Navigasi modern berorientasi tengah dengan efek backdrop-blur kaca frosted (
bg-white/90 dark:bg-zinc-900/75). - Indikator Aktif Berbasis Rute: Komponen
HeaderLink.astromendeteksi rute halaman yang sedang dibuka secara dinamis (isActive). Tombol yang aktif secara otomatis menyala menggunakan Primary Color lengkap dengan garis bawah indikator 2px (border-b-2 border-primary text-primary), memudahkan orientasi navigasi pengunjung.
- Presentasi Masalah & Solusi: Berbeda dengan portofolio biasa yang hanya memajang gambar, halaman studi kasus menyajikan konteks mendalam dengan struktur:
- 🎯 The Challenge / Problem: Akar permasalahan bisnis klien atau proyek.
- 💡 The Strategic Solution: Solusi arsitektur dan strategi konversi yang dieksekusi.
- ⚡ Key Features: Fitur-fitur unggulan yang dibangun.
- 📈 Measurable Impact: Hasil terukur dan dampak performa setelah peluncuran.
- Dual Call-to-Action: Tombol ganda yang rapi: tombol sekunder putih untuk Details dan tombol aksen utama Primary Color untuk Live Preview.
- Menampilkan ringkasan proyek komersial dengan deskripsi ringkas, lencana teknologi (tech stack tags), dan tautan langsung ke website live demo.
- Dukungan MDX & Markdown: Penulisan konten fleksibel mendukung komponen interaktif di dalam artikel.
- Table of Contents (Daftar Isi) Otomatis: Memindai heading
<h2>dan<h3>secara otomatis lengkap dengan fitur Scrollspy aktif yang menyorot bab yang sedang dibaca. - Giscus Comments: Sistem diskusi interaktif tanpa database pribadi, menggunakan GitHub Discussions API yang aman dari spam dan ramah privasi.
- Menggunakan elemen native HTML5
<details>dan<summary>yang sepenuhnya ramah aksesibilitas keyboard (A11y) dan ringan tanpa butuh dependensi JavaScript eksternal.
- Tombol obrolan langsung WhatsApp adaptif yang melayang di sudut kanan bawah, terkonfigurasi secara dinamis via CMS untuk mempermudah calon klien menghubungi secara instan.
Platform ini mengintegrasikan Decap CMS v3.0.12 yang dapat diakses di /studio/ untuk mengelola seluruh ekosistem konten website:
┌────────────────────────────────────────────────────────┐
│ Decap CMS Studio │
├─────────────────┬──────────────────────────────────────┤
│ Koleksi Konten │ Cakupan Pengaturan │
├─────────────────┼──────────────────────────────────────┤
│ 📝 Blog Posts │ Judul, SEO Title, Gambar, Markdown │
│ 💼 Client Proj. │ Proyek Klien, Tautan Demo, Tags │
│ 🚀 Side Proj. │ Studi Kasus, Fitur, Problem, Solusi │
│ ❓ FAQ │ Tanya Jawab Umum │
│ 👤 Profil │ Biodata, Avatar, Tautan Media Sosial │
│ ⚙️ Pengaturan │ Favicon, Judul Web, Primary Color │
└─────────────────┴──────────────────────────────────────┘
- Otorisasi Terkunci: Panel studio dikunci secara terprogram hanya untuk akun pemilik repositori (
@andrean-lp). - Penyimpanan Kredensial Terisolasi: Menggunakan GitHub Personal Access Token (PAT) yang disimpan secara privat di
localStorageperamban pemilik saja. Tidak ada token yang pernah di-hardcode ke dalam repositori publik. - Anti-Logout Otomatis: Dilengkapi mekanisme proteksi sesi lokal yang mencegah terhapusnya sesi kerja secara tidak sengaja saat bernavigasi di dalam panel editor.
Fitur unggulan di mana browser pemilik secara otomatis memproses gambar saat diunggah ke CMS sebelum dikirim ke GitHub:
- Auto-Cropping Rasio Aspek:
- Foto Profil (Avatar): Dipotong presisi ke rasio kotak 1:1 dengan resolusi retina maksimal 600x600 px (~15 KiB).
- Favicon: Dipotong ke rasio kotak 1:1 dengan resolusi optimal 192x192 px (~3 KiB).
- Gambar Cover Artikel / Proyek: Dioptimalkan ke resolusi responsif maksimal 1200x800 px (~40 KiB).
- Konversi Otomatis ke WebP: Gambar dalam format
.png,.jpg, atau.jpegotomatis dikonversi ke format.webpberkualitas tinggi langsung di memori browser menggunakan HTML5 Canvas API.
- Pembersihan Otomatis: Dilengkapi event listener CMS (
preDelete&postSave) serta skrip pembersih otomatisscripts/clean-unused-images.mjsyang berjalan di setiap build pipeline. - Hemat Kapasitas: Saat sebuah artikel dihapus atau favicon diganti dengan yang baru, file gambar lama yang sudah tidak terpakai akan otomatis dihapus dari repositori GitHub untuk mencegah penumpukan file sampah.
Website ini menyematkan data terstruktur (Structured Data) komprehensif berstandar Schema.org dalam format JSON-LD:
- WebSite Schema: Memberikan identitas global situs, nama resmi, dan tautan pencarian.
- Person Schema: Menegaskan identitas entitas Andre Wahyu Hermawan, profesi, foto profil, dan tautan media sosial resmi (SameAs links ke LinkedIn, GitHub, Instagram, dll.).
- BlogPosting Schema: Menandai artikel dengan metadata tanggal publikasi, tanggal pembaruan, nama penulis, dan gambar unggulan.
- BreadcrumbList Schema: Mempermudah mesin pencari memahami hierarki navigasi halaman.
Di era mesin pencari bertenaga kecerdasan buatan (AI Overviews, Perplexity AI, ChatGPT Search, Bing Copilot), platform ini mengadopsi teknik optimasi mutakhir:
- Struktur Teks Deklaratif: Konten disusun dengan pola tanya-jawab yang lugas, mempermudah model AI mengekstrak kutipan langsung (direct quotation).
- Hierarki Heading Semantik: Penggunaan urutan
<h1>hingga<h3>yang konsisten untuk pemahaman konteks semantik yang akurat. - Format Jawaban Rangkuman: Setiap artikel dan studi kasus diawali dengan ringkasan padat yang ramah terhadap algoritma AI summary box.
- Meta tag lengkap
og:title,og:description,og:image,twitter:card, dantwitter:imagedengan target dimensi standar 1200x630 px untuk memastikan pratinjau link yang profesional dan rapi saat dibagikan di WhatsApp, LinkedIn, Twitter, maupun Facebook.
- Sitemap Otomatis: Dihasilkan oleh integrasi
@astrojs/sitemapdi/sitemap-index.xml, secara otomatis mengecualikan panel studio privat dari indeks pencarian. - RSS Feed: Tersedia di
/rss.xmluntuk memudahkan pembaca berlangganan pembaruan artikel melalui RSS reader modern.
Frontend Architecture Headless Management Infrastructure & CI/CD
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Astro 5 │ │ Decap CMS v3 │ │ GitHub Actions │
│ (Static Engine) │ │ (Git-based CMS) │ │ (Build Pipeline)│
└────────┬─────────┘ └────────┬─────────┘ └────────┬─────────┘
│ │ │
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Tailwind CSS │ │ HTML5 Canvas API │ │ GitHub Pages │
│(Utility Styling) │ │ (WebP Converter) │ │ (Global Edge) │
└──────────────────┘ └──────────────────┘ └──────────────────┘
| Domain | Teknologi Terpilih | Alasan & Manfaat Teknis |
|---|---|---|
| Framework Utama | Astro v5.7+ | Static Site Generation (SSG) terdepan di dunia dengan zero JavaScript runtime secara default |
| CSS Framework | Tailwind CSS v3.4 | Atomic styling teroptimasi, dukungan dark mode selector, dan integrasi typography |
| Ikonografi | Lucide Icons | Koleksi ikon SVG bersih, ringan, konsisten, dan mewarisi pewarnaan teks currentColor |
| Content Management | Decap CMS v3.0.12 | CMS visual tanpa database server; menyimpan perubahan langsung sebagai Git commit |
| Image Processing | Sharp & Canvas API | Kompresi dan optimasi gambar berkecepatan tinggi |
| Typography & MDX | @astrojs/mdx | Penulisan artikel fleksibel yang mendukung komponen interaktif di dalam Markdown |
| Type Safety | TypeScript v5.5 | Menjamin keandalan kode dan mencegah broken link/type error saat build produksi |
| Sistem Komentar | Giscus | Komentar artikel modern tanpa database, ditenagai oleh GitHub Discussions API |
| Hosting & CI/CD | GitHub Pages | Hosting statis global dengan latensi rendah, SSL otomatis, dan biaya server nol |
andrean-lp.github.io/
├── .github/
│ └── workflows/
│ └── deploy.yml # Pipeline otomatisasi CI/CD GitHub Actions
├── public/
│ ├── images/ # Media artikel & aset unggahan CMS
│ ├── studio/ # Antarmuka web Decap CMS Studio
│ │ ├── config.yml # Konfigurasi skema koleksi & bidang CMS
│ │ └── index.html # Panel editor visual, auto-crop & WebP converter
│ ├── favicon.ico # Ikon tab browser
│ ├── robots.txt # Panduan crawling bot mesin pencari
│ └── site.webmanifest # Manifest aplikasi web PWA
├── scripts/
│ ├── clean-unused-images.mjs # Skrip pendeteksi & pembersih media yatim
│ └── optimize-images.mjs # Skrip pengoptimalan gambar otomatis via Sharp
├── src/
│ ├── assets/ # Aset statis internal & foto profil
│ ├── components/ # Komponen antarmuka Astro yang dapat digunakan ulang
│ │ ├── icons/ # Komponen ikon SVG (GitHub, dll.)
│ │ ├── widgets/ # Komponen fungsional (Table of Contents, WhatsApp)
│ │ ├── FaqSection.astro # Komponen accordion FAQ interaktif
│ │ ├── FeaturedCaseStudy.astro # Komponen showcase studi kasus beranda
│ │ ├── PostItem.astro # Komponen kartu item artikel blog
│ │ └── ProjectList.astro # Komponen katalog proyek klien
│ ├── content/ # Koleksi konten utama (Content Collections)
│ │ └── blog/ # Artikel blog dalam format Markdown (.md) dan MDX
│ ├── data/ # Sumber data terstruktur (Single Source of Truth)
│ │ ├── featured_case_study.json # Data studi kasus proyek unggulan
│ │ ├── profile.json # Data biodata profil, kontak & tautan sosial
│ │ ├── projects.json # Data daftar proyek klien
│ │ ├── site.json # Data pengaturan global situs
│ │ ├── site.ts # Parser warna dinamis & pembuat skema SEO
│ │ └── theme.json # Konfigurasi warna primer aktif dari CMS
│ ├── layouts/ # Kerangka tata letak halaman
│ │ ├── components/ # Komponen penyusun layout (Header, Footer, BaseHead)
│ │ └── BaseLayout.astro # Layout HTML dasar global
│ ├── pages/ # Sistem perutean berbasis file (File-based Routing)
│ │ ├── posts/ # Halaman indeks daftar seluruh artikel blog
│ │ ├── projects/ # Halaman indeks daftar proyek klien
│ │ ├── side-projects/ # Halaman detail dinamis [slug].astro studi kasus
│ │ ├── tags/ # Halaman filter artikel berdasarkan tag/kategori
│ │ ├── about.astro # Halaman tentang profil & cerita pemilik
│ │ ├── 404.astro # Halaman penanganan rute tidak ditemukan
│ │ ├── index.astro # Halaman beranda utama website
│ │ └── rss.xml.js # Generator feed RSS 2.0 otomatis
│ └── styles/
│ └── global.css # Styling dasar Tailwind & fallback CSS Variables
├── astro.config.mjs # Konfigurasi Astro (MDX, Sitemap, Tailwind)
├── tailwind.config.mjs # Konfigurasi Tailwind CSS (Color Mapping, Plugins)
├── tsconfig.json # Konfigurasi TypeScript
├── LICENSE # Dokumen lisensi open-source MIT resmi
├── package.json # Daftar dependensi modul & script eksekusi
└── README.md # Dokumentasi komprehensif proyek
Setiap pembaruan yang terjadi—baik melalui penulisan artikel di Decap CMS Studio maupun melalui git commit oleh developer—dikelola oleh alur otomatisasi terintegrasi:
- Commit & Push Otomatis: Saat artikel atau data diubah di CMS, Decap CMS membuat commit Git resmi atas nama pengguna dan mem-push langsung ke branch
main. - Pembersihan Media Yatim: Workflow menjalankan
node scripts/clean-unused-images.mjsuntuk mendeteksi dan menghapus file gambar dipublic/images/yang tidak lagi dirujuk oleh artikel mana pun. - Kompresi Gambar Otomatis: Menjalankan
node scripts/optimize-images.mjsmenggunakan engine Sharp untuk memastikan aset gambar berukuran seringan mungkin. - Pemeriksaan Integritas Tipe Data: Menjalankan
astro checkuntuk memvalidasi seluruh tipe data TypeScript, tautan, dan komponen agar bebas dari potensi runtime error. - Kompilasi Produksi Berperforma Tinggi: Menjalankan
astro builduntuk merender seluruh halaman HTML statis beserta inlining CSS kritis (inlineStylesheets: 'always'). - Penerbitan Global: Direktori
dist/dipublikasikan ke server global GitHub Pages secara otomatis dalam waktu kurang dari satu menit.
Bagi pengembang yang ingin mempelajari struktur kode atau menjalankan website ini di komputer lokal:
- Node.js: Versi
20.xatau lebih baru - Package Manager:
pnpm(disarankan) ataunpm
-
Clone Repositori:
git clone https://github.com/andrean-lp/andrean-lp.github.io.git cd andrean-lp.github.io -
Pasang Seluruh Dependensi:
pnpm install # atau jika menggunakan npm: npm install -
Jalankan Server Pengembangan Lokal:
pnpm run dev
Buka peramban Anda di alamat
http://localhost:4321. Halaman akan otomatis melakukan Hot Module Replacement (HMR) setiap kali ada file kode yang diedit. -
Uji Validasi Tipe & Kode:
pnpm run astro check
-
Kompilasi Simulasi Produksi:
pnpm run build pnpm run preview
Proyek ini dibangun dengan standar keamanan data tertinggi tanpa kompromi:
- 🔒 Zero Hardcoded Secrets: Tidak ada token akses rahasia (Personal Access Token), kredensial otentikasi, atau kunci privat yang disimpan di dalam repositori Git publik.
- 🛡️ Client-Side Token Isolation: Kredensial untuk pengelolaan CMS disimpan secara eksklusif di dalam penyimpanan terisolasi peramban pemilik (
localStorage) dan tidak pernah dikirimkan ke server perantara pihak ketiga mana pun selain langsung ke API resmi GitHub via koneksi terenkripsi HTTPS. - 🌐 Content Security Policy (CSP): Menggunakan konfigurasi header keamanan ketat yang membatasi asal sumber skrip, koneksi API, dan pemuatan bingkai luar hanya ke sumber terverifikasi resmi (Self, Giscus, Google Analytics/CDN).
Repositori ini menerapkan pembagian lisensi ganda (Dual-Licensing Framework) yang jelas untuk membedakan antara kode program dan karya konten pribadi:
Seluruh kode program, komponen arsitektur, berkas konfigurasi, dan stylesheet dalam repositori ini dilisensikan di bawah MIT License.
- Diizinkan: Siapa pun bebas menyalin, mempelajari, memodifikasi, menggabungkan, mempublikasikan, dan menggunakan arsitektur kode ini untuk keperluan edukasi, proyek pribadi, maupun portofolio masing-masing.
- Syarat: Tetap menyertakan pemberitahuan hak cipta dan lisensi asli yang tercantum di berkas
LICENSE. - Batasan: Disediakan "sebagaimana adanya" (AS IS) tanpa jaminan atau tanggung jawab hukum apa pun dari pembuat kode asli.
Hak cipta dilindungi undang-undang untuk seluruh materi orisinal berikut:
- Seluruh artikel blog, naskah tulisan, panduan, dan copywriting.
- Seluruh dokumentasi studi kasus portofolio, logo, foto profil, dan materi grafis pribadi milik Andre Wahyu Hermawan.
- Ketentuan: Dilarang menduplikasi, mempublikasikan ulang (republish), menjual, atau mengklaim karya konten, tulisan, dan foto pribadi tersebut tanpa izin tertulis dari pemilik hak cipta.
Platform ini terwujud berkat dedikasi komunitas open-source dunia:
- Arsitektur & Kustomisasi: Dirancang, dikembangkan, dan dioptimasi oleh Andre Wahyu Hermawan.
- Inspirasi Template Awal: Berbasis dan terinspirasi dari template open-source Astro karya pengembang berbakat Muhammad Syakirurohman.
- Komunitas Pengembang: Terima kasih kepada tim pengembang Astro, Tailwind Labs, Decap CMS, dan Lucide atas perangkat lunak luar biasa yang memungkinkan terciptanya web modern berkinerja tinggi.
Apakah Anda membutuhkan pembuatan landing page berkonversi tinggi, audit performa website, atau ingin berdiskusi seputar strategi web modern? Mari terhubung:
- 🌐 Website Portofolio: andrean-lp.github.io
- 💼 LinkedIn: linkedin.com/in/andrean-lp
- 💬 WhatsApp Bisnis: +62 851-8743-7036
- 🐙 GitHub Profil: @andrean-lp
- 📸 Instagram: @andrean.lp
© 2026 Andre Wahyu Hermawan. Seluruh hak cipta dilindungi undang-undang.
Dibuat dengan presisi menggunakan Astro 5 & Tailwind CSS.
Dibuat dengan presisi menggunakan Astro 5 & Tailwind CSS.