Buat landing page portofolio premium dengan Astro dan Tailwind.
Masuk untuk Mengikuti
Kamu perlu login terlebih dahulu untuk mengikuti penulis ini dan mendapatkan notifikasi artikel terbaru.
Sebagai pewawancara teknis di beberapa instansi rintisan kecil (Startup), saya sering kali menghela napas panjang saat kandidat mengirimkan tautan lamaran pekerjaannya berupa lembaran kertas Curriculum Vitae format .doc kaku peninggalan era 2010.
Ini tahun 2026. Berdiri tegak menjadi Developer berarti kartu nama digital Anda harus bisa diakses dari browser, punya animasi micro-interaction yang sedap, sekaligus melesat buka kodenya dalam setengah detik.
Di tutorial pekan ini, saya akan menuntun ketikan Anda menciptakan Landing Page Portofolio bergaya Material Design 3 (M3) yang melengkung elegan (extreme rounded). Kita akan memakai sasis mesin Astro yang terkenal dengan arsitektur 0-JS di sisi peramban pelanggannya. Waktu yang dibutuhkan? Kurang dari segelas Americano dingin.
Persiapan Tempur Sebelum Mulai
Anda cukup menyiapkan dua nyawa ini:
- NPM yang berjalan di Node.js (Minimal v20).
- Pengetahuan kelas dasar apa itu baris-baris kelas (Classes) Tailwind CSS.
Langkah-langkah Tutorial Praktis Baru 2026
Tahap 1: Memantik Reaktor Astro
Buka papan terminal kesayangan Anda lalu jalankan pemantik (scaffold) proyek perawan Astro.
Astro CLI akan melemparkan serangkaian pertanyaan instalasi. Tekan y pada semua jawaban instalasi paket dependencies hingga komplit 100%. Jangan lupa melipir masuk ke folder yang baru tercipta tersebut dengan cd my-astro-portfolio.
Tahap 2: Menancapkan Tailwind CSS
Sekarang masukkan integrasi Tailwind ke dalam sasis Astro. Ini jauh lebih mudah di Astro versi terbaru ketimbang merangkai postcss.config dan tailwind.config secara manual di framework lain.
Selesai? Sangat ajaib. Konfigurasi tailwind.config.mjs akan disuluh Astro masuk ke akar (root) project Anda.
Tahap 3: Meramu Cita Rasa Ekstrem M3 (Material Design 3)
Rahasia agar portofolio Anda tak tampak menjenuhkan (seperti sejuta web Tailwind datar sedunia lainnya) adalah memainkan sudut pandang Radius.
Kita akan membungkus kelas global CSS kita ke dalam lekukan tombol M3 (biasanya rounded-3xl hingga rounded-full). Mari kita ubah layout utama kita.
Tahap 4: Mengocok Kode Halaman Terdepan (Index)
Kita menuju file src/pages/index.astro. Hapuskan semua bawaan dari Astro dan gantilah dengan racikan khusus gaya kartu profil Sitemas ini.
Kode di bawah ini dirancang responsif, mengambang murni di tengah layar pada penampang Desktop, tapi luwes jatuh lurus pada bentang vertikal HP pintar (Mobile).
Suntikan Source Code (Index.Astro)
---
// Taruh logika TypeScript Astro Anda di antara tiga tanda minus ini (Jika Ada)
// misal fetch repositori Github via Rest API.
const myName = "John Doe Sitemas";
---
<html lang="id">
<head>
<meta charset="utf-8" />
<title>Portofolio | {myName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="bg-gray-50 text-gray-900 font-sans antialiased min-h-screen flex items-center justify-center p-4">
<!-- Kartu Material Design 3 Utama -->
<main class="w-full max-w-2xl bg-white rounded-[3rem] shadow-xl shadow-gray-200/50 p-8 sm:p-12 transition-all hover:shadow-2xl hover:-translate-y-1 duration-500">
<header class="flex flex-col sm:flex-row items-center sm:items-start gap-8 border-b border-gray-100 pb-10">
<!-- Foto Profil Rounded Ekstrem -->
<div class="w-32 h-32 shrink-0 rounded-[2rem] overflow-hidden bg-gradient-to-tr from-indigo-500 to-purple-400 p-1">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Julianto"
alt="Anime Face Avatar"
class="w-full h-full object-cover rounded-[1.8rem] bg-white"
/>
</div>
<div class="text-center sm:text-left">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-950 mb-3">{myName}</h1>
<h2 class="text-lg font-medium text-purple-600 mb-4">Frontend Alchemist & Coder UI/UX</h2>
<p class="text-gray-500 leading-relaxed text-sm">
Saya mengonversi kopi menjadi aplikasi antarmuka. Sepenuhnya terobsesi pada pengalaman layar mulus seperti mentega tanpa JavaScript tebal.
</p>
</div>
</header>
<!-- Tombol CTA Rounded Pill (M3 Signature) -->
<section class="mt-8 flex flex-wrap gap-4 justify-center sm:justify-start">
<a href="mailto:hallo@example.com"
class="px-8 py-3.5 bg-gray-900 text-white text-sm font-semibold rounded-full hover:bg-gray-800 transition-colors shadow-lg shadow-gray-900/20">
Undang Saya Ngopi
</a>
<a href="https://github.com/dimasjulianto" target="_blank"
class="px-8 py-3.5 bg-indigo-50 text-indigo-700 text-sm font-semibold rounded-full hover:bg-indigo-100 transition-colors">
Lihat Repo Github
</a>
</section>
</main>
</body>
</html>Trik Animasi Mikro Tanpa Script (M3 Halus)
Anda sadar pada kode tag <main> di atas terdapat kelas transition-all hover:-translate-y-1 duration-500? Membubuhkan responsif lambat 500milidetik ketika mouse cursor (kursor) si rekruter manajer melayang di atas kartu portofolio Anda sukses memunculkan sinyal bawah sadar bahwa web Anda bergaya Premium. Desain kotak kaku tanpa respons sentuhan hanyalah Template Murni.
Memoles Tampilan ke Muka Publik Online
Langkah paling membahagiakannya adalah melihat karya ketik Anda tereksekusi pada tautan aslinya. Kembali pada konsol terminal, silakan Build dan konversi kode Astro ini ke wujud Statisnya.
Folder hasil akhir bernama /dist akan tercipta dari langit. Terdapat tiga file krusial yaitu HTML Index, gambar pendukung, dan bundel kompres CSS ringan. Seret langsung folder dist tersebut ke dalam Dasbor Vercel atau akun Cloudflare Pages. Biarkan server mengunyah serakan kodenya kurang dari semenit, dan tautan Portofolio Website mutakhir sudah hidup selamanya untuk publik!
Pertanyaan yang Sering Ditanyakan (FAQ)
Astro kan Static site, apakah bisa pasang formulir kirim Email?
Tentu! Tanpa Backend server sekalipun, Anda bisa menyisipkan tag
Bisa ditambahi sistem Markdown layaknya blog sekalian untuk menulis rekam jejak projek?
Sekali lagi tentu. Tapi ketimbang pusing mencetak skema *Content Collections* murni dari kertas buram, silakan melipir mengeksplor kerangka instalasi cikal-bakal Sitemas.
Kesimpulan
Lekukan elegan desain M3 ditambah kedigdayaan Astro menyapu habis keraguan manajer HR (Human Resource) memanggil Anda ke fase iterasi Technical Test. Web Portofolio ini sanggup menembus angka mutlak 100 Hijau untuk Performa, SEO, Accessibility, dan Best Practices di layar suci Google Lighthouse.
Kini tutup laman ini, matikan instrumen terminal gawai Anda, dan sebarkan URL portofolio sakti tersebut ke pelbagai bilah aplikasi bursa karir seantro bumi raya! Sukses.
Tertarik Belajar Astro Lebih Dekat?
Untuk tutorial yang memandu pemasangan integrasi tingkat lanjut Astro framework dari akar, silakan bongkar koleksi dokumentasi peluncuran perdana kami.
Komentar