by Website portofolio adalah “kartu nama digital” yang menampilkan siapa Anda dan karya-karya Anda — wajib dimiliki developer, desainer, atau freelancer. Artikel ini membahas cara membuat website portofolio sederhana dengan HTML, CSS, dan sedikit PHP untuk form kontak.
Struktur Halaman Portofolio
Website portofolio yang baik memiliki empat bagian:
- Hero — nama, profesi, dan kesan pertama
- Tentang — ringkasan diri & keahlian
- Proyek — galeri karya/portofolio
- Kontak — form agar orang bisa menghubungi
Kerangka HTML & CSS
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portofolio - Budi</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; font-family:sans-serif; }
.hero { background:#0e7490; color:#fff; text-align:center; padding:80px 20px; }
.section { max-width:900px; margin:auto; padding:50px 20px; }
.proyek-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.kartu { border:1px solid #ddd; border-radius:8px; padding:20px; }
</style>
</head>
<body>
<section class="hero">
<h1>Budi Santoso</h1>
<p>Web Developer</p>
</section>
</body>
</html>
Bagian Tentang & Proyek
<section class="section">
<h2>Tentang Saya</h2>
<p>Saya seorang web developer yang menyukai PHP dan JavaScript...</p>
</section>
<section class="section">
<h2>Proyek Saya</h2>
<div class="proyek-grid">
<div class="kartu"><h3>Toko Online</h3><p>PHP & MySQL</p></div>
<div class="kartu"><h3>Aplikasi Kasir</h3><p>PHP native</p></div>
</div>
</section>
Form Kontak yang Berfungsi (PHP)
Agar form kontak benar-benar mengirim, tambahkan pemrosesan PHP:
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$nama = htmlspecialchars(trim($_POST["nama"]));
$pesan = htmlspecialchars(trim($_POST["pesan"]));
// kirim email atau simpan ke database
mail("email@anda.com", "Pesan dari $nama", $pesan);
echo "Terima kasih, pesan terkirim!";
}
?>
<form method="post">
<input type="text" name="nama" placeholder="Nama" required><br>
<textarea name="pesan" placeholder="Pesan" required></textarea><br>
<button type="submit">Kirim</button>
</form>
Tips
- Buat responsif dengan CSS Grid/Flexbox (contoh di atas sudah responsif).
- Tampilkan proyek nyata dengan gambar dan tautan.
- Untuk pengiriman email yang andal, gunakan PHPMailer alih-alih
mail().
Kesimpulan
Anda telah membuat website portofolio sederhana dengan empat bagian penting dan form kontak berfungsi. Portofolio yang baik menampilkan karya nyata secara rapi dan responsif. Host di layanan gratis atau domain sendiri, dan jadikan sebagai pintu bagi peluang kerja atau proyek.
Referensi: untuk pendalaman, kunjungi dokumentasi resmi Bootstrap.
