Faith Dev Lab adalah software house berbasis web yang menawarkan pengembangan aplikasi web, desain UI/UX, solusi AI, dan website perusahaan yang mudah ditemukan di pencarian dalam satu identitas. Tagline-nya, "We feel, we form, we fulfill, so you flourish", merangkum janji untuk memadukan desain yang kuat dengan software yang benar-benar bekerja dengan baik. Situs ini, lengkap dengan mode gelap dan terang, tujuh tahap proses kerja, dan portofolio proyek nyata, dibangun untuk menunjukkan janji itu secara langsung.
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 software house
Sebelum
Kemampuan dan hasil kerja nyatanya sebenarnya sudah ada, tetapi tanpa tempat khusus, semuanya selalu terlihat sebagai portofolio pribadi satu orang, bukan software house 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 software house 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.
Teks Sekunder yang Terlalu Pudar di Mode Terang
Teks abu-abu yang dibuat dengan menurunkan opacity di bawah 60% terlihat baik di latar gelap, tetapi terlalu pudar di mode terang. Token subtle dan faint khusus, yang diatur terpisah per mode agar kontrasnya minimal 4.5:1, menggantikan cara opacity tersebut.
Tekstur Tanpa Mengorbankan Performa
Menambahkan noise di setiap section akan menumpuk lapisan berat di setiap scroll. Satu lapisan grain tetap dari tile SVG 300px yang di-cache memberi tekstur ke seluruh situs hanya dengan satu lapisan.
Section yang Mendarat di Bawah Navbar
Tautan anchor menggulir setiap section ke paling atas layar, sehingga tertutup navbar yang tetap di atas. Kini navbar mencatat tingginya sendiri sebagai variabel CSS, dan smooth scroll mengimbangi setiap lompatan dengan nilai itu.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Tanpa regresi styling dari migrasi v4
Header diperketat di setiap respons
PageSpeed hijau di keempat kategori
Gambar di bawah 200KB
Satu lapisan tekstur untuk seluruh situs
Scroll halus tanpa membebani main thread
Stack terbaru, tanpa risiko untuk klien
Dua tema dari satu set token
Tanpa kerentanan yang diketahui di production
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.
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
Secara bawaan, deployment Next.js tidak mengirim header keamanan apa pun dan mengumumkan framework yang dipakainya, sehingga situs lebih mudah disematkan di situs lain, dikenali, dan disalahgunakan.
Sesudah
Header global kini mencakup content sniffing, framing, data referrer, izin perangkat, dan HSTS dua tahun, header framework disembunyikan, dan setiap tautan eksternal dibuka dengan noopener dan noreferrer.
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
Tekstur grain yang ditambahkan per section dan watermark logo dari file gambar akan melipatgandakan lapisan dan request di halaman.
Sesudah
Satu lapisan grain tetap dari tile SVG 300px yang di-cache menutupi seluruh situs, dan monogram logo digambar dengan CSS mask sekitar 5KB setelah gzip, tanpa JavaScript tambahan.
Sebelum
Listener scroll dan animasi yang terus berjalan bisa menghambat scroll dan membuat main thread tetap sibuk lama setelah tidak dibutuhkan lagi.
Sesudah
Listener scroll dibuat pasif, smooth scroll berjalan di requestAnimationFrame, animasi section hanya diputar sekali saat pertama terlihat, dan gerakan berkelanjutan menghormati pengaturan reduced motion.
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.
Sebelum
Komponen yang memakai warna putih, hitam, atau hex tetap harus ditulis ulang satu per satu untuk mendukung mode terang, lalu kontrasnya dicek ulang secara manual.
Sesudah
Lima token warna menggerakkan kedua tema, komponen hanya memakai token itu, dan token teks sekunder menjaga kontras minimal 4.5:1 di setiap mode.
Sebelum
Setiap package tambahan menambah beban dan satu tempat lagi bagi kerentanan untuk muncul, dan audit yang ikut menghitung tool pengembangan mengaburkan apa yang benar-benar sampai ke pengunjung.
Sesudah
Dependency production dijaga seminimal mungkin dan diperiksa dengan audit khusus production sebelum setiap rilis, yang saat ini tidak menemukan masalah apa pun.
