Buat Website Portfolio Sendiri dengan Astro dan Tailwind CSS (Panduan Lengkap untuk Freelancer Indonesia)
Ingin tampil profesional online tanpa bergantung platform siap pakai? Ikuti tutorial langkah demi langkah ini untuk membuat website portfolio super cepat dengan Astro dan Tailwind CSS, khusus untuk freelancer Indonesia.
Kamu freelancer asal Indonesia yang capek pakai portfolio Linktree atau portofolio di Behance yang gitu-gitu aja? Atau mungkin kamu sudah punya website, tapi loading-nya lemot karena banyak JavaScript nggak penting. Tenang, di sini kita bakal bikin website portfolio yang cepat, gratis, dan kelihatan profesional. Kita pakai Astro — static site generator modern yang ngasih performa sangat baik — dan Tailwind CSS yang bikin styling jadi cepet dan rapi.
Kenapa Astro dan Tailwind?
Astro itu beda dari framework lain. Dia ngirim HTML kosong ke browser, tanpa JavaScript di awal. Hasilnya? Website super cepat dan ramah SEO. Kamu bebas pakai komponen dari framework favorit (React, Vue, Svelte) kalau perlu interaksi, tapi tetap bisa jaga ukuran halaman jadi ringan. Tailwind CSS adalah framework utility-first yang bikin kamu bisa mendesain langsung di HTML tanpa nulis CSS custom. Cocok buat yang nggak mau ribet tapi tetap pengen desain kece.
Persiapan Sebelum Mulai
Sebelum mulai, pastikan kamu sudah install Node.js versi 18 ke atas di komputer. Cek dengan perintah:
node --version
Kalau belum ada, download di nodejs.org. Selain itu, kamu juga butuh teks editor seperti VS Code.
Langkah 1: Buat Proyek Astro Baru
Buka terminal dan jalankan perintah ini:
npm create astro@latest portfolio-saya -- --template basics
Perintah di atas akan membuat folder portfolio-saya dengan template dasar Astro. Pilih Yes saat ditanya mau install dependencies, dan No untuk TypeScript (kalau kamu belum familier). Masuk ke folder proyek:
cd portfolio-saya
Langkah 2: Tambahkan Tailwind CSS
Astro punya integrasi resmi dengan Tailwind. Tambahkan via perintah:
npx astro add tailwind
Ini akan secara otomatis mengatur file konfigurasi dan menginstall package yang diperlukan. Kalau muncul pertanyaan, tekan Enter untuk setuju.
Langkah 3: Struktur Halaman Portfolio
Kita bikin dua halaman: Beranda (Home) dan Tentang (About). Di Astro, setiap file .astro di folder src/pages/ jadi satu halaman. Buka file src/pages/index.astro dan ganti isinya dengan ini:
---
// Bagian script, bisa diisi variabel atau data
const nama = "Nama Kamu";
const role = "UI/UX Designer & Front-end Developer";
---
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio - {nama}</title>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
<header class="flex items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">{nama}</h1>
<nav>
<a href="/" class="mr-4 hover:underline">Beranda</a>
<a href="/about" class="hover:underline">Tentang</a>
</nav>
</header>
<main class="max-w-4xl mx-auto px-6 py-20">
<section class="text-center">
<h2 class="text-4xl font-semibold mb-4">Halo, saya {nama}!</h2>
<p class="text-xl text-gray-600">{role}</p>
<p class="mt-6 max-w-lg mx-auto">
Saya spesialis bikin desain yang nggak cuma cantik, tapi juga fungsional.
Selamat datang di portfolio saya.
</p>
<a href="/about" class="inline-block mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Kenalan Yuk
</a>
</section>
</main>
</body>
</html>
Sekarang, buat halaman Tentang. Buat file baru di src/pages/about.astro dengan konten:
---
const nama = "Nama Kamu";
const skills = ["Figma", "React", "Tailwind", "Astro"];
---
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tentang - {nama}</title>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
<header class="flex items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">{nama}</h1>
<nav>
<a href="/" class="mr-4 hover:underline">Beranda</a>
<a href="/about" class="hover:underline">Tentang</a>
</nav>
</header>
<main class="max-w-4xl mx-auto px-6 py-20">
<h2 class="text-3xl font-semibold mb-6">Tentang Saya</h2>
<p class="mb-4">
Saya seorang desainer dan developer dari Indonesia (ganti dengan informasi kamu).
Saya percaya desain yang baik bisa menyelesaikan masalah.
</p>
<h3 class="text-xl font-semibold mt-8 mb-2">Skill yang Saya Kuasai</h3>
<ul class="list-disc pl-6 space-y-1">
{skills.map(skill => <li>{skill} </li>)}
</ul>
</main>
</body>
</html>
Langkah 4: Tambahkan Proyek (Opsional)
Biar portfolio makin greget, tambahkan daftar proyek. Misal, kamu bisa buat array of objects di bagian script --- dan looping di halaman Beranda. Tapi untuk kesederhanaan, kita skip dulu.
Langkah 5: Deploy ke Layanan Gratis
Astro punya integrasi dengan beberapa platform deploy. Yang paling mudah adalah Cloudflare Pages, Vercel, atau Netlify. Ikuti salah satu:
Deploy ke Netlify
- Buat repository di GitHub dengan isi folder
portfolio-saya. - Login ke netlify.com dengan akun GitHub.
- Klik "Add new site" > "Import an existing project".
- Pilih repository yang baru kamu buat.
- Build command:
npm run build, publish directory:dist. - Klik "Deploy site".
Selesai! Website portfolio kamu sudah online dengan URL acak. Kamu bisa ubah ke domain kustom nanti.
Penutup
Dengan Astro dan Tailwind CSS, kamu punya website portfolio yang super cepat, ringan, dan gampang dirawat. Kamu bisa terus kembangkan dengan menambah halaman baru, komponen interaktif (misal carousel proyek), atau integrasi dengan blog. Jangan ragu untuk fork template ini sesuai kebutuhan. Sekarang, upload project nyata kamu, dan tunjukkan ke dunia!