Lompat ke konten
RingkasanSep 2026

CH. IVol. 03 · Bab 01 (01)

Portofolio Platform

Portofolio yang mengurus dirinya sendiri: panel admin penuh, pelacak kunjungan mandiri, dan SEO otomatis.

Saya capek setiap kali ingin mengganti satu kalimat di portofolio harus mengubah kode dan deploy ulang. Jadi saya bangun ulang dari nol sebagai aplikasi Laravel 12 dan Vue 3 lewat Inertia.js v2 — dengan panel admin yang mengelola profil, proyek, pengalaman, sertifikat, dan tulisan blog.

Ada juga pelacak kunjungan sendiri tanpa pihak ketiga: mencatat halaman apa yang dibuka, dari mana asalnya, dan perangkat apa yang dipakai, lengkap dengan grafik di dashboard. SEO-nya otomatis — sitemap dan tag Open Graph dibuatkan sistem — dan autentikasi adminnya diamankan Fortify dengan verifikasi dua faktor.

Baca lewat commit-nya
nouvalsaputra.43.156.144.127.sslip.io

Platform portofolio — panel admin, pelacak kunjungan, dan halaman publik dalam satu aplikasi.

Galeri proyek · 01

CeritaPerjalanan dalam 6 langkah

Yang tercatat di riwayat kerja.

  1. 01 · Sep 2026 · commit pertama

    Mulai dari Docker yang bisa jalan

    Proyek ini dimulai dari hal yang paling membosankan dan paling menentukan: memastikan aplikasinya benar-benar hidup di VPS kecil. Dua commit pertama isinya perbaikan build — batas memori, opsi Node, dan ganti basis data dari PostgreSQL ke MySQL supaya cocok dengan yang tersedia di server.

    riwayat kerja, apa adanya

    • first commit
    • fix: add NODE_OPTIONS for low RAM build
    • fix: switch docker from pgsql to mysql + fix NODE_OPTIONS
  2. 02 · Isi data

    Mengisi dengan data yang benar

    Aplikasi kosong hanya berguna sebagai demo. Saya menulis seeder data profil yang nyata — pengalaman kerja, pendidikan, sertifikasi, dan kontak — lalu membersihkan seeder data palsu yang sempat tertinggal dari kerangka awal.

    riwayat kerja, apa adanya

    • feat: isi data profil Nouval B. Saputra (pengalaman, pendidikan, sertifikasi, kontak)
    • perf: hapus wait MySQL di entrypoint + bersihkan seeder data palsu
  3. 03 · Pengalaman admin

    Formulir yang benar-benar bisa diketik

    Ada commit yang isinya satu baris keputusan penting: mengganti editor kaya CKEditor dengan textarea biasa. Editornya terlihat bagus, tapi di lingkungan saya isinya tidak bisa diketik sama sekali. Sebuah form yang tidak bisa diketik tidak layak dipertahankan hanya karena tampilannya rapi.

    riwayat kerja, apa adanya

    • fix: ganti CKEditor dengan textarea biasa agar semua form bisa diketik
  4. 04 · Model pengalaman

    Menyederhanakan yang berlebihan

    Awalnya 'sistem kerja' (misalnya remote) saya buat sebagai kolom sendiri, terpisah dari 'tipe pekerjaan'. Setelah dipakai, dua kolom itu selalu diisi bersamaan dan justru membingungkan saat mengisi form. Saya gabungkan keduanya, lalu menandai tipe pekerjaan sebagai opsional.

    riwayat kerja, apa adanya

    • feat: tambah tipe pekerjaan & sistem kerja (remote) di pengalaman
    • refactor: gabung Sistem Kerja ke Tipe Pekerjaan (remote/jarak jauh)
    • chore: tandai Tipe Pekerjaan sebagai opsional pada form pengalaman
  5. 05 · Galeri & berkas

    Satu gambar yang hilang mengajarkan banyak

    Beberapa commit berturut-turut berisi perbaikan soal berkas: menyimpan yang baru sebelum menghapus yang lama, menandai berkas yang hilang dengan jelas, dan memisahkan pratinjau gambar utama dari galeri. Sebelumnya menyimpan konten tanpa mengunggah ulang membuat gambar lama ikut terhapus.

    riwayat kerja, apa adanya

    • fix: cegah gambar hilang - simpan dulu baru hapus, tandai berkas hilang, amankan deploy
    • style: perjelas penanda berkas hilang - ikon lebih besar, garis lebih tebal, kontras naik
    • fix(upload): jangan hapus gambar/pdf lama saat simpan tanpa unggah ulang
    • feat: sertifikasi bisa unggah banyak gambar + galeri & lightbox di situs publik
    • feat(admin): pisah pratinjau gambar utama & galeri, tambah tombol hapus berkas
  6. 06 · Menyelesaikan

    Membuat deploy bisa dipercaya

    Commit terakhir mengurus hal-hal yang biasanya baru terasa saat sudah telat: migrasi dijalankan sebelum cache config, penanda versi build supaya bisa dipastikan deploy-nya benar-benar masuk, tombol keluar di sidebar admin, dan gaya dialog konfirmasi yang disamakan dengan tema.

    riwayat kerja, apa adanya

    • fix(deploy): migrasi sebelum cache config + tambah penanda versi build agar deploy bisa diverifikasi
    • feat(admin): tambah tombol keluar di sidebar admin
    • fix(ui): satukan gaya dialog konfirmasi agar tidak kontras dengan tema
AnatomiDi balik layar

Cara semuanya disusun.

Cara bagian-bagian bicara

  1. 01Pengunjunghalaman publik
  2. 02Inertia.js v2partial reload
  3. 03Laravel 12rute + controller
  4. 04MySQLkonten + kunjungan
  5. 05Panel adminCMS + statistik

Isi proyek

  • /admin/profil
  • /admin/proyek
  • /admin/pengalaman
  • /admin/sertifikat
  • /admin/blog
  • /admin/pesan
  • /admin/kunjungan
  • /seo/sitemap
  • /seo/opengraph
  • /tracking/geo
Portofolio Platform: bab 01, Nouval B. Saputra