Perjalanan Website Portofolio.

Setiap developer kayaknya punya satu project yang nggak pernah benar-benar selesai: website portofolionya sendiri. Punyaku juga begitu. Sejak 2021, website ini sudah ganti “baju” beberapa kali — ganti tools, ganti framework, ganti konsep.

Kalau dipikir-pikir, tiap versi sebenarnya merekam aku lagi belajar apa di tahun itu. Jadi daripada dilupakan, aku tulis saja perjalanannya di sini.

2021 — WordPress + Elementor

Versi pertama dibuat dengan WordPress dan page builder Elementor. Waktu itu tujuannya sederhana: punya halaman yang bisa ditunjukkan ke orang, secepat mungkin.

Elementor memang enak untuk itu:

• Drag and drop. Susun section, geser elemen, atur warna — hasilnya langsung kelihatan.
• Nggak perlu nulis kode untuk sekadar punya halaman yang rapi.

Tapi justru di situ masalahnya. Aku bisa pakai, tapi nggak benar-benar paham apa yang terjadi di balik layar. Setiap mau mengubah sesuatu yang agak spesifik, aku terbentur batas page builder. Dari sini muncul keinginan untuk bikin sendiri dari kode.

2023 — Web Profile dengan Next.js

Versi kedua aku tulis ulang dari nol pakai Next.js , React , dan Tailwind CSS. Ini sekaligus jadi tempat latihan: portofolio adalah project yang paling “mewakili diri sendiri”, jadi pas banget untuk mengasah skill frontend.

Yang aku kejar di versi ini:

• Satu tempat untuk menampilkan project, skill, dan pengalaman — daripada link tersebar di mana-mana.
• Komponen yang bisa dipakai ulang, supaya section project dan skill gampang di-update.
• Cepat, responsif, dan ramah SEO.

Versi ini dulu sempat hidup di v1.fanny.dev, tapi sekarang sudah tidak aktif — kodenya masih ada di GitHub. Detailnya ada di halaman Fanny Web Profile .

Kekurangannya baru terasa belakangan: ini profile, bukan tempat menulis. Setiap mau menambah konten, aku harus menyentuh kode.

2025 — Pindah ke Hugo

Di 2025 aku mulai ingin menulis — catatan teknis, artikel, jurnal. Untuk itu, konten harus bisa ditulis sebagai file Markdown biasa, bukan komponen React.

Jadi pada September 2025 aku mulai lagi dari nol dengan Hugo + Tailwind CSS. Commit pertamanya berjudul “create new personal web project”, dan isinya sudah langsung banyak:

• Section articles, notes, journals, dan projects.
• Halaman about, career, now, guestbook, colophon, dan privacy.
• Kumpulan shortcode buatan sendiri (callout, experience, certification, dan lain-lain).
• Komentar lewat Giscus.

Beberapa minggu kemudian menyusul dark mode. Dari sini website ini berubah fungsi: bukan lagi sekadar kartu nama, tapi rumah untuk tulisan.

2026 — Web Resume, Terpisah

Di 2026 aku butuh CV yang lebih enak dibagikan daripada file PDF. PDF itu bagus untuk dicetak, tapi susah responsif dan susah dibagikan sebagai link.

Hasilnya Website Resume : resume satu halaman berbasis HTML + Tailwind CSS, di-hosting statis di resume.fanny.dev (sekarang sudah tidak aktif).

Masalah barunya: sekarang aku punya dua website yang harus dirawat. Isi resume dan isi halaman career di situs utama bisa saling beda kalau aku lupa update salah satunya.

Sekarang — Semua Jadi Satu

Pertengahan September 2026 aku melakukan overhaul besar. Desainnya terinspirasi dari taniarascia.com : hangat, fokus ke tulisan, dua kolom dengan sidebar.

Yang berubah:

• Theme ditulis tangan, tanpa theme Hugo pihak ketiga. Layout, sidebar, dan semua komponen aku bikin sendiri.
• Tailwind CSS v4 dengan design token sendiri — warna cream, ink untuk dark mode, dan aksen oker.
• Struktur konten dirapikan. Notes berubah jadi Shelves (seperti rak buku bertema, termasuk rak yang sedang kamu baca ini), dan section demo frontend digabung ke Projects.
• Resume dilebur ke situs utama di /resume/ , lengkap dengan versi designed dan versi ATS, plus bisa di-print ke PDF. Subdomain resume.fanny.dev pun akhirnya dimatikan.

Akhirnya satu sumber, satu website. Ringkasan teknisnya ada di Hugo Portfolio & Blog .

Hampir Pindah ke Astro

Sebelum redesign itu, aku sempat serius mempertimbangkan pindah ke Astro. Bahkan sudah jadi prototipenya: Astro Portfolio .

Konsepnya cukup beda dari biasanya:

• Satu layar, tanpa scroll. Konten dipecah ke panel-panel kaca yang bisa diganti.
• UI “Liquid Glass” ala Apple, dengan video latar yang berganti antara siang (light mode) dan malam (dark mode).
• Bilingual Inggris / Indonesia dari satu sumber data.

Hasilnya menyenangkan untuk dibuat, dan banyak pelajaran soal detail interaksi. Tapi pada akhirnya aku tetap di Hugo. Konsep satu layar terasa lebih cocok sebagai kartu nama digital, sementara yang aku butuhkan sekarang adalah rumah untuk banyak tulisan — dan Hugo sudah menjalankan itu dengan baik.

Yang Aku Pelajari

• Tiap versi punya alasan. WordPress untuk cepat online, Next.js untuk belajar, Hugo untuk menulis. Nggak ada yang “salah”, kebutuhannya saja yang berubah.
• Satu sumber lebih baik dari dua. Memisahkan resume terdengar rapi, tapi merawat dua website itu melelahkan.
• Bikin sendiri = paham sendiri. Menulis theme dari nol memaksa aku mengerti setiap bagian layout, bukan cuma mengatur opsi.
• Prototipe bukan kegagalan. Versi Astro nggak dipakai, tapi idenya tetap jadi bahan belajar.

Dan seperti biasa: website ini mungkin belum versi terakhirnya.