Project Brief

Brief Portfolio Peribadi

Gunakan template ini untuk merancang portfolio anda sebelum mula menulis kod. Brief yang baik menghasilkan portfolio yang lebih fokus dan berkesan.

Isi semua ruangan di bawah — ini akan menjadi panduan utama anda sepanjang projek.

🎯 Objektif Portfolio

Apa matlamat utama portfolio ini? Fikirkan tentang apa yang anda mahu capai.

Contoh: "Untuk memohon internship sebagai web developer" atau "Untuk menarik klien freelance"
Apa tindakan yang anda mahu pengunjung ambil selepas melawat portfolio?
💼
Dapat Kerja / Internship
Tunjuk kemahiran teknikal dan projek yang relevan. Sertakan resume/CV.
💰
Tarik Klien Freelance
Fokus pada kualiti reka bentuk, testimoni, dan kajian kes projek.
🎓
Permohonan Universiti
Tunjukkan minat, projek akademik, dan potensi pembelajaran.
📈
Bangun Personal Brand
Kongsi pemikiran, blog, dan projek untuk bina kredibiliti dalam industri.

👥 Target Audience

Siapa yang akan melihat portfolio anda? Fahami audiens untuk reka bentuk yang lebih tepat.

💼
Majikan / HR
Mencari calon yang ada kemahiran spesifik. Penting: projek, kemahiran, dan pencapaian.
👔
Klien Potensial
Mencari profesional yang boleh selesaikan masalah mereka. Penting: kualiti, testimoni, harga.
🤝
Rakan Industri
Rangkaian profesional dan kolaborasi. Penting: personaliti, blog, penglibatan komuniti.
🙋
Diri Sendiri
Portfolio sebagai refleksi peribadi dan rekod pertumbuhan. Penting: keaslian dan perjalanan peribadi.
Siapa orang yang paling penting untuk portfolio ini?

🎨 Personal Brand

Tentukan identiti visual portfolio anda. Konsistensi adalah kunci.

🎨
Palet Warna
Pilih 2-3 warna utama + 1 warna aksen. Gunakan AI untuk cadangan: "Cadangkan palet warna dark theme untuk portfolio developer yang nampak profesional dan moden."
🖌
Tipografi
Pilih 1 font untuk tajuk, 1 untuk teks biasa. Font Google: Inter, Poppins, DM Sans untuk tajuk; Roboto, Open Sans untuk teks.
👁
Gaya Visual
Minimalis? Bold? Playful? Professional? Pilih gaya yang mencerminkan personaliti anda.
📝
Tone Penulisan
Formal, kasual, teknikal, mesra? Pastikan konsisten merentas semua halaman.
Senaraikan warna hex yang anda nak guna.
Contoh: "Moden, minimal, profesional" atau "Kreatif, berani, dinamik"

📄 Content Checklist

Kumpul semua kandungan yang diperlukan sebelum mula membina halaman.

👤
Bio & Profil
  • Nama penuh
  • Tajuk profesional (cth: Web Developer)
  • Bio pendek (2-3 ayat)
  • Bio panjang (1-2 perenggan)
  • Foto profil (atau placeholder)
🛠
Kemahiran
  • Senarai kemahiran teknikal
  • Tahap penguasaan (pemula/sederhana/mahir)
  • Kemahiran insaniah (soft skills)
  • Alat dan teknologi yang dikuasai
💻
Projek
  • 4-6 projek untuk dipaparkan
  • Gambar/ilustrasi setiap projek
  • Tajuk dan penerangan ringkas
  • Pautan ke repositori/live demo
  • Senarai teknologi yang digunakan
📞
Hubungi
  • Alamat email profesional
  • Pautan GitHub / LinkedIn
  • Pautan sosial lain (Twitter, Instagram)
  • Nombor telefon (opsional)
Tulis 4-6 projek yang akan dipaparkan. Untuk setiap projek, tulis tajuk, teknologi, dan penerangan ringkas.

🗒 Struktur Halaman Portfolio

Berikut adalah rajah struktur portfolio dan bagaimana halaman-halaman dihubungkan:

Struktur Navigasi Portfolio
                         +-------------------+
                         |     index.html     |
                         |    (Homepage)      |
                         +--------+----------+
                                  |
             +--------------------+--------------------+
             |                    |                    |
             v                    v                    v
     +--------------+    +--------------+    +----------------+
     |  about.html  |    | projects.html|    |  contact.html  |
     |  (About)     |    |  (Projects)  |    |  (Contact)     |
     +--------------+    +--------------+    +----------------+
             |                    |                    |
             +--------------------+--------------------+
                                  |
                                  v
                         +-------------------+
                         |   blog.html (?)   |
                         |    (Blog)         |
                         +-------------------+

      Setiap halaman berkongsi:
      +-------------------------------------------+
      |              NAVBAR (sama)                 |
      +-------------------------------------------+
      |           KANDUNGAN (berbeza)              |
      +-------------------------------------------+
      |              FOOTER (sama)                 |
      +-------------------------------------------+

