Website Portofolio & Layanan
Website ini: portofolio, halaman layanan, dan blog teknis berbasis konten MDX di repository, di-prerender sepenuhnya saat build dengan JavaScript seminimal mungkin di browser.
- Peran
- Pemilik proyek: menentukan struktur konten, desain, dan arsitektur website.
- Tahun
- 2026
- Teknologi
- Next.js
- TypeScript
- Tailwind CSS
- MDX
- Shiki
- GitHub Actions
Konteks
Website ini menjadi titik temu bagi recruiter yang ingin menilai kemampuan teknis dan calon klien yang ingin memahami layanan sebelum menghubungi.
Masalah dan tujuan
Portofolio umum sering hanya menampilkan daftar teknologi. Pengunjung membutuhkan konteks: masalah apa yang diselesaikan, keputusan apa yang diambil, dan bagaimana cara memulai kerja sama.
- Konten mudah dikelola langsung dari repository tanpa CMS.
- Halaman cepat dimuat dan tetap terbaca tanpa menunggu JavaScript.
- Data pribadi terpusat dan aman ditampilkan sebelum seluruhnya dilengkapi.
Batas pekerjaan
Termasuk
- Halaman portofolio, layanan, blog, about, dan kontak.
- Model konten artikel dengan validasi metadata dan status draft.
- SEO teknis: metadata per halaman, sitemap, robots, dan Open Graph.
Di luar lingkup
- CMS eksternal.
- Komentar atau akun pengguna.
Peran saya
Pemilik proyek: menentukan struktur konten, desain, dan arsitektur website.
- Menyusun arsitektur informasi untuk dua audiens: recruiter dan calon klien.
- Membangun blog berbasis MDX dengan syntax highlighting saat build.
- Menyiapkan workflow CI untuk lint, typecheck, dan production build.
Solusi
Seluruh route di-prerender sebagai HTML statis. Artikel MDX dikompilasi saat build dengan plugin remark/rehype.
Syntax highlighting diproses oleh Shiki saat build, sehingga browser tidak memuat highlighter. Komponen interaktif seperti tombol salin dibuat kecil dan terisolasi.
Identitas, kontak, layanan, dan proyek dipusatkan di folder src/config dan src/data. Placeholder yang belum diganti otomatis disembunyikan dari tautan publik.
Alasan keputusan teknis
MDX di repository, bukan CMS
Konten ikut versioning Git, dapat ditinjau melalui pull request, dan tidak menambah layanan yang perlu dikelola.
Server Components sebagai default
Konten tidak membutuhkan state di browser. JavaScript hanya dikirim untuk navigasi mobile, filter, pencarian, form, dan tombol salin.
Arsitektur dan alur implementasi
- 01MDX & data TSdi repository
- 02ValidasiZod · TypeScript
- 03next buildHTML statis
- 04RencanaHostingmenunggu keputusan
Hasil
Halaman statis
Output next build menunjukkan seluruh halaman di-prerender sebagai konten statis.
Pemeriksaan otomatis
Workflow CI menjalankan lint, typecheck, dan build pada setiap push dan pull request setelah repository terhubung ke GitHub.
Pelajaran yang diperoleh
- Memisahkan data pribadi dari komponen membuat website dapat dirilis bertahap tanpa menampilkan tautan kosong.