Component Library — Fasa 5 Portfolio

🎨 1. Navbar Component

Bar navigasi yang konsisten di semua halaman. Responsif dengan hamburger menu untuk skrin kecil.

Visual Preview

Pada desktop, navbar memaparkan logo di kiri dan pautan navigasi di kanan. Pada skrin kecil (< 768px), pautan akan disusun menegak di bawah logo, atau disembunyikan di sebalik butang hamburger (bergantung pada implementasi).

Ciri-ciri

Logo atau nama jenama di sebelah kiri
Pautan navigasi ke semua halaman (Home, About, Projects, Contact)
Kelas .active untuk menunjukkan halaman semasa
Hover effect pada pautan
Responsif — susun menegak pada skrin kecil
Sticky / fixed di bahagian atas (boleh diubah suai)

Prompt AI untuk Menjana Navbar

Prompt Asas

"Hasilkan kod HTML dan CSS untuk navbar portfolio yang responsif. Logo di kiri, pautan (Home, About, Projects, Contact) di kanan. Guna dark theme, warna aksen gold. Satu pautan boleh ditanda 'active'. Tambah hover effect. Pada skrin kecil (<768px), pautan turun ke baris baru."

Prompt Hamburger Menu (JavaScript)

"Tambah hamburger menu untuk navbar portfolio. Pada skrin telefon, pautan navigasi disembunyikan dan satu butang hamburger (tiga garis) muncul. Bila butang diklik, pautan muncul sebagai menu menegak. Guna JavaScript ringkas. Dark theme, gold accent."

Prompt Sticky Navbar

"Jadikan navbar ini 'sticky' — ia kekal di atas walaupun halaman discroll. Tambah kesan latar belakang sedikit legap (glassmorphism) bila discroll. Guna CSS position: sticky dan backdrop-filter."

Struktur HTML Navbar

<nav class="navbar">
  <div class="nav-container">
    <a href="index.html" class="nav-logo">Portfolio</a>
    <button class="nav-toggle" id="navToggle">&#9776;</button>
    <ul class="nav-menu" id="navMenu">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

CSS Asas

.navbar {
  position: sticky; top: 0;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}
.nav-container {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between;
  align-items: center; padding: 16px 24px;
}
.nav-logo { font-size: 1.3rem; font-weight: 800; color: var(--text); text-decoration: none; }
.nav-menu { display: flex; gap: 24px; list-style: none; }
.nav-menu a {
  color: var(--text2); text-decoration: none;
  font-weight: 600; transition: color 0.25s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 768px) {
  .nav-menu {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg2); padding: 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-menu.open { display: flex; }
  .nav-toggle { display: block; }
}

JavaScript untuk Toggle

document.getElementById('navToggle').addEventListener('click', function() {
  document.getElementById('navMenu').classList.toggle('open');
});

Tips Kustomisasi Navbar

Tip 1: Active Page

Dalam setiap halaman HTML, ubah kelas active pada pautan yang sepadan. Contoh: dalam about.html, letak class="active" pada pautan "About". Ini membantu pengunjung tahu mereka di halaman mana.

Tip 2: Glassmorphism

Untuk efek kaca moden, guna background: rgba(..., 0.8) dengan backdrop-filter: blur(12px). Rujuk kod CSS di atas untuk implementasi.

Tip 3: Padding & Spacing

Gunakan padding: 16px 24px untuk ruang selesa. Jarak antara pautan guna gap: 24px dalam flexbox. Elakkan spacing terlalu sempit atau terlalu luas.

Tip 4: Guna Semula

Salin kod navbar yang sama ke semua halaman HTML. Hanya ubah kelas active. Jika nak ubah warna atau reka bentuk, edit CSS sekali dan semua halaman akan berubah.

📍 2. Footer Component

Footer 3-kolum yang memaparkan maklumat jenama, pautan pantas, dan media sosial.

Visual Preview

Ciri-ciri

3 kolum: Brand, Pautan Pantas, Media Sosial
Nama dan penerangan ringkas di kolum pertama
Pautan ke semua halaman portfolio
Pautan ke profil media sosial
Copyright di bahagian bawah

Struktur HTML Footer

<footer class="footer">
  <div class="footer-container">
    <div class="footer-col footer-brand">
      <h3>Ahmad Danial</h3>
      <p>Web Developer & Creative Designer.</p>
    </div>
    <div class="footer-col">
      <h4>Pautan</h4>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="projects.html">Projects</a>
      <a href="contact.html">Contact</a>
    </div>
    <div class="footer-col">
      <h4>Sosial</h4>
      <a href="#">GitHub</a>
      <a href="#">LinkedIn</a>
      <a href="#">Instagram</a>
      <a href="mailto:email@example.com">Email</a>
    </div>
  </div>
  <div class="footer-bottom">
    &copy; 2026 Ahmad Danial. All rights reserved.
  </div>
