Kalau kamu pernah lihat website ini versi lamanya, mungkin kamu bakal nanya: “Ini beneran ditulis ulang dari nol?” Jawabannya: iya. Dengan bantuan Claude Code, portfolio yang dulu dibangun di atas Next.js JavaScript akhirnya di-rewrite ke codebase modern berbasis template Next.js milikku sendiri.
Rewrite codebase Next.js lama yang mulai tertinggal
Versi lama website ini mulai kubangun pada Februari 2022, ketika aku masih duduk dikelas 10 SMA. Saat itu Next.js masih terasa sangat berbeda dari sekarang. Codebase-nya menggunakan JavaScript, struktur pages router, Apollo client, twin.macro, dan beberapa pola yang waktu itu terasa normal, tetapi sekarang mulai menyulitkan maintenance.
Desain awalnya sendiri sudah kubuat di Figma sekitar November 2021. Jadi, rewrite ini bukan hanya memindahkan file. Ini adalah proses membawa codebase Next.js lama yang mulai tertinggal ke fondasi baru, sambil mempertahankan taste, soul, dan design system yang sudah kubangun sejak SMA.
Project pelarian yang berubah jadi arsip perjalanan
Sedikit intermezzo personal. Pada Juli 2021, aku dan keluargaku terkena COVID-19. Aku masuk SMA sekitar 21 Juli, lalu bapakku meninggal dunia pada 27 Juli. Masa itu jelas bukan periode yang mudah.
Website ini kemudian menjadi semacam project pelarian. Bukan karena waktu itu aku sudah punya roadmap karier yang matang, tetapi karena membuat sesuatu terasa lebih mudah daripada terus memikirkan keadaan. Memperbaiki satu pixel, mengganti warna tombol, atau mencoba animasi baru memberiku ruang untuk tetap bergerak. Kedengarannya agak dramatis, tapi memang begitu 😭
Dari update blog sampai semester 5
Codebase ini terus tumbuh secara organik. Aku menambahkan section, mengganti copy, mencoba animasi, memindahkan route, dan menyimpan keputusan lama dengan alasan klasik: “nanti dibereskan”.
Terakhir kali website ini kusentuh secara berarti adalah sekitar Maret 2024, ketika aku menambahkan blog. Setelah itu, kuliah, organisasi, robotics, networking, dan project lain mengambil alih fokus.
Rewrite ini baru terjadi setelah aku masuk semester 5. Timing-nya juga cukup absurd. Setelah liburan semester, aku hampir tidak pernah benar-benar libur karena harus mengurus PKM. Di ITS, PKM dikawal dengan banyak monitoring dan evaluasi. Mendekati PKP2, ritmenya makin padat dan aku bahkan sempat dispen kuliah selama dua minggu gara-gara PKM ini wkwkwk.
Setelah camp PKM selesai dan PKP2 akhirnya lewat, otak ini butuh project refresh. Jadi, portfolio lama ini kubuka lagi. Dari project pelarian masa SMA, berubah menjadi project refresh setelah PKP2 juga. Full circle 😂
Tech stack rewrite dan alasan di baliknya
Rewrite ini menggunakan fondasi dari template Next.js punya gwej. Template ini kupakai supaya codebase baru punya style coding, konvensi folder, dan baseline tooling yang konsisten.
| Technology | Kenapa dipakai | Trade-off |
|---|---|---|
| Next.js 16 | App Router, server rendering, Metadata API, ISR, dan route convention yang cocok untuk portfolio serta blog. | Harus memahami batas server dan client component agar env server tidak bocor ke browser. |
| React 19 | Ekosistem familiar untuk section interaktif, motion, dan komponen reusable. | Perlu disiplin supaya tidak membuat abstraction kecil terlalu banyak. |
| TypeScript strict | Data Hygraph dan Ghost cukup besar dan nullable. Type ketat membantu menemukan error sebelum build. | Butuh waktu ekstra mendefinisikan kontrak data. |
| Tailwind CSS v4 | CSS-first, cepat untuk eksplorasi layout, dan design token tetap terpusat di globals.css. | Class bisa panjang, jadi formatter dan component boundary wajib disiplin. |
| Hygraph | Cocok untuk project terstruktur: status, tahun, role, tech stack, highlights, gallery, dan rich text. | Request quota harus dijaga dengan field selection, ISR, dan cache tags. |
| Ghost | Lexical editor nyaman untuk artikel panjang, cards, gallery, bookmark, callout, dan code block. | Karena headless, rendering public dan SEO tetap harus diatur di Next.js. |
| Giscus | Comment system berbasis GitHub Discussions tanpa membuat backend komentar sendiri. | Comment repo harus publik dan pembaca perlu login GitHub. |
Dari Pages Router ke App Router
Codebase lama memakai pola Next.js JavaScript yang sudah berjalan bertahun-tahun. Di rewrite ini, route dipindahkan ke App Router. Page tetap server-first, sedangkan container client hanya dibuat ketika memang membutuhkan interaksi, misalnya mobile menu, language toggle, copy code, Ghost toggle card, atau Giscus.
Static content seperti navigation, social links, labels, dan tech stack dipindahkan ke constants. Data access dipisah ke service layer. Jadi komponen UI tidak perlu tahu bagaimana Hygraph atau Ghost bekerja.
const project = await getProjectBySlug('delta-connect');
if (!project) {
notFound();
}Server-first dengan ISR
Portfolio dan artikel tidak berubah setiap detik. Menggunakan cache: 'no-store' di semua tempat hanya akan membuang request dan kuota. Aku memilih ISR satu jam dengan cache tag collection dan entry.
Ketika project di Hygraph dipublish, webhook memanggil endpoint revalidate. Next.js lalu meng-invalidate project dan project:delta-connect. Ghost melakukan hal serupa untuk tag post dan slug artikel.
Ghost Lexical cards dan formatting
Konten Ghost bukan hanya paragraf. Editor bisa menghasilkan image card, gallery, callout, bookmark, toggle, button, audio, video, dan code block. HTML dari Ghost disanitasi dengan allowlist yang tetap mempertahankan class kg-*, tetapi memblokir script dan form dari content body.
CSS cards.min.css dan JavaScript resmi Ghost hanya dimuat pada halaman detail artikel. Code block juga diberi wrapper terminal, label bahasa, tombol copy, dan jarak yang lebih lega. Jadi tidak lagi terlihat seperti pre tag hitam yang nyasar 😅
Prompt pertama yang kupakai
Prompt pertama sebenarnya cukup panjang dan sangat jelas mengarahkan AI. Aku minta Claude Code membaca dua codebase, menjaga visual lama, membuat memory dan brief, lalu menjalankan proses explore, plan, dan eksekusi multi-agent.
/frontend-design
Hiluwww, kamu adalah front end developer profesional dengan stack nextjs+tailwindcss...
Kamu aku suruh untuk rewrite website portofolioku yang ku bangun pada tahun 2022 menggunakan nextjs javascript. ada di ../portfolio
Aku mau kamu pake template nextjs ku dengan style coding ku, template nya ada di ../next-template
Pastikan kamu tetap mengikuti taste, soul, dan design system ku dari 2022 ituu. Kalo ada yang tidak best practice gpp diubah menjadi paling optimal dan bagus.
Pastikan kamu menyimpan memory dan membuat brief dll agar design yang dihasilkan oleh agent sesuai dengan feel design lama kuu...
Pastikan kamu explore dulu, pahami, plan, dan eksekusi dengan multi agents agar context window tidak cepat penuh.Hasil pertama ternyata jelek dan belum sesuai. Konteks yang terpisah membuat beberapa keputusan visual tidak nyambung. Hasil yang lebih bagus baru muncul setelah kira-kira 10 sampai 15 prompt tambahan. Di situ aku belajar bahwa AI tetap membutuhkan feedback visual dan constraint yang diulang, bukan hanya satu brief besar 😅
Cara Claude Code kupakai dalam rewrite
Claude Code bukan tombol ajaib yang ditekan lalu website selesai. Ia lebih mirip teman pair-programming yang bisa membaca banyak file, memetakan dependency, mencari bug, membuat draft implementasi, dan menjalankan verifikasi. Keputusan final tetap ada di aku.
- Explore: membaca portfolio lama, template baru, design brief, bio context, dan asset.
- Map: memisahkan pekerjaan yang bisa berjalan paralel: UI, CMS, SEO, route migration, dan data model.
- Implement: mengubah satu layer pada satu waktu, bukan menaruh semua logic di page.
- Review: memeriksa visual, responsive behavior, type, security, dan apakah hasilnya masih terasa seperti website yang sama.
- Verify: menjalankan lint, format, type checking, production build, dan route check dengan CMS.
AI bisa mengusulkan sepuluh variasi card, tetapi belum tentu tahu mana yang terasa terlalu generik atau terlalu “AI slop”. Jadi kalau spacing-nya aneh, ya tetap harus dikasih tahu: “bukan begitu maksudku” wkwkwk 🤔
Apa saja yang berubah?
- Portfolio menjadi projects: route lama tetap diarahkan dengan redirect permanen.
- Project detail lebih informatif: ada tahun, status, role, tech stack, highlights, gallery, dan detail WYSIWYG.
- Blog menjadi headless: Ghost berfungsi sebagai editor, sementara pembaca tetap di domain utama.
- Dua bahasa: artikel Indonesia dan English terhubung melalui toggle dan hreflang.
- SEO lebih serius: canonical, Open Graph, Twitter card, sitemap timestamp CMS, breadcrumbs, dan JSON-LD.
- Comments: Giscus memakai repository publik khusus
yukebrillianth/blog, sehingga repo portfolio utama bisa private.
Rewrite yang baik bukan menghapus masa lalu. Ia membawa bagian yang masih berarti ke fondasi yang lebih sehat.
Setelah rewrite
Sekarang website ini bukan lagi sekadar daftar project. Ia menjadi dokumentasi perjalanan: dari Figma kelas 10, slicing Next.js saat SMA, project pelarian di masa sulit, update blog pada 2024, sampai rewrite besar setelah semester 5 dan PKP2.
Mungkin nanti akan ada rewrite berikutnya. Mungkin stack-nya berubah lagi. Tapi kali ini aku punya fondasi, dokumentasi, dan workflow yang lebih jelas untuk melanjutkannya tanpa menunggu empat tahun lagi.
Dan kalau suatu hari kamu membuka source code-nya lalu menemukan satu komponen yang agak aneh, anggap saja itu bagian dari sejarah. Semua personal codebase punya satu-dua hantu kecil 😹