PORTFOLIOKEVIN NAZAR MUFADHOLBUILDING MODERN WEBSITESFULLSTACK DEVELOPERAVAILABLE FOR REMOTE WORK
Website personal satu halaman yang mobile-first dan menjadi pusat berbagai tautan sosial media, project, portfolio, dan kontak — dibangun dengan React, TypeScript, dan Tailwind CSS v4, dengan seluruh konten dikelola melalui environment variables.
VinnDeev Link Hub lahir sebagai pusat personal branding — satu tujuan tunggal yang mengumpulkan seluruh profil sosial, project, tautan portfolio, dan kanal kontak dalam satu halaman yang bersih. Tujuannya adalah meninggalkan tautan yang tersebar dan tool link-in-bio generik, lalu menghadirkan sesuatu yang cepat, sederhana, dan sepenuhnya bisa dikelola sendiri. Setiap konten di halaman digerakkan oleh environment variables, sehingga memperbarui website berarti cukup mengedit satu file `.env` — tanpa menyentuh kode, tanpa proses rumit selain rebuild.
Dibangun dengan React 19 dan TypeScript untuk UI berbasis komponen yang type-safe, dibundel dan dilayani oleh Vite, serta ditata dengan Tailwind CSS v4 menggunakan design system yang didefinisikan lewat token `@theme`. Halaman tersusun dari komponen-komponen kecil yang fokus — profile header, tautan sosial, tautan unggulan, CTA kontak, dan footer — yang dirangkai dalam layout utama dengan background grid animasi. Data mengalir dari `.env` melalui lapisan data kecil yang mem-parsing JSON array dengan fallback yang aman ke default bawaan, sementara ikon SVG inline custom memberi setiap platform sosial warna brand khasnya. Font di-host sendiri sebagai woff2 demi performa, dan skeleton statis di `index.html` tampil sejak first contentful paint lalu dihapus setelah React selesai mount.
Seluruh data website — meta tags, profil, kontak, tautan sosial, dan tautan unggulan — dibaca dari `.env` melalui variabel `VITE_`, lengkap dengan default bawaan sehingga website tetap berjalan tanpa konfigurasi apa pun.
Ikon SVG inline custom untuk GitHub, LinkedIn, Instagram, dan TikTok, masing-masing terisi warna brand resmi platform agar langsung dikenali, dengan ikon fallback yang rapi untuk platform yang belum dikenal.
Tema mengikuti sistem melalui `prefers-color-scheme`, dengan token desain dan override yang didefinisikan di `src/index.css` menggunakan `@theme` Tailwind v4.
Skeleton HTML statis berada di `index.html` di luar root React sehingga langsung dirender, lalu timer singkat menghapusnya setelah React mount — menampilkan aplikasi tanpa flash kosong atau layout shift.
Grid garis dan titik accent yang bergeser halus menghiasi latar belakang konten, sementara kartu merespons dengan efek hover dan panah berputar 45° untuk nuansa yang taktil dan premium.
Meta tags berbasis environment, `sitemap.xml`, `robots.txt`, font woff2 self-hosted, dan jejak dependency yang minim menjaga halaman tetap ringan dan mudah terindeks.
Merender skeleton lewat React akan menunda first paint hingga JavaScript dimuat, sehingga mengalahkan tujuan pengalaman loading yang terasa cepat di koneksi lambat.
Menempatkan skeleton sebagai HTML statis langsung di `index.html`, di luar `#root`, sehingga browser langsung melukisnya — lalu menghapusnya dengan timer `useEffect` setelah React mount untuk memperlihatkan aplikasi dengan efek fade-in.
Membaca JSON array dari `.env` bersifat stringly-typed dan rawan error — nilai yang tidak valid bisa diam-diam merusak halaman atau membuat build gagal dengan pesan membingungkan.
Membangun utilitas parsing kecil (`parseJsonArray`) yang memvalidasi input terhadap interface bertipe, jatuh ke default yang sudah dikurasi saat gagal, dan memetakan setiap entri ke ikon yang cocok di level tipe.
Halaman link-in-bio cenderung terlihat sama — layout yang identik, ikon stok, dan gradien gelap — sehingga sulit menonjol sambil tetap menjaga halaman tetap minimal.
Merancang identitas khas dari nol: ikon brand SVG custom, warna primer violet `#5b3eff`, paduan font terkurasi (Bricolage Grotesque, Hanken Grotesk, JetBrains Mono), serta background grid animasi halus yang memberi gerakan tanpa membuat halaman terasa ramai.
