Template Sederhana Halaman Portofolio Pribadi Menggunakan HTML, CSS, dan JavaScript

Template Sederhana Halaman Portofolio Pribadi

Memiliki halaman portofolio pribadi adalah langkah penting bagi siapa pun yang ingin menampilkan karya, keahlian, dan identitas profesional secara online. Dengan portofolio, kamu bisa memperkenalkan diri kepada calon klien, recruiter, atau komunitas kreatif secara lebih profesional.

Pada artikel ini, kita akan membuat template halaman portofolio pribadi sederhana menggunakan HTML, CSS, dan JavaScript murni tanpa framework tambahan. Template ini cocok untuk pemula dan bisa dikembangkan lebih lanjut sesuai kebutuhan.

Fitur Template Portofolio

  • Desain sederhana dan responsif
  • Bagian profil singkat
  • Daftar skill
  • Contoh proyek
  • Interaksi JavaScript sederhana

Struktur HTML

Berikut adalah struktur HTML utama untuk halaman portofolio. Kode ini berfungsi sebagai kerangka dasar halaman. 


<div class="container">
  <header class="profile">
    <img src="profile.jpg" alt="Foto Profil">
    <h1>Nama Kamu</h1>
    <p>Web Developer | UI Designer</p>
  </header>

  <section class="about">
    <h2>Tentang Saya</h2>
    <p>
      Saya adalah seorang web developer yang fokus pada pembuatan
      website sederhana, cepat, dan mudah digunakan.
    </p>
  </section>

  <section class="skills">
    <h2>Keahlian</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </section>

  <section class="projects">
    <h2>Proyek</h2>
    <div class="project-card">
      <h3>Website Portofolio</h3>
      <p>Website portofolio pribadi dengan desain minimalis.</p>
    </div>
  </section>

  <button id="contactBtn">Hubungi Saya</button>
</div>

Style CSS

CSS berikut digunakan untuk memberikan tampilan bersih, modern, dan tetap nyaman dilihat di berbagai ukuran layar. 


body {
  font-family: Arial, sans-serif;
  background: #f8fafc;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

.profile {
  text-align: center;
}

.profile img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.profile h1 {
  margin: 10px 0 5px;
}

section {
  margin-top: 30px;
}

.skills ul {
  list-style: none;
  padding: 0;
}

.skills li {
  background: #e5e7eb;
  display: inline-block;
  padding: 6px 12px;
  margin: 5px;
  border-radius: 6px;
}

.project-card {
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

button {
  margin-top: 30px;
  padding: 12px 20px;
  border: none;
  background: #2563eb;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

Script JavaScript

JavaScript berikut digunakan untuk menambahkan interaksi sederhana pada tombol “Hubungi Saya”. 


document.getElementById("contactBtn").addEventListener("click", function () {
  alert("Terima kasih sudah mengunjungi portofolio saya!");
});

Penutup

Template portofolio ini adalah contoh dasar yang bisa kamu gunakan sebagai titik awal. Kamu dapat menambahkan halaman baru, animasi, atau menghubungkannya dengan email dan media sosial agar terlihat lebih profesional.

Semoga artikel ini membantu kamu dalam membuat portofolio pribadi menggunakan HTML, CSS, dan JavaScript. Selamat mencoba dan terus berkreasi!

Tag: