Sudah dirilisPengembangan web2026

Situs Mining Hair

Desain dan pengembangan full-stack situs salon yang sudah beroperasi. Antarmuka berfokus fotografi memadukan tata letak responsif, galeri animasi, dan sistem konten yang dapat diedit berbasis Next.js.

Pekerjaan klien
Situs yang sudah beroperasi

Pengalaman produk

Kami merancang dan mengembangkan situs resmi Mining Hair yang kini beroperasi. Layar utama memakai foto lebar penuh, tipografi tegas, dan navigasi bersama. Next.js serta React menyusun halaman; Tailwind CSS menyediakan tata letak mengikuti viewport, elemen berlapis, dan teks yang menyesuaikan layar. Tangkapan bagian di bawah menunjukkan implementasi pengantar, galeri bergerak, arsip gambar, serta adegan ulasan interaktif.

Bagian Tentang: potret, tipografi berlapis, dan tata letak sticky — Tentang — Next.js Image menampilkan potret, sementara Tailwind CSS memadukan viewport sticky, teks berlapis, dan ukuran teks responsif. Gambar serta teks bergerak melewati bagian saat pengunjung menggulir.

Bagian Gallery Snippets dengan kartu foto bergerak horizontal — Gallery Snippets — GSAP menggerakkan jalur kartu duplikat dalam loop berkelanjutan dan menghitung ulang jarak saat tata letak berubah. Transisi CSS mengganti foto kartu saat hover atau fokus keyboard; memilih kartu membuka kategori galerinya.

Situs Mining Hair: kisi galeri dan navigasi kategori — Galeri — React mengelola pemilihan kategori dan memuat gambar per halaman berisi 12. Tailwind CSS menyusun kisi responsif, dan Next.js Image bekerja bersama placeholder pemuatan serta transisi hover.

Bagian ulasan Street Notes dengan panorama ilustrasi dan kontrol karakter — Street Notes — Viewport CSS sticky menjaga adegan ilustrasi tetap terlihat. Gambar latar berlapis dan tombol karakter membentuk antarmuka, dengan kontrol untuk mengganti jalan, bergerak dalam adegan, dan membuka ulasan.

Yang dapat Anda lakukan

Beranda dan Tentang: tipografi responsif, fotografi berlapis, dan tata letak bagian sticky.
Gallery Snippets: loop GSAP, transisi gambar, dan tautan ke tampilan galeri terfilter.
Galeri: filter kategori, pemuatan per halaman, dan kisi gambar responsif.
Street Notes: panorama ilustrasi dengan tombol karakter dan navigasi adegan.
Pengelolaan konten: edit teks langsung, unggah gambar, dan penyimpanan sisi server.

Cara kerja

Server menyiapkan konten inti untuk render halaman awal, lalu membagikannya ke status konten klien. Permintaan edit melewati API server, dan Prisma menyimpan konten bagian dalam PostgreSQL. Redis meng-cache hasil baca; menyimpan bagian membatalkan cache terkait agar pembacaan berikut memakai konten terbaru.

Privasi & model operasi lokal

Penjelajahan publik dan penyuntingan konten memiliki tanggung jawab terpisah. Kontrol edit tampil dalam mode administrator, dan API penyimpanan juga memeriksa sesi administrator. Hasil mencakup desain pengunjung serta alur konten operator.

Status rilis

Situs beroperasi di mininghair.com. Gambar yang ditampilkan adalah tangkapan situs aktif. Studi kasus ini membahas implementasi, arsitektur, dan desain situs.