Menghidupkan Kreativitas Digital: Kisah di Balik Portofolio Web Bertema MacOS

Halo semua! Saya ingin membagikan salah satu proyek paling seru dan paling tidak konvensional yang pernah saya kerjakan. Proyek ini adalah pembangunan website portofolio untuk seorang content creator terkemuka di industri kreatif, namun dengan twist yang radikal: seluruh website dirancang menyerupai antarmuka macOS Desktop pribadi.

Proyek ini membuktikan bahwa kreativitas bukan hanya milik konten, tetapi juga milik kode!

Konsep Unik: Portofolio Berubah Menjadi Desktop

Kami menyadari bahwa portofolio kreatif harus out-of-the-box. Ide utamanya adalah mengubah kunjungan ke website menjadi pengalaman desktop yang interaktif.

• Interaksi Ikon & Jendela (Window): Semua project portofolio disajikan sebagai ikon desktop. Ketika pengguna mengklik ikon tersebut, sebuah jendela (window) akan muncul untuk menampilkan detail, galeri, dan deskripsi proyek—persis seperti membuka aplikasi atau folder di macOS. Ini menciptakan rasa kedalaman dan eksplorasi yang sangat berbeda dari website biasa.
• Komponen macOS Dock: Daya tarik visual utama adalah Dock macOS yang ikonik. Kami membuat komponen macOS Dock kustom yang menampilkan semua kategori proyek sebagai ikon-ikon di bagian bawah layar. Tentu saja, Dock ini dilengkapi dengan animasi hover yang mulus, menciptakan efek pembesaran yang akurat seperti Dock aslinya.

Stack Teknologi: Memadukan Nuxt, Tailwind, dan Sanity

Untuk mewujudkan UI yang sangat detail dan dinamis ini, kami memilih stack teknologi modern yang optimal:

• Frontend Powerhouse (Nuxt.js & Tailwind): Kami menggunakan Nuxt.js sebagai framework utama yang mengelola sisi frontend (dibangun di atas Vue.js). Nuxt memberikan struktur yang luar biasa untuk mengelola rute dan state aplikasi. Sementara itu, Tailwind CSS adalah pahlawan tak terlihat yang memungkinkan kami membangun style pixel-perfect dari elemen-elemen macOS, seperti shadow jendela, tombol, dan background yang kompleks, dengan kecepatan yang luar biasa.
• Content Management yang Fleksibel (Sanity CMS): Agar content creator dapat mengelola semua file proyek, gambar, dan teks dengan mudah, kami mengintegrasikan Sanity CMS. Sanity menawarkan fleksibilitas yang dibutuhkan untuk mendefinisikan struktur konten kami secara spesifik, yang kemudian di-fetch oleh Nuxt.
• Deployment yang Efisien (Vercel): Website ini di-deploy melalui Vercel, memanfaatkan performa tinggi dan integrasinya yang mudah dengan Nuxt. Kami juga mengatur custom domain untuk memberikan sentuhan profesional akhir.

Kolaborasi Kreatif dan Pembelajaran

Salah satu aspek terbaik dari proyek ini adalah kolaborasi langsung dengan sosok kreatif di industri ini. Bekerja dengan visi yang begitu kuat dan unik menuntut tim teknis untuk keluar dari zona nyaman dan menemukan solusi coding untuk tantangan desain yang benar-benar baru.

Hasilnya adalah website portofolio yang bukan hanya tempat menampilkan karya, tetapi juga sebuah karya seni interaktif itu sendiri.