Struktur Fail Projek

portfolio-saya/ │── index.html <-- Laman utama │── about.html <-- Tentang saya │── projects.html <-- Projek saya │── contact.html <-- Hubungi saya │── blog.html <-- Blog (opsional) │── style.css <-- Gaya dikongsi │── images/ <-- Folder gambar │── profile.jpg │── projek1.jpg │── projek2.jpg

Struktur Kandungan Setiap Halaman

HalamanBahagian UtamaElemen Khas
Homepage Hero, Intro, Featured Projects, Skills, Footer Call-to-action buttons, animasi hero
About Profil, Bio, Skills Bar, Experience Timeline Progress bar kemahiran, foto profil
Projects Grid Projek (3 kolum), Filter, Pagination Kad projek dengan gambar, hover effects
Contact Borang, Info Hubungi, Social Links Form validation, input styling
Blog (opsional) Senarai Entri, Sidebar, Kategori Kad artikel, tarikh, tag

✅ Kriteria Selesai

Portfolio anda dianggap siap apabila memenuhi kriteria berikut. Guna senarai ini untuk semak kemajuan.

☐
Struktur Asas3-5 halaman HTML wujud dan berfungsi
☐
Navigasi KonsistenSemua halaman ada navbar dan footer yang sama
☐
Semua Pautan BerfungsiTiada broken links antara halaman
☐
CSS DikongsiSemua halaman guna fail style.css yang sama
☐
ResponsifCantik di desktop, tablet, dan telefon
☐
Borang BerfungsiSemua field ada label, validation, dan submit
☐
Kandungan LengkapBio, skills, projek, dan info hubungi diisi
☐
Personal BrandWarna, font, dan tone yang konsisten
☐
Mobile NavNavigasi berfungsi di skrin kecil (hamburger menu)
☐
Kod BersihHTML dan CSS teratur, mudah dibaca, guna inden yang betul
Sebelum Hantar / Kongsi

Semak semula semua halaman satu persatu. Buka portfolio di telefon anda. Minta rakan atau pensyarah cuba navigasi portfolio — jika mereka keliru, anda perlu baiki. Pastikan semua maklumat hubungi tepat dan profesional.

💡 Inspirasi & Rujukan

Gunakan AI untuk mencari inspirasi portfolio. Salin dan ubah suai prompt berikut:

Prompt 1: Cari Inspirasi Portfolio Developer
"Cari 5 contoh portfolio web developer yang menggunakan dark theme. Huraikan apa yang menjadikan setiap portfolio ini menarik dari segi reka bentuk, susun atur, dan kandungan. Berikan pautan jika ada."
Prompt 2: Portfolio Minimalis
"Saya nak reka portfolio peribadi yang minimalis dan profesional. Cadangkan susun atur, palet warna, dan jenis kandungan yang sesuai untuk seorang junior web developer."
Prompt 3: Portfolio Kreatif
"Cadangkan idea portfolio kreatif untuk graphic designer yang juga pandai coding. Saya nak portfolio yang menonjolkan kedua-dua kemahiran reka bentuk dan pembangunan."
Prompt 4: Bandingkan Portfolio
"Bandingkan portfolio untuk web developer vs graphic designer. Apa bezanya dari segi susun atur, kandungan, dan penekanan visual? Apa yang perlu saya sertakan jika saya kedua-duanya?"
Prompt 5: Trend Portfolio Terkini
"Apa trend reka bentuk portfolio terkini untuk tahun 2026? Beri contoh elemen seperti mikroanimasi, tipografi berani, mod gelap, dan grid asimetri. Bagaimana saya boleh gunakan trend ini tanpa nampak 'over-designed'?"
Tip Carian

Di AI chat, minta ia cari rujukan portfolio dan analisa apa yang buatkan portfolio itu berkesan. Jangan hanya tiru — fahami kenapa reka bentuk itu berfungsi, dan adaptasi mengikut personaliti anda sendiri. Gunakan prompt seperti: "Analisa 3 portfolio terbaik yang anda tahu. Apa elemen reka bentuk yang boleh saya adaptasi untuk portfolio saya sendiri?"

📝 Nota & Idea

Apa lagi yang anda nak tambah selain dari yang disenaraikan?
Apa yang anda rasa mungkin sukar? Tulis supaya anda boleh fokus semasa sesi.
Bila anda sasarkan portfolio ini siap?