</footer>

CSS Asas

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  max-width: 1200px; margin: 0 auto;
  padding: 48px 24px 24px;
}
.footer-col h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.footer-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text3); margin-bottom: 12px; }
.footer-col p { color: var(--text2); font-size: 0.85rem; }
.footer-col a { display: block; color: var(--text2); text-decoration: none; font-size: 0.85rem; margin-bottom: 6px; transition: color 0.25s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 1px solid var(--border);
  color: var(--text3);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .footer-container { grid-template-columns: 1fr; gap: 24px; }
}

Tips Kustomisasi Footer

Tip 1: Guna Semua Halaman

Footer adalah sama di setiap halaman. Salin kod sekali dan letak di semua fail HTML sebelum tag </body>. Ini adalah contoh terbaik komponen reusable.

Tip 2: Sosial Ikon

Untuk kelihatan lebih profesional, tambah ikon media sosial (Font Awesome, Boxicons, atau SVG). Prompt: "Tambah ikon SVG ringkas untuk GitHub, LinkedIn, dan Instagram di footer portfolio."

Tip 3: Copyright Dinamik

Guna JavaScript untuk tahun automatik: new Date().getFullYear(). Gantikan tahun statik dengan kod ini supaya tidak perlu dikemas kini setiap tahun.

📅 3. Project Card Component

Kad projek yang boleh diguna semula untuk setiap projek dalam portfolio. Struktur sama, isi berbeza.

Visual Preview

Gambar Projek

E-Commerce App

Aplikasi beli-belah dalam talian dengan authentication, carian, dan pembayaran.

React Node.js MongoDB

Lihat Projek →

Gambar Projek

Weather App

App cuaca masa nyata dengan ramalan 7 hari menggunakan API.

Vue.js API

Lihat Projek →

Ciri-ciri

Gambar projek di bahagian atas (placeholder atau imej sebenar)
Tajuk projek yang jelas
Penerangan ringkas (1-2 ayat)
Tag teknologi yang digunakan
Pautan ke projek (live demo / repositori)
Hover effect — naik sedikit dan ada bayang

Prompt AI untuk Menjana Kad Projek

Prompt Asas

"Hasilkan kod HTML dan CSS untuk kad projek portfolio. Kad ada: gambar placeholder di atas, tajuk projek, penerangan ringkas, tag teknologi, dan pautan 'Lihat Projek'. Guna dark theme, gold accent. Tambah hover effect — kad naik 2px dan ada bayang. Kad lebar sekitar 300px."

Prompt Grid Projek

"Bina grid projek 3 kolum menggunakan CSS Grid. Setiap kad projek ada gambar, tajuk, penerangan, tag, dan pautan. Responsif: 3 kolum desktop, 2 tablet, 1 telefon. Guna dark theme. 6 projek sample."

Struktur HTML Kad Projek

<div class="project-card">
  <div class="card-image">
    <img src="images/projek1.jpg" alt="E-Commerce App">
  </div>
  <div class="card-content">
    <h3>E-Commerce App</h3>
    <p>Aplikasi beli-belah dalam talian dengan authentication dan pembayaran.</p>
    <div class="card-tags">
      <span class="tag">React</span>
      <span class="tag">Node.js</span>
      <span class="tag">MongoDB</span>
    </div>
    <a href="#" class="card-link">Lihat Projek &rarr;</a>
  </div>
</div>

CSS Asas

