Intoduction

Selamat datang, reviewer. Jika Anda membaca hingga halaman ini, Anda akan melihat hasil kerja yang telah saya buat. Apa yang akan Anda baca adalah kisah di balik proses pembuatan portofolio saya.

Bagi saya, portofolio ini bukan sekadar ajang pamer proyek (showcase), melainkan sebuah jurnal perjalanan. Setiap baris kode yang saya tulis adalah jejak dari proses belajar dan pengalaman saya dalam pemecahan masalah dan pengambilan keputusan. Ini adalah bukti kesiapan saya untuk melangkah ke tantangan yang lebih besar, dan refleksi keputusan yang saya ambil sepanjang perjalanan ini."Melalui kisah ini, saya ingin menunjukkan bahwa hasil yang saya bangun bukan sekadar tampilan visual, melainkan sebuah perjalanan proses belajar, eksplorasi teknologi baru, dan penyelesaian tantangan teknis, yang semuanya saya tempuh dengan tujuan untuk siap menghadapi tantangan berikutnya". Penyelesaian proyek ini membuat saya yakin untuk melangkah ke tingkat berikutnya.

Case Study

Sejalan dengan tujuan portofolio sebagai jurnal perjalanan, case study ini menjadi wadah untuk eksperimen pribadi. Saya berupaya menampilkan diri sebagai pengembang yang peduli pada detail, performa, dan pengalaman pengguna (UX).

"Pemilihan stack Next.js dan TypeScript adalah keputusan yang beralasan. Next.js memberikan fondasi untuk membangun aplikasi web yang cepat dan scalable. Fitur-fitur unggulan Next.js yang saya manfaatkan mencakup pemisahan client-side rendering dan server-side rendering, kemudahan dalam optimasi SEO, pembuatan API dan Server Actions, serta yang paling saya sukai optimasi gambar yang sangat powerful. Sementara itu, TypeScript berperan penting dalam menjaga kualitas kode dan meminimalkan potensi error".

Kombinasi teknologi ini memungkinkan saya berfokus pada pengembangan fitur kompleks dengan kinerja yang optimal. Melalui case study ini, saya ingin memperkenalkan diri, menyajikan karya yang telah saya selesaikan, sekaligus mendokumentasikan proses perjalanan saya. Ini lebih dari sekadar proyek ini adalah cerminan dari etos kerja dan inovasi saya.

Engineering Challenge

Selama membangun portofolio ini, saya menghadapi tantangan di bidang SEO dan animasi. Untuk SEO, saya akhirnya saya mempelajari tentang OpenGraph, metadata, struktur head, dan indexing. Meskipun SEO adalah area baru bagi saya, proses pembelajaran ini justru menjadi value terbesar, menambah pengetahuan dan wawasan teknis, sekaligus melengkapi skill set pengembangan saya.

Pada sisi animasi, saya mempertimbangkan untuk menggunakan library populer seperti GSAP atau Swiper. Keduanya memiliki keunggulan, GSAP memiliki keunggulan animasinya yang smooth, fleksibel, dan mendukung animation scroll. Sementara itu, Swiper memudahkan pengembang dalam membuat slider dengan berbagai efek.

Namun, karena tidak semua fitur dari library tersebut saya gunakan, nantinya akan terjadi pemborosan sumber daya. Fitur-fitur yang tidak terpakai secara efisien ini akan menjadi bundling yang memberatkan kode saya. Hal ini pada akhirnya mengakibatkan file size hasil build terlalu besar dan nantinya akan memengaruhi performa.

"Oleh karena itu, demi menjaga performa, saya memutuskan untuk mengembangkan animasi secara mandiri. Tentu saja, pengembangan mandiri memerlukan kompromi dengan beberapa efek canggih yang harus saya relakan. Maka dari itu, mengembangkan animasi secara mandiri, menurut saya, adalah pilihan yang paling tepat, sebab saya benar-benar hanya menggunakan animasi yang memang saya perlukan".

Dalam proses ini, saya berusaha menyeimbangkan antara performa, fungsionalitas, dan estetika, serta menunjukkan bahwa detail kecil seperti ini cukup krusial saat membangun proyek nyata.

Architecture & Technical

# Rendering

Dalam membangun portofolio ini," saya memisahkan antara Server Component dan Client Component. Pemisahan ini bertujuan untuk meningkatkan performa. karena Next.js dapat membedakan komponen mana yang harus di-render di sisi client dan komponen mana yang dapat di-render di sisi server. Dengan kata lain, pemisahan ini memberikan prioritas rendering pada masing-masing komponen. Pemisahan ini juga membantu menjaga keteraturan kode, memudahkan pemeliharaan, serta meningkatkan reusability dari komponen tersebut. ".

# HTTP Request

Untuk pengelolaan HTTP request," saya menggunakan Axios dan membuat interceptor. Interceptor memungkinkan saya membuat request menjadi lebih bersih, reusable, dan mudah dikelola. Jika terjadi perubahan pada pola request, misalnya domain atau header, perubahan cukup dilakukan pada interceptor tanpa perlu memodifikasi seluruh kode yang melakukan request ".

# Image Optimization

Seperti yang telah disebutkan sebelumnya, fitur optimasi gambar di Next.js adalah Next/Image. Secara teknis," saya memanfaatkan fitur bawaan Next.js, didukung dengan format .webp yang lebih ramah terhadap aplikasi web-based. Secara default, Next/Image telah menerapkan lazy loading untuk eager loading, saya cukup menambahkan atribut priority pada komponen <Image priority {...atribute} />, dan memastikan ukuran gambar sesuai dengan perangkat pengguna (responsive sizes). Setiap gambar juga dikompresi untuk menjaga performa tanpa mengurangi kualitas visual ".

Struktur folder juga telah dirancang untuk mendukung arsitektur tersebut. Dengan begitu, proyek tetap terorganisir dan memiliki skalabilitas seiring dengan penambahan fitur baru.

Performance

Fokus utama dalam pembangunan portofolio ini adalah performa."Setiap aspek diuji menggunakan Lighthouse, mencakup SEO, Performance, Best Practices, dan Accessibility. Hasilnya memuaskan semua skor berada di atas 90% pada perangkat mobile maupun desktop, bahkan hampir sempurna. Setelah total pengujian sebanyak 10 kali, rata-rata skor yang diperoleh adalah 98.8%"

Angka tersebut membuktikan bahwa setiap keputusan teknis dan upaya optimasi yang dilakukan memberikan dampak nyata. Melalui langkah-langkah arsitektural dan teknikal yang telah dipaparkan, portofolio ini berhasil tidak hanya cepat dan user-friendly, tetapi juga memenuhi standar terbaik dalam pengujian Lighthouse.

closing

Setelah meninjau seluruh portofolio dan cerita di baliknya, saya berharap Anda mendapatkan gambaran yang jelas terkait hasil kerja dan pengambilan keputusan teknis yang saya lakukan.

Portofolio ini merepresentasikan performa dan kesabaran. Setiap tantangan, mulai dari memilih stack, mengoptimasi animasi native hingga SEO telah menjadi peluang untuk memperluas skill set saya.

Saya sangat antusias untuk membawa inovasi dan ketelitian ini ke tantangan berikutnya. Saya sangat terbuka untuk berdiskusi lebih lanjut mengenai peluang baru atau bagaimana keahlian saya dapat berkontribusi pada tim Anda.

What Next?