Website Portfolio Personal

Latar Belakang

Proyek ini lahir dari kesadaran bahwa selama bertahun-tahun saya telah menghabiskan banyak waktu mengembangkan berbagai produk digital bagi perusahaan, tetapi belum pernah benar-benar membangun rumah digital untuk diri saya sendiri — sebuah website portfolio personal.

Keinginan saya untuk membuat portofolio sebenarnya sudah muncul sejak lama, namun setiap kali ingin memulainya selalu ada saja alasan untuk menunda. Entah karena lelah setelah bekerja, atau jujur saja karena sedang malas. Namun masalah utamanya bukan itu, musuh terbesar justru datang dari diri saya sendiri, yaitu sifat perfeksionis yang membuat semuanya harus sempurna sehingga proyek ini tidak pernah benar-benar selesai.

Sampai akhirnya saya terdampak layoff dan kehilangan akses terhadap berbagai hasil pekerjaan yang pernah saya buat di perusahaan karena seluruh data tersimpan di sistem internal. Hal ini membuat saya semakin kesulitan membangun portofolio karena tidak lagi memiliki akses terhadap karya maupun dokumentasi pengalaman yang sebelumnya saya kerjakan, sekaligus menurunkan rasa percaya diri dalam melamar pekerjaan karena tidak memiliki representasi yang dapat ditampilkan.

Dari situ saya menyadari pentingnya memiliki personal portofolio untuk mendokumentasikan perjalanan profesional secara lebih utuh, tidak hanya terbatas pada karya, tetapi juga pengalaman, proses belajar, serta hal-hal lain yang membentuk perjalanan saya sebagai seorang UX Engineer. Berdasarkan kesadaran tersebut, saya mulai kembali membangun portofolio ini secara bertahap dengan memanfaatkan materi yang masih dapat saya kumpulkan, dengan tetap menghormati Non-Disclosure Agreement (NDA) serta kerahasiaan perusahaan. Selain sebagai media dokumentasi, portofolio ini juga dirancang sebagai ruang yang lebih interaktif dan eksploratif, sehingga pengunjung dapat merasakan pengalaman yang lebih dari sekadar melihat kumpulan karya, serta memungkinkan adanya interaksi, masukan, dan koneksi secara lebih terbuka di masa mendatang.

Identifikasi Masalah

Berdasarkan latar belakang tersebut, beberapa permasalahan utama yang berhasil diidentifikasi adalah sebagai berikut:

• Belum adanya portfolio personal yang mendokumentasikan karya, pengalaman, serta perjalanan profesional secara menyeluruh.
• Terbatasnya akses terhadap hasil pekerjaan dan dokumentasi pengalaman kerja karena seluruh data tersimpan di sistem internal perusahaan.
• Kurangnya representasi yang dapat menunjukkan kemampuan secara utuh, baik dari sisi karya, proses, maupun pengalaman.
• Kecenderungan menunda dalam memulai pembuatan portofolio akibat kesibukan, rasa malas, serta sifat perfeksionis.
• Kebutuhan akan portofolio yang tidak hanya berfungsi sebagai media dokumentasi, tetapi juga sebagai ruang yang dapat menampilkan pengalaman secara lebih luas, interaktif, dan eksploratif.

Tujuan & Sasaran

Tujuan utama dari proyek ini adalah membangun sebuah portofolio personal yang dapat digunakan untuk mendokumentasikan karya, pengalaman, serta perjalanan profesional saya, sekaligus menjadi representasi yang dapat ditampilkan secara lebih terbuka.

Untuk mencapai tujuan tersebut, ditetapkan beberapa sasaran utama sebagai berikut:

