Faith Dev Lab adalah brand agensi web pribadi yang menaungi jasa web development, desain UI/UX, dan SEO dalam satu identitas. Brand ini berpegang pada tagline "We feel, we form, we fulfill, so you flourish", yang merangkum janji untuk memadukan desain yang kuat dengan performa yang benar-benar berfungsi. Karena belum punya pekerjaan klien untuk ditunjukkan, situs ini sengaja dibangun sekaligus sebagai bukti nyata dari apa yang bisa dihasilkan agensinya.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 4 area: Kehadiran, Kualitas, Kepercayaan dan Konversi. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Satu identitas, diposisikan sebagai agensi
Sebelum
Kemampuan dan hasil kerja nyatanya sebenarnya sudah ada, tetapi tanpa tempat khusus, semuanya selalu terlihat sebagai portofolio pribadi satu orang, bukan agensi yang bisa diajak bekerja sama secara resmi oleh bisnis.
Sesudah
Situs khusus ini menampilkan kemampuan yang sama di bawah satu identitas yang fokus, dan diposisikan untuk bisnis yang mencari agensi untuk diajak bekerja sama, bukan sekadar melihat-lihat portofolio pribadi.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Membangun di Atas Stack yang Baru Saja Rilis
Next.js 16, React 19, dan Tailwind CSS v4 semuanya baru saja dirilis, jadi contoh dan solusi dari komunitas jauh lebih sedikit dibanding versi yang lebih mapan. Masalah ini diatasi dengan langsung merujuk dokumentasi resmi dan dibantu AI coding assistant.
Mencapai Skor Google PageSpeed Sempurna
Mendapatkan skor hijau di keempat kategori PageSpeed membutuhkan optimasi pemuatan gambar, JS, dan CSS yang cermat di berbagai ukuran perangkat.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Tanpa regresi styling dari migrasi v4
PageSpeed hijau di keempat kategori
Gambar di bawah 200KB
Stack terbaru, tanpa risiko untuk klien
Sebelum
Tailwind CSS v4 membawa breaking changes dari v3 pada cara kerja utility class dan konfigurasi. Karena framework-nya baru dirilis beberapa hari sebelumnya, satu perubahan yang terlewat bisa diam-diam merusak styling di seluruh situs single-page ini.
Sesudah
Setiap breaking change diselesaikan langsung berdasarkan dokumentasi migrasi resmi v4 sebelum situsnya rilis, sehingga situs diluncurkan di versi major terbaru dengan styling yang tetap utuh.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan untuk pemuatan gambar, JS, dan CSS membuat keempat kategori jadi hijau semua.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Next.js 16 dan React 19 sama-sama baru dirilis, sehingga solusi dan contoh dari komunitas jauh lebih sedikit dibanding versi yang lebih mapan.
Sesudah
Merujuk langsung ke dokumentasi resmi dan dibantu asisten coding AI menutup kekurangan itu, dan pengalaman ini membuat upgrade versi major yang sama di pekerjaan klien nanti jauh lebih aman.
