Daftar Isi
- Kenapa Harus Web Portofolio? Apa Gak Cukup LinkedIn atau Behance?
- Apa yang Dibutuhkan untuk Membuat Web Portofolio?
- 1. HTML (HyperText Markup Language)
- 2. Python (dengan Framework Flask)
- Langkah-Langkah Membangun Web Portofolio Profesional
- 🔧 1. Siapkan Tools
- 📁 2. Struktur Folder
- 💻 3. Buat File app.py
- 🧱 4. Buat Halaman HTML (index.html)
- 🎨 5. Tambahkan CSS (style.css)
- 🚀 6. Jalankan Web Portofoliomu
- Bagaimana Menambahkan Fitur Dinamis?
- Tips Agar Web Portofoliomu Lebih Profesional
- Kesimpulan
Di era digital seperti sekarang, punya web portofolio pribadi bukan lagi sekadar pilihan — tapi keharusan, apalagi kalau kamu ingin meniti karier di bidang teknologi, desain, atau kreatif digital. Portofolio yang profesional bisa jadi pintu masuk untuk mendapatkan klien, kerja freelance, atau bahkan tawaran kerja dari perusahaan impian.
Nah, kabar baiknya: kamu bisa membangun web portofolio sendiri dengan HTML dan Python, bahkan tanpa harus jago coding dulu!
Yuk, kita bahas langkah-langkahnya dengan cara yang sederhana tapi powerful.
baca juga : Kenapa Arsitektur Perangkat Lunak Mempengaruhi Kinerja Aplikasi?
Kenapa Harus Web Portofolio? Apa Gak Cukup LinkedIn atau Behance?
Pertanyaan bagus.
LinkedIn dan platform lain memang bagus untuk branding, tapi web portofolio pribadi memberikan kesan yang lebih profesional dan personal. Di sana, kamu bisa:
- Menampilkan proyek terbaik dengan gaya unik kamu
- Membangun personal branding sesuai keinginan
- Menambahkan blog atau pemikiran pribadi
- Meningkatkan visibilitas lewat SEO Google
- Memberi kesan “serius” ke calon klien atau recruiter
Dengan website sendiri, kamu nggak tergantung pada platform orang lain. Kamu pegang kendali penuh.
Apa yang Dibutuhkan untuk Membuat Web Portofolio?
Kamu cuma butuh dua “alat utama”:
1. HTML (HyperText Markup Language)
Digunakan untuk membuat struktur tampilan web, seperti header, konten, gambar, tombol, dan sebagainya.
2. Python (dengan Framework Flask)
Digunakan sebagai backend atau pengatur logika — misalnya untuk menghubungkan dengan form kontak, database, atau fitur dinamis lainnya.
Langkah-Langkah Membangun Web Portofolio Profesional
Berikut panduan step-by-step untuk membangun web portofolio sederhana tapi profesional:
🔧 1. Siapkan Tools
Install Python jika belum, lalu install Flask:
bashCopyEditpip install flask
Gunakan text editor seperti VS Code untuk mengedit kode, dan browser favoritmu untuk melihat hasilnya.
📁 2. Struktur Folder
Buat struktur proyek seperti ini:
bashCopyEdit/portofolio
│
├── app.py
├── /templates
│ └── index.html
├── /static
├── style.css
└── gambar-proyek/
💻 3. Buat File app.py
pythonCopyEditfrom flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
Ini akan menampilkan file HTML saat kamu buka halaman utama.
🧱 4. Buat Halaman HTML (index.html)
htmlCopyEdit<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Portofolio Saya</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<header>
<h1>Halo, saya Raka</h1>
<p>Fullstack Developer & Desainer UI/UX</p>
</header>
<section id="projects">
<h2>Proyek Terbaru</h2>
<div class="project">
<h3>Aplikasi To-Do List</h3>
<p>Web app untuk mencatat tugas harian, dibuat dengan Flask & SQLite.</p>
</div>
<!-- Tambah proyek lain di sini -->
</section>
<footer>
<p>Hubungi saya: raka@email.com</p>
</footer>
</body>
</html>
🎨 5. Tambahkan CSS (style.css)
cssCopyEditbody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #1e1e1e;
color: white;
padding: 40px;
text-align: center;
}
section {
padding: 20px;
}
.project {
background-color: #f9f9f9;
margin: 15px 0;
padding: 15px;
border-radius: 8px;
}
🚀 6. Jalankan Web Portofoliomu
Di terminal, jalankan:
bashCopyEditpython app.py
Buka browser dan akses:http://127.0.0.1:5000
Selamat! Portofoliomu sudah tampil online secara lokal.
Bagaimana Menambahkan Fitur Dinamis?
Ingin portofoliomu lebih hidup? Tambahkan fitur berikut:
- Form Kontak: Gunakan
Flask-WTFuntuk menerima pesan langsung dari website. - Halaman Dinamis: Buat halaman detail proyek menggunakan routing Python.
- Koneksi Database: Simpan data proyek atau testimoni menggunakan SQLite.
Contoh tambahan route di app.py:
pythonCopyEdit@app.route('/project/<nama>')
def project_detail(nama):
return f"Ini adalah halaman detail untuk proyek {nama}"
Tips Agar Web Portofoliomu Lebih Profesional
✅ Gunakan foto profil yang bagus dan bersih
✅ Tampilkan proyek yang benar-benar kamu kerjakan
✅ Tuliskan deskripsi singkat tapi jelas
✅ Tambahkan link ke GitHub, LinkedIn, atau CV PDF
✅ Responsive design — pastikan tampil bagus di HP juga
✅ Custom domain kalau sudah siap online
baca juga : Rektor Universitas Teknokrat Indonesia Nasrullah Yusuf Ikuti Munas Aptisi VII di Bandung
Kesimpulan
Membangun web portofolio profesional tidak harus mahal, sulit, atau butuh waktu lama. Dengan kombinasi HTML dan Python (Flask), kamu bisa membuat website yang tidak hanya menarik, tapi juga interaktif dan personal.
Ini bukan cuma proyek belajar, tapi investasi untuk masa depanmu. Siapa tahu, dari web portofolio inilah karier impianmu dimulai.
So, tunggu apa lagi? Yuk, mulai bangun portofoliomu hari ini juga! 🚀
penulis : Muhammad Anwar Fuadi