• Mengumpulkan kembali karya dan materi yang masih dapat diakses tanpa melanggar NDA serta kerahasiaan perusahaan.
• Menyusun portofolio yang tidak hanya berisi karya, tetapi juga pengalaman dan konteks di baliknya secara terstruktur dan mudah dipahami.
• Menyediakan media untuk merepresentasikan kemampuan sebagai UX Engineer melalui kombinasi karya, proses, dan pengalaman.
• Membangun portofolio secara bertahap meskipun dengan keterbatasan akses terhadap hasil pekerjaan sebelumnya.
• Mengembangkan portofolio sebagai ruang yang tidak hanya dokumentatif, tetapi juga interaktif, eksploratif, dan berkelanjutan.

Peran & Tanggung Jawab

Dalam proyek ini, saya berperan sebagai satu-satunya pihak yang bertanggung jawab atas seluruh proses, mulai dari perencanaan, perancangan, pengumpulan materi, hingga implementasi portofolio secara bertahap.

Adapun tanggung jawab yang dilakukan meliputi:

• Menentukan arah dan konsep dasar portofolio sebagai wadah dokumentasi karya, pengalaman, dan perjalanan profesional.
• Mengidentifikasi serta mengumpulkan kembali materi karya dan dokumentasi yang masih dapat digunakan tanpa melanggar NDA dan kerahasiaan perusahaan.
• Menyusun struktur informasi agar portofolio mudah dipahami dan mampu merepresentasikan konteks di balik setiap karya maupun pengalaman.
• Merancang pengalaman pengguna yang interaktif dan eksploratif.
• Melakukan proses desain dan implementasi portofolio secara bertahap hingga versi pertama dapat digunakan.

Proses & Eksekusi

Proses pengembangan portofolio ini dilakukan secara bertahap, mulai dari pengumpulan kembali materi hingga implementasi versi pertama yang dapat digunakan. Fokus utama pada tahap ini adalah membangun fondasi portofolio yang dapat merepresentasikan karya, pengalaman, dan perjalanan profesional secara lebih terstruktur.

Pengembangan ini juga dibagi ke dalam beberapa tahap utama agar prosesnya lebih terarah, mulai dari persiapan, desain, hingga implementasi. Setiap tahap memiliki fokus dan tujuan yang berbeda namun saling berkaitan dalam membangun hasil akhir yang utuh.

1. Persiapan

Tahap ini berfokus pada pengumpulan kembali materi yang masih tersedia serta penentuan batasan penggunaan materi agar tetap sesuai dengan Non-Disclosure Agreement (NDA) dan kerahasiaan perusahaan.

Adapun proses yang dilakukan pada tahap ini meliputi:

• Mengumpulkan kembali karya dan materi yang masih dapat diakses dari pengalaman kerja sebelumnya.
• Menghubungi kolega untuk meminta materi yang aman untuk dipublikasikan seperti screenshot tampilan proyek yang pernah saya kerjakan atau materi pendukung lain yang tidak bersifat sensitif.

• Memastikan kelayakan konten yang akan dipublikasikan sesuai dengan ketentuan NDA dan kebijakan perusahaan.
• Menentukan arah dan tujuan awal portofolio sebagai media dokumentasi karya, pengalaman, serta perjalanan profesional.
• Mengidentifikasi kebutuhan utama yang ingin ditampilkan dalam portofolio, baik dari sisi konten maupun pengalaman pengguna.
• Menentukan ruang lingkup awal pengembangan agar proses pengerjaan lebih realistis dan dapat dilakukan secara bertahap.

2. Perancangan Produk & Sistem

Setelah proses pengumpulan materi dilakukan, tahap berikutnya berfokus pada proses perancangan keseluruhan produk, baik dari sisi pengalaman pengguna, struktur informasi, hingga arsitektur sistem yang akan digunakan selama pengembangan.

Proses perancangan dilakukan sebelum implementasi dimulai agar struktur aplikasi lebih terarah, scalable, dan mudah dikembangkan secara bertahap di masa mendatang. Pada tahap ini, perancangan tidak hanya difokuskan pada tampilan visual, tetapi juga mencakup struktur data, alur interaksi, serta pendekatan teknis yang digunakan dalam pengembangan aplikasi.