.project-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  border-color: var(--gold);
}
.card-image {
  height: 180px;
  background: var(--bg3);
  overflow: hidden;
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-content { padding: 20px; }
.card-content h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.card-content p { color: var(--text2); font-size: 0.85rem; margin-bottom: 12px; }
.card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tag {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 0.7rem;
  color: var(--text3);
}
.card-link { color: var(--gold); font-weight: 600; text-decoration: none; font-size: 0.85rem; }
.card-link:hover { text-decoration: underline; }

Tips Kustomisasi Kad Projek

Tip 1: Gunakan Semula Kad

Struktur HTML kad adalah sama untuk setiap projek. Cuma tukar: src gambar, tajuk, penerangan, tag, dan href pautan. Anda boleh salin blok <div class="project-card"> dan ubah isinya.

Tip 2: Gambar Konsisten

Gunakan saiz gambar yang sama untuk semua kad (contoh: 600x400px). Ini memastikan grid kelihatan kemas dan teratur. Guna object-fit: cover untuk crop automatik.

Tip 3: Warna Tag

Untuk menjadikan tag lebih menarik, beri warna berbeda berdasarkan teknologi. Prompt: "Beri warna berbeza pada tag teknologi: biru untuk React, hijau untuk Node.js, kuning untuk JavaScript."

📧 4. Contact Form Component

Borang hubungi yang lengkap dengan validation asas dan styling yang konsisten.

Visual Preview

Nama

Email

Subjek

Mesej

Ciri-ciri

4 field: Nama, Email, Subjek, Mesej
Semua field guna required untuk validation HTML5
Input email guna type="email" untuk validation format
Textarea untuk mesej panjang (5 baris)
Button hantar dengan gaya yang menarik
Label jelas untuk setiap ruangan

Prompt AI untuk Menjana Borang

Prompt Asas

"Hasilkan kod HTML dan CSS untuk borang contact portfolio. Field: Nama, Email, Subjek, Mesej (textarea). Semua field required. Guna type="email" untuk email. Label di atas setiap field. Button submit 'Hantar Mesej' dengan warna gold gradient. Dark theme, styling yang bersih dan moden. Responsif."

Prompt Validation JavaScript

"Tambah validation JavaScript pada borang contact. Semak: nama tak boleh kosong, email mesti format betul, mesej minimum 10 aksara. Tunjuk mesej ralat merah di bawah field yang bermasalah. Highlight border merah pada field yang invalid."

Struktur HTML Borang

<form class="contact-form" id="contactForm">
  <div class="form-group">
    <label for="name">Nama</label>
    <input type="text" id="name" name="name" required placeholder="Nama penuh anda">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required placeholder="alamat@email.com">
  </div>
  <div class="form-group">
    <label for="subject">Subjek</label>
    <input type="text" id="subject" name="subject" required placeholder="Tujuan menghubungi">
  </div>
  <div class="form-group">
    <label for="message">Mesej</label>
    <textarea id="message" name="message" rows="5" required placeholder="Tulis mesej anda di sini..."></textarea>
  </div>
  <button type="submit" class="submit-btn">Hantar Mesej</button>
</form>

CSS Asas

.contact-form { max-width: 560px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-display);
  outline: none;
  transition: border-color 0.25s;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,209,102,0.1);
}
.form-group input.error,
.form-group textarea.error { border-color: var(--red); }
.error-msg { color: var(--red); font-size: 0.8rem; margin-top: 4px; display: none; }
.error-msg.show { display: block; }
.submit-btn {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #000; border: none;
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}
.submit-btn:hover { transform: translateY(-2px); }

Tips Kustomisasi Borang

Tip 1: Form Action

Untuk borang yang benar-benar menghantar email, guna perkhidmatan seperti Formspree (percuma) atau Web3Forms. Prompt: "Tambah form action ke Formspree pada borang contact. Guna endpoint https://formspree.io/f/your-form-id."

Tip 2: Validation Mesra

Mesej ralat yang baik: spesifik dan membantu. Bukan "Ralat" tetapi "Sila masukkan alamat email yang sah." Guna warna merah untuk ralat, hijau untuk kejayaan.

Tip 3: Loading State

Tambah feedback bila borang dihantar: "Sedang menghantar..." pada button, atau spinner. Prompt: "Tambah loading state pada submit button. Bila diklik, button jadi disabled dan tunjuk 'Sedang Menghantar...'."

🌟 5. Hero Section Component

Bahagian pembuka yang menjadi tumpuan utama di homepage. Mesti menarik perhatian dalam beberapa saat.

Visual Preview

Web Developer & Designer

Hi, Saya Ahmad Danial

Saya membina pengalaman digital yang cantik, responsif, dan mesra pengguna. Mari bekerjasama untuk projek anda.

Lihat Projek Saya Hubungi Saya

Ciri-ciri

Badge / label profesional di bahagian atas
Tajuk besar dengan nama anda
Subtitle / tagline ringkas (1-2 ayat)
2 Call-to-Action buttons (utama & kedua)
Background dengan gradient atau pattern
Animasi ringkas (fade-in, slide-up)

Prompt AI untuk Menjana Hero Section

Prompt Asas

"Hasilkan kod HTML dan CSS untuk hero section portfolio peribadi. Nak ada badge 'Web Developer', tajuk besar 'Hi, Saya [Nama]', subtitle ringkas, dan 2 button: 'Lihat Projek' (gold gradient) dan 'Hubungi Saya' (outline). Background dark dengan gradient subtle. Animasi fade-in. Responsif."

Prompt Hero dengan Animasi

"Tambah animasi pada hero section: tajuk masuk dari kiri, subtitle dari kanan, butang naik dari bawah. Guna CSS @keyframes. Setiap elemen ada delay berbeza untuk efek stagger."

Prompt Hero dengan Gambar

"Hero section dengan gambar profil bulat di sebelah teks. Layout: teks di kiri, gambar di kanan (desktop). Teks di atas, gambar di bawah (mobile). Gambar guna placeholder bulat. Dark theme."

Struktur HTML Hero

