Riyan Firmansyah

Memperbarui Wajah Website Personal Saya

Kebetulan malam dini hari di bulan Ramadhan ini saya punya waktu luang (alias lagi susah tidur) jadi saya coba untuk melakukan perubahan tampilan blog ini yang baru saja saya lakukan dan menulis sedikit mengenai hal itu. Sebenarnya saya sudah lama ingin melakukan perubahan tampilan blog ini, tapi baru sekarang bisa saya lakukan karena beberapa alasan, salah satunya adalah karena saya ingin mencari tema yang benar-benar cocok dengan selera saya dan juga sesuai dengan kebutuhan saya untuk menampilkan konten di blog ini.

Latar Belakang

Blog ini sebelumnya menggunakan tema mini, tema yang simpel dan minimalis dan sudah menemani saya selama beberapa waktu. Tema itu tidak ada masalah besar, tapi saya mulai merasa ingin tampilan yang jauh lebih simpel, lebih personal, dan yang paling penting mendukung dark mode secara proper.

Setelah jalan-jalan mencari referensi, saya menemukan blog milik rokcso.com yang tampilannya cocok dengan selera saya. Kebetulan dia juga membuat tema Hugo bernama hugo-bearneo dan mempublikasikannya secara open source. Jadilah saya migrasi ke tema itu.

Sedikit latar belakang tema ini: hugo-bearneo sendiri merupakan pengembangan dari Hugo Bear Blog. Karena penulis asli Hugo Bear Blog memilih untuk menjaga konsistensi dengan akar originalnya, rokcso memilih membuat versi terpisah yang lebih ekstensibel dan kaya fitur yang kemudian menjadi hugo-bearneo.

Apa Saja yang Berubah?

Halaman Beranda yang Lebih Terstruktur

Beranda sekarang punya tiga bagian:

Menurut saya lebih rapi dan lebih cocok untuk tampilan homepage yang lebih personal.

Gambar Native

Dulu saya pakai sintaks shortcode buatan sendiri render-image untuk menampilkan gambar. Sekarang sudah saya migrasikan menggunakan sintaks gambar bawaan Markdown saja, yang berarti tema ini cukup bagus untuk menangani gambar tanpa perlu konfigurasi tambahan.

Penambahan Pill Switcher

Ini fitur yang saya paling suka. Ide pill switcher ini saya dapat dari blog christopherhimes.com yang punya desain switcher yang elegan. Di pojok kanan atas navigasi ada tiga lingkaran kecil: gelap, terang, dan biru. Klik salah satunya untuk memilih skema warna.

Secara bawaan akan mengikuti preferensi dari sistem (dark/light mode di OS). Kalau kamu pilih salah satu secara manual, pilihannya disimpan dan dipakai lagi saat kamu kembali. Lalu jika coba klik lagi lingkaran yang sudah dipilih maka pilihan manual dihapus dan balik otomatis ke sistem.

Di tampilan mobile, pill-nya juga tampil dengan baik dimana akan terpisah di bawah menu navigasi supaya tidak sesak.

Berkaitan dengan Konten

Perubahan tampilan ini tidak mengubah arah konten blog. Saya tetap akan coba perlahan mulai konsisten menulis lagi hal-hal yang saya alami, pelajari, atau sekadar ingin bagikan mengenai kehidupan dan apapun yang sedang ada di kepala saya.

Kalau ada tampilan yang terasa aneh atau ada yang tidak berfungsi dengan baik di browser atau perangkat kamu, jangan ragu untuk kasih tahu. Terima kasih sudah mampir! 👋

#Pengalaman