Beberapa proses yang dilakukan pada tahap ini meliputi:

• Menyusun struktur informasi (information architecture) agar konten dan halaman lebih terorganisir serta mudah dipahami.

• Menentukan struktur halaman, hirarki konten, serta pembagian fitur agar pengalaman navigasi dan eksplorasi aplikasi terasa lebih terorganisir dan intuitif.
• Merancang alur pengalaman pengguna (user flow) agar navigasi dan interaksi dapat berjalan lebih intuitif.
• Menentukan fitur-fitur utama yang dapat mendukung pengalaman penggunaan secara lebih interaktif, personal, dan berkelanjutan.
• Melakukan eksplorasi referensi desain, pola interaksi, dan pendekatan visual untuk membantu menentukan arah tampilan aplikasi.
• Melakukan eksplorasi desain, pola interaksi, dan pendekatan visual dari beberapa website yang saya jadikan referensi dan inspirasi, yang kemudian saya dokumentasikan melalui halaman Inspirasi Website.
• Merancang skema database dan relasi antar tabel untuk mendukung pengelolaan konten serta fitur interaktif, yang hasilnya dapat dilihat pada diagram struktur database dan relasi antar tabel.

• Menentukan arsitektur aplikasi dan pendekatan pengelolaan data agar sistem tetap terstruktur, scalable, dan mudah dikembangkan di masa mendatang.
• Menentukan teknologi dan tools yang digunakan berdasarkan kebutuhan pengembangan, maintainability, performa, dan fleksibilitas aplikasi.
• Merancang High-Level Architecture (HLA) untuk memetakan struktur aplikasi, alur data, serta integrasi layanan secara menyeluruh sebagai fondasi pengembangan aplikasi.

• Menentukan pendekatan pengembangan bertahap agar fitur dan halaman baru dapat dikembangkan secara berkelanjutan tanpa mengubah struktur utama aplikasi.

3. Implementasi & Pengembangan

Setelah proses perancangan selesai dilakukan, tahap berikutnya berfokus pada implementasi sistem dan pengembangan fitur secara bertahap hingga aplikasi dapat digunakan dengan baik.

Pada tahap ini, proses pengembangan dimulai dari pembangunan fondasi aplikasi, integrasi layanan utama, hingga implementasi berbagai fitur interaktif yang telah dirancang sebelumnya. Pengembangan dilakukan secara iteratif agar aplikasi dapat terus berkembang tanpa harus menunggu seluruh fitur selesai sekaligus.

Beberapa proses yang dilakukan pada tahap ini meliputi:

• Melakukan setup dan konfigurasi project menggunakan Next.js, TypeScript, dan Tailwind CSS sebagai fondasi utama pengembangan aplikasi.
• Mengimplementasikan struktur routing, layout, serta konfigurasi dasar aplikasi untuk mendukung pengembangan multi halaman.
• Mengintegrasikan Supabase sebagai backend service untuk kebutuhan database, autentikasi, dan pengelolaan data aplikasi.
• Mengembangkan sistem autentikasi menggunakan Google OAuth agar pengguna dapat login dan berinteraksi dalam aplikasi.
• Mengimplementasikan pengelolaan data dan server state menggunakan TanStack Query untuk membantu proses fetching, caching, dan sinkronisasi data.
• Mengembangkan berbagai halaman utama dan fitur secara bertahap sesuai dengan struktur dan kebutuhan aplikasi.
• Mengimplementasikan fitur interaktif seperti comments, reactions, roadmap, serta lounge sebagai ruang interaksi pengguna.
• Mengembangkan sistem multilingual (i18n) menggunakan next-intl agar aplikasi dapat mendukung lebih dari satu bahasa.
• Mengimplementasikan sistem theme switching dan dark or light mode untuk meningkatkan fleksibilitas pengalaman pengguna.
• Mengembangkan reusable components dan design system internal bernama Miracle untuk membantu menjaga konsistensi visual dan efisiensi proses pengembangan aplikasi.
• Mengimplementasikan animasi dan transisi antarmuka menggunakan Motion untuk menciptakan pengalaman penggunaan yang lebih dinamis.
• Melakukan optimasi responsive layout agar aplikasi dapat digunakan dengan baik di berbagai ukuran perangkat.
• Melakukan pengujian dan perbaikan bertahap terhadap tampilan, performa, dan stabilitas aplikasi selama proses pengembangan berlangsung.

