Website company profile dan katalog produk bilingual untuk grosir pakaian anak tangan pertama di Tanah Abang dirancang khusus bagi reseller, dilengkapi scroll-driven storytelling serta optimasi SEO lokal.
WONKA Kids adalah website pemasaran dan katalog produk bilingual (Indonesia/Inggris) untuk produsen pakaian anak tangan pertama yang telah beroperasi di Tanah Abang, Jakarta, sejak 2006. Website ini memperkuat citra bisnis grosir keluarga bagi reseller dan pemilik toko melalui cerita brand, katalog produk, serta penjelasan menyeluruh mengenai proses produksi internal.
Sistem bahasa sepenuhnya berjalan di sisi klien menggunakan localStorage, tanpa memisahkan halaman ke rute /en dan /id. Dengan pendekatan ini, setiap halaman tetap memiliki satu URL kanonis untuk SEO, sementara pengunjung dapat berpindah bahasa secara instan. Seluruh konten disimpan dalam kamus bertipe aman dengan kesetaraan key yang divalidasi antarlokal, sehingga tidak ada teks yang di-hardcode dan kedua versi bahasa selalu konsisten.
Website ini mengusung konsep scroll-driven storytelling seperti website studio kelas atas. Lenis smooth scrolling dipadukan dengan GSAP ScrollTrigger untuk menghadirkan animasi reveal, efek parallax, intro animasi, serta bagian scrollytelling yang diposisikan tetap saat pengguna menggulir halaman. Bagian tersebut menjelaskan delapan tahap produksi, mulai dari nesting pola, DTF printing, penjahitan, quality control, hingga pengemasan. Seluruh animasi juga menyesuaikan preferensi prefers-reduced-motion demi aksesibilitas.
SEO menjadi salah satu fokus utama karena tingginya persaingan pada kata kunci “grosir baju anak Tanah Abang”. Optimasi mencakup metadata khusus pada setiap halaman, structured data LocalBusiness berbasis JSON-LD untuk dua lokasi fisik, sitemap, robots, serta penempatan kata kunci secara natural pada konten yang terlihat. Strategi ini dirancang untuk menjangkau pasar lokal Indonesia sekaligus pembeli grosir internasional.
Performa website turut dioptimalkan secara menyeluruh melalui static site generation, pemuatan GSAP dan Lenis secara lazy load agar tidak membebani bundle utama, konversi gambar ke format WebP, serta optimasi tampilan hero untuk perangkat mobile. Hasilnya, total ukuran aset publik berhasil dikurangi dari sekitar 58 MB menjadi 14 MB.
Peran: Sole Developer — menangani arsitektur, sistem konten bilingual, animasi, SEO, dan optimasi performa.
Yang dikerjakan
Built a route-free bilingual i18n system with localStorage and type-safe dictionaries — single canonical URL per page (SEO-friendly) with instant ID/EN switching and enforced key parity across locales.
Implemented scroll-driven motion with Lenis + GSAP ScrollTrigger: animated intro, reveal/parallax effects, and a pinned scrollytelling section stepping through an 8-stage production flow — all gated behind prefers-reduced-motion. Engineered local SEO for a competitive wholesale market: per-page metadata, a LocalBusiness JSON-LD graph with two physical locations, sitemap/robots, and keywords woven into visible copy for both local and global reach.
Optimized performance for a media-heavy site — static SSG, lazy-loaded animation libraries, WebP image compression, and LCP tuning — cutting the public asset footprint from ~58MB to ~14MB.
Designed a fully content-managed copy layer so all text and non-text config (links, WhatsApp, assets, routes) is centralized — zero hardcoded strings.
Delivered a mobile-first responsive design with a warm brand system, custom fonts, and a floating navigation pattern.
Tampilan aplikasi
4 tampilan
01Landing page — produsen pakaian anak dengan pemesanan grosir via WhatsApp
02Halaman Tentang Kami — profil dan kapasitas produksi
03Fasilitas produksi — lini jahit dan quality control
04Fasilitas pabrik — area produksi dan pergudangan