<section class="hero">
  <div class="hero-content">
    <span class="hero-badge">Web Developer & Designer</span>
    <h1 class="hero-title">Hi, Saya Ahmad Danial</h1>
    <p class="hero-subtitle">
      Saya membina pengalaman digital yang cantik, responsif,
      dan mesra pengguna.
    </p>
    <div class="hero-buttons">
      <a href="projects.html" class="btn btn-primary">Lihat Projek Saya</a>
      <a href="contact.html" class="btn btn-secondary">Hubungi Saya</a>
    </div>
  </div>
</section>

CSS Asas

.hero {
  padding: 80px 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-badge {
  display: inline-block;
  background: rgba(255,209,102,0.1);
  color: var(--gold);
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}
.hero-subtitle {
  color: var(--text2);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s;
  display: inline-block;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #000;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,209,102,0.3); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--text2); }

Tips Kustomisasi Hero

Tip 1: Tagline yang Kuat

Tagline anda adalah ayat pertama yang dibaca. Buat ia ringkas, spesifik, dan bermakna. Contoh: "Saya menukar idea kompleks kepada kod yang elegant" lebih baik dari "Saya seorang programmer."

Tip 2: Satu Fokus Utama

Hero section patut ada SATU mesej utama dan SATU tindakan utama. Jangan letak terlalu banyak maklumat. Jika perlu, gunakan butang utama untuk navigasi ke projek, dan butang kedua sebagai pilihan.

Tip 3: Gradient Background

Gunakan gradient subtle untuk menambah dimensi. Prompt: "Tambah background gradient dari dark navy ke dark purple pada hero section. Pastikan ia subtle dan tidak mengganggu teks."

🔄 Cara Guna Semula Komponen

Panduan praktikal untuk menggunakan komponen yang sama di semua halaman portfolio.

Langkah 1: Buat Komponen

Guna prompt AI untuk hasilkan satu komponen (contoh: navbar). Simpan kod yang dihasilkan dalam satu fail rujukan atau terus dalam halaman pertama anda (index.html).

Langkah 2: Salin ke Semua Halaman

Salin kod HTML komponen ke setiap fail HTML yang lain. Untuk navbar, salin ke about.html, projects.html, contact.html.

Langkah 3: Ubah Suai Ikut Halaman

Ubah bahagian yang perlu berbeza mengikut halaman. Contoh untuk navbar: tukar kelas active pada pautan yang sepadan.

<!-- Dalam index.html -->
<ul class="nav-menu">
  <li><a href="index.html" class="active">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

<!-- Dalam about.html -->
<ul class="nav-menu">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html" class="active">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Langkah 4: CSS Dikongsi

Semua CSS untuk komponen diletakkan dalam satu fail style.css. Pautkan fail ini ke setiap halaman HTML:

<!-- Dalam  setiap halaman HTML -->
<link rel="stylesheet" href="style.css">

Langkah 5: Uji Semua Halaman

Buka setiap halaman HTML di browser. Pastikan:

Navbar sama dan konsisten (kecuali kelas active)
Footer sama di semua halaman
Semua pautan berfungsi
CSS berfungsi (gaya sama di semua halaman)

Konsep Utama

Komponen reusable adalah asas kepada pembangunan web moden (React, Vue, Angular). Walaupun kita hanya guna HTML/CSS tanpa framework, konsepnya sama: tulis sekali, guna banyak kali, ubah sikit ikut keperluan. Ini menjimatkan masa, mengurangkan ralat, dan memastikan konsistensi.

🎨 1. Navbar Component

Visual Preview

Ciri-ciri

Prompt AI untuk Menjana Navbar

Struktur HTML Navbar

CSS Asas

JavaScript untuk Toggle

Tips Kustomisasi Navbar

📍 2. Footer Component

Visual Preview

Ciri-ciri

Prompt AI untuk Menjana Footer

Struktur HTML Footer

CSS Asas

Tips Kustomisasi Footer

📅 3. Project Card Component

Visual Preview

Ciri-ciri

Prompt AI untuk Menjana Kad Projek

Struktur HTML Kad Projek

CSS Asas

Tips Kustomisasi Kad Projek

📧 4. Contact Form Component

Visual Preview

Ciri-ciri

Prompt AI untuk Menjana Borang

Struktur HTML Borang

CSS Asas

Tips Kustomisasi Borang

🌟 5. Hero Section Component

Visual Preview

Ciri-ciri

Prompt AI untuk Menjana Hero Section

Struktur HTML Hero

CSS Asas

Tips Kustomisasi Hero

🔄 Cara Guna Semula Komponen

Langkah 1: Buat Komponen

Langkah 2: Salin ke Semua Halaman

Langkah 3: Ubah Suai Ikut Halaman

Langkah 4: CSS Dikongsi

Langkah 5: Uji Semua Halaman