Melalui pendekatan pengembangan bertahap ini, aplikasi dapat terus berkembang secara berkelanjutan sambil tetap menjaga struktur sistem dan pengalaman pengguna secara konsisten.

4. Evaluasi & Pengembangan Berkelanjutan

Setelah implementasi awal selesai dilakukan, proses pengembangan portofolio tidak berhenti pada tahap perilisan versi pertama saja. Aplikasi terus dievaluasi dan dikembangkan secara bertahap berdasarkan kebutuhan, eksplorasi fitur baru, serta pengalaman penggunaan selama proses pengembangan berlangsung.

Pendekatan ini dilakukan agar portofolio dapat terus berkembang secara berkelanjutan, baik dari sisi pengalaman pengguna, kualitas sistem, maupun fitur yang tersedia. Selain sebagai media dokumentasi dan representasi profesional, portofolio ini juga dikembangkan sebagai ruang eksplorasi yang memungkinkan adanya proses pembelajaran, eksperimen, serta pengembangan fitur secara terbuka seiring waktu.

Beberapa proses yang dilakukan pada tahap ini meliputi:

• Melakukan evaluasi terhadap struktur aplikasi, pengalaman pengguna, dan performa sistem secara berkala.
• Mengidentifikasi area yang masih dapat ditingkatkan dari sisi desain, interaksi, maupun teknis implementasi.
• Melakukan perbaikan bug dan penyempurnaan fitur secara bertahap selama proses pengembangan berlangsung.
• Menambahkan fitur dan halaman baru berdasarkan kebutuhan pengembangan aplikasi di masa mendatang.
• Memanfaatkan halaman roadmap sebagai media transparansi pengembangan sekaligus ruang untuk menerima ide, masukan, dan feedback yang dapat dipertimbangkan dalam proses evaluasi dan pengembangan aplikasi secara berkelanjutan.

• Menggunakan portofolio sebagai ruang eksplorasi untuk mencoba pendekatan, teknologi, dan pola interaksi baru secara berkelanjutan.

Melalui proses evaluasi dan pengembangan berkelanjutan ini, portofolio tidak hanya menjadi media dokumentasi karya, tetapi juga berkembang sebagai ruang eksplorasi, pembelajaran, dan representasi perjalanan profesional yang terus bertumbuh seiring waktu.

Hasil

Proyek ini berhasil menghasilkan sebuah website portofolio personal yang dibangun sebagai ruang untuk mendokumentasikan karya, pengalaman, proses belajar, serta perjalanan profesional saya secara lebih utuh dan terstruktur.

Berbeda dari portofolio pada umumnya yang hanya berfokus pada hasil akhir, portofolio ini dikembangkan dengan pendekatan yang lebih terbuka, interaktif, dan berkelanjutan, sehingga tidak hanya menjadi media representasi profesional, tetapi juga ruang yang dapat terus berkembang seiring perjalanan dan proses pengembangan yang dilakukan.

Adapun beberapa hasil pengembangan yang berhasil diimplementasikan dalam portofolio ini meliputi:

• Tersusunnya struktur portofolio yang mampu mendokumentasikan proyek, pengalaman, achievements, artikel, dan perjalanan profesional secara lebih terorganisir.
• Terimplementasinya berbagai halaman dan fitur utama yang mendukung pengalaman eksplorasi aplikasi secara lebih interaktif dan terstruktur.
• Terciptanya sistem articles sebagai media berbagi pengalaman, pembelajaran, dan eksplorasi selama proses pengembangan.
• Terbangunnya roadmap terbuka untuk menampilkan progres dan arah pengembangan aplikasi secara lebih transparan.
• Terimplementasinya lounge sebagai ruang interaksi dan komunikasi yang memungkinkan pengguna saling terhubung secara lebih terbuka.
• Terciptanya pengalaman interaksi pengguna melalui fitur comments, reactions, dan autentikasi pengguna menggunakan Google OAuth.
• Terimplementasinya dukungan multilingual (i18n) dan theme switching untuk meningkatkan fleksibilitas pengalaman penggunaan aplikasi.
• Tersedianya changelog sebagai media dokumentasi perkembangan aplikasi secara berkala.
• Terbangunnya halaman gear & setup untuk membagikan perangkat, tools, dan workflow yang digunakan selama proses kerja dan pengembangan.
• Terimplementasinya design system internal bernama Miracle yang dikembangkan secara mandiri sebagai fondasi reusable components dan konsistensi antarmuka aplikasi.
• Terbangunnya fondasi aplikasi yang lebih terstruktur melalui pendekatan modular, reusable components, serta arsitektur sistem yang mendukung pengembangan jangka panjang secara lebih scalable dan maintainable.

Melalui proyek ini, portofolio tidak lagi hanya berfungsi sebagai tempat menampilkan karya, tetapi juga berkembang menjadi ruang personal yang merepresentasikan cara berpikir, proses kerja, pendekatan pengembangan, serta perjalanan saya sebagai seorang UX Engineer.

Dampak

Melalui proses pengembangan portofolio ini, proyek tidak hanya menghasilkan sebuah media representasi profesional, tetapi juga memberikan dampak terhadap proses pembelajaran, pengembangan teknis, serta cara saya mendokumentasikan perjalanan profesional secara lebih terstruktur.

Beberapa dampak yang dirasakan melalui pengembangan proyek ini meliputi:

• Memiliki media representasi profesional yang dapat digunakan untuk mendokumentasikan karya, pengalaman, proses belajar, dan perjalanan karier secara lebih terbuka dan terstruktur.
• Meningkatkan rasa percaya diri dalam menampilkan hasil pekerjaan, kemampuan, serta pendekatan kerja kepada pihak eksternal, termasuk dalam proses rekrutmen.
• Membantu membangun kebiasaan mendokumentasikan proses pengembangan, pembelajaran, dan eksplorasi secara lebih konsisten.
• Menjadi ruang eksplorasi untuk mencoba berbagai pendekatan pengembangan, arsitektur aplikasi, dan pola interaksi secara lebih bebas dan berkelanjutan.
• Membuka peluang interaksi dan koneksi yang lebih luas melalui portofolio yang bersifat lebih terbuka, interaktif, dan komunikatif.
• Memberikan pengalaman dalam merancang dan membangun aplikasi secara end-to-end, mulai dari perancangan produk, struktur sistem, hingga implementasi aplikasi secara langsung.
• Meningkatkan pemahaman dalam membangun arsitektur aplikasi berbasis Next.js, termasuk pengelolaan routing, struktur halaman, dan organisasi aplikasi secara modular.
• Mengimplementasikan pendekatan component-based architecture serta reusable components untuk meningkatkan konsistensi antarmuka dan maintainability aplikasi.
• Memperdalam pemahaman dalam integrasi frontend dengan database dan backend service untuk mendukung pengelolaan konten serta fitur interaktif secara dinamis.
• Meningkatkan pemahaman dalam pengelolaan autentikasi pengguna, state management, internationalization (i18n), dan pengembangan fitur interaktif berbasis web modern.
• Menjadi fondasi pengembangan jangka panjang yang memungkinkan aplikasi terus berkembang seiring pengalaman, eksplorasi, dan kebutuhan pengembangan di masa mendatang.