Cara Membuat Website Portfolio Profesional dengan HTML CSS dan JavaScript - Panduan Lengkap 2026

Kemarin saya coba melamar ke sebuah startup tech di Jakarta. CV sudah rapi, skill sudah oke, tapi pas interviewer tanya "Boleh lihat portfolio website-nya?", saya cuma bisa senyum tipis. Gak punya. Dan tau gak? Posisi itu akhirnya dikasih ke orang yang punya GitHub Pages sederhana tapi terstruktur. Momen itu bikin saya sadar: website portfolio itu bukan lagi optional, tapi mandatory.

Di tahun 2026, punya portfolio online itu sama pentingnya punya CV. Bahkan bisa dibilang lebih penting. Karena website portfolio bisa nunjukin bukan cuma apa yang kamu bisa, tapi juga bagaimana kamu mengerjakannya. Mulai dari design sense, coding skill, sampai attention to detail.

Nah, di panduan ini saya akan ajak kamu bikin website portfolio profesional dari nol. Gak pakai framework berat, gak pakai CMS ribet. Cukup HTML, CSS, dan JavaScript murni. Siap? Let's go!

Kenapa Harus Portfolio Website?

Sebelum masuk ke kode, coba pikirkan ini:

First impression itu real. Recruiter biasanya cuma butuh 6 detik pertama untuk nge-scan profil kamu. Website portfolio yang clean langsung bikin kamu keliatan pro.
Kontrol penuh atas brand kamu. Kamu gak tergantung sama format LinkedIn atau GitHub. Semua bisa kamu custom.
SEO-friendly. Dengan portfolio website yang proper, kamu bisa muncul di Google kalau recruiter search nama kamu.
Proof of work. Bukan cuma ngomong "bisa React", tapi langsung ditunjukin project-nya live.

Step 1: Persiapan - Apa yang Kamu Butuhkan

Oke, sebelum nulis kode, siapkan dulu beberapa hal:

Code editor - VS Code masih jadi pilihan terbaik di 2026. Gratis, ringan, banyak extension.
Browser - Chrome atau Firefox untuk testing.
Domain dan hosting - Untuk deploy, saya rekomendasikan GitHub Pages (gratis) atau kalau mau yang lebih pro, coba Vercel atau Netlify. Kalau butuh domain custom murah, Namecheap atau Niagahoster bisa jadi opsi bagus.
Git - Untuk version control. Kalau belum install, download dari git-scm.com.

Selanjutnya, buat folder project baru dengan struktur seperti ini:

portfolio/
 |-- index.html
 |-- css/
 | |-- style.css
 |-- js/
 | |-- main.js
 |-- assets/
 |-- images/
 |-- resume.pdf

Struktur yang rapi dari awal itu penting banget. Percaya deh, project yang berantakan di lokal cuma bakal makin berantakan di production.

Step 2: Membangun Struktur HTML

HTML itu tulang punggung website kamu. Kita mulai dari file index.html dengan struktur yang semantic dan SEO-friendly:

<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Portfolio profesional - Full Stack Developer">
 <title>Nama Kamu - Full Stack Developer</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>

 <!-- Navigation -->
 <nav class="navbar" id="navbar">
 <div class="nav-container">
 <a href="#" class="logo">NK</a>
 <ul class="nav-links">
 <li><a href="#about">Tentang</a></li>
 <li><a href="#projects">Project</a></li>
 <li><a href="#skills">Skills</a></li>
 <li><a href="#contact">Kontak</a></li>
 </ul>
 <button class="hamburger" id="hamburger" aria-label="Menu">
 <span></span>
 </button>
 </div>
 </nav>

 <!-- Hero Section -->
 <header class="hero" id="home">
 <div class="hero-content">
 <h1>Halo, saya <span class="highlight">Nama Kamu</span></h1>
 <p class="tagline">Full Stack Developer yang passionate bikin web application keren</p>
 <div class="hero-buttons">
 <a href="#projects" class="btn btn-primary">Lihat Project</a>
 <a href="#contact" class="btn btn-outline">Hubungi Saya</a>
 </div>
 </div>
 </header>

 <!-- About Section -->
 <section class="about" id="about">
 <h2>Tentang Saya</h2>
 <div class="about-content">
 <img src="assets/images/foto.jpg" alt="Foto Profil" class="profile-img">
 <div class="about-text">
 <p>Saya adalah Full Stack Developer dengan 3+ tahun pengalaman.
 Fokus di React, Node.js, dan PostgreSQL. Suka banget nge-build
 yang solve real problem.</p>
 </div>
 </div>
 </section>

 <!-- Projects Section -->
 <section class="projects" id="projects">
 <h2>Project Terbaru</h2>
 <div class="project-grid">
 <article class="project-card">
 <img src="assets/images/project1.jpg" alt="E-Commerce App">
 <div class="project-info">
 <h3>E-Commerce Dashboard</h3>
 <p>Dashboard admin untuk toko online dengan real-time analytics</p>
 <div class="tech-stack">
 <span>React</span>
 <span>Node.js</span>
 <span>MongoDB</span>
 </div>
 <div class="project-links">
 <a href="#">Live Demo</a>
 <a href="#">GitHub</a>
 </div>
 </div>
 </article>
 </div>
 </section>

 <!-- Skills Section -->
 <section class="skills" id="skills">
 <h2>Skills & Tools</h2>
 <div class="skills-grid">
 <div class="skill-item">
 <h3>Frontend</h3>
 <ul>
 <li>HTML5 / CSS3</li>
 <li>JavaScript (ES6+)</li>
 <li>React / Next.js</li>
 <li>Tailwind CSS</li>
 </ul>
 </div>
 <div class="skill-item">
 <h3>Backend</h3>
 <ul>
 <li>Node.js / Express</li>
 <li>Python / Django</li>
 <li>PostgreSQL</li>
 <li>Redis</li>
 </ul>
 </div>
 </div>
 </section>

 <!-- Contact Section -->
 <section class="contact" id="contact">
 <h2>Hubungi Saya</h2>
 <form class="contact-form" id="contactForm">
 <input type="text" placeholder="Nama" required>
 <input type="email" placeholder="Email" required>
 <textarea placeholder="Pesan" rows="5" required></textarea>
 <button type="submit" class="btn btn-primary">Kirim Pesan</button>
 </form>
 </section>

 <footer>
 <p>&copy; 2026 Nama Kamu. Dibuat dengan </p>
 </footer>

 <script src="js/main.js"></script>
</body>
</html>

Perhatikan beberapa hal penting di HTML di atas:

Semantic tags seperti <nav>, <section>, <article> - ini bagus untuk SEO dan accessibility.
meta description yangdeskriptif - Google akan pakai ini di search results.
aria-label di hamburger button - untuk screen reader accessibility.
Struktur heading yang hierarchical - h1 untuk title, h2 untuk section, h3 untuk subsection.

Step 3: Styling dengan CSS yang Modern

Sekarang saatnya bikin tampilannya keliatan profesional. Saya pakai CSS custom properties biar gampang maintain:

/* CSS Custom Properties */
:root {
 --primary: #2563eb;
 --primary-dark: #1d4ed8;
 --bg-dark: #0f172a;
 --bg-card: #1e293b;
 --text-primary: #f8fafc;
 --text-secondary: #94a3b8;
 --accent: #38bdf8;
 --radius: 12px;
 --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Reset & Base */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 scroll-padding-top: 70px;
}

body {
 font-family: 'Inter', system-ui, sans-serif;
 background-color: var(--bg-dark);
 color: var(--text-primary);
 line-height: 1.7;
}

/* Navbar */
.navbar {
 position: fixed;
 top: 0;
 width: 100%;
 background: rgba(15, 23, 42, 0.95);
 backdrop-filter: blur(10px);
 z-index: 1000;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 1.5rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 60px;
}

.logo {
 font-size: 1.5rem;
 font-weight: 800;
 color: var(--accent);
 text-decoration: none;
}

.nav-links {
 display: flex;
 list-style: none;
 gap: 2rem;
}

.nav-links a {
 color: var(--text-secondary);
 text-decoration: none;
 transition: color 0.3s;
}

.nav-links a:hover {
 color: var(--accent);
}

/* Hero Section */
.hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 2rem;
}

.hero h1 {
 font-size: clamp(2rem, 5vw, 3.5rem);
 margin-bottom: 1rem;
}

.highlight {
 color: var(--accent);
}

.tagline {
 font-size: 1.2rem;
 color: var(--text-secondary);
 margin-bottom: 2rem;
}

/* Buttons */
.btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 border-radius: var(--radius);
 text-decoration: none;
 font-weight: 600;
 transition: all 0.3s;
}

.btn-primary {
 background: var(--primary);
 color: white;
}

.btn-primary:hover {
 background: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

.btn-outline {
 border: 2px solid var(--text-secondary);
 color: var(--text-primary);
}

.btn-outline:hover {
 border-color: var(--accent);
 color: var(--accent);
}

/* Sections */
section {
 padding: 5rem 1.5rem;
 max-width: 1100px;
 margin: 0 auto;
}

section h2 {
 font-size: 2rem;
 margin-bottom: 2rem;
 text-align: center;
}

/* Project Cards */
.project-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2rem;
}

.project-card {
 background: var(--bg-card);
 border-radius: var(--radius);
 overflow: hidden;
 transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
 transform: translateY(-6px);
 box-shadow: var(--shadow);
}

.project-card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}

.project-info {
 padding: 1.5rem;
}

.project-info h3 {
 margin-bottom: 0.5rem;
}

.tech-stack {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 margin: 1rem 0;
}

.tech-stack span {
 background: rgba(56, 189, 248, 0.15);
 color: var(--accent);
 padding: 0.25rem 0.75rem;
 border-radius: 20px;
 font-size: 0.85rem;
}

.project-links {
 display: flex;
 gap: 1rem;
}

.project-links a {
 color: var(--accent);
 text-decoration: none;
}

/* Skills Grid */
.skills-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
}

.skill-item {
 background: var(--bg-card);
 padding: 1.5rem;
 border-radius: var(--radius);
}

.skill-item h3 {
 color: var(--accent);
 margin-bottom: 1rem;
}

.skill-item ul {
 list-style: none;
}

.skill-item li {
 padding: 0.5rem 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contact Form */
.contact-form {
 max-width: 600px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.contact-form input,
.contact-form textarea {
 padding: 0.85rem 1rem;
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: var(--radius);
 background: var(--bg-card);
 color: var(--text-primary);
 font-size: 1rem;
 font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Responsive */
.hamburger {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
}

.hamburger span {
 display: block;
 width: 24px;
 height: 2px;
 background: var(--text-primary);
 transition: all 0.3s;
}

@media (max-width: 768px) {
 .nav-links {
 display: none;
 position: absolute;
 top: 60px;
 left: 0;
 right: 0;
 background: var(--bg-dark);
 flex-direction: column;
 padding: 1rem 1.5rem;
 gap: 1rem;
 }

 .nav-links.active {
 display: flex;
 }

 .hamburger {
 display: block;
 }

 .project-grid {
 grid-template-columns: 1fr;
 }
}

Poin penting dari CSS di atas:

CSS Custom Properties bikin theme gampang diubah. Tinggal ganti warna di :root dan seluruh website ikut berubah.
clamp() untuk typography - responsive font size tanpa banyak media query.
backdrop-filter di navbar - efek glass yang modern.
Grid dengan auto-fit - layout otomatis adaptif tanpa hardcode breakpoint.
Hover effects yang subtle tapi bikin UI hidup.

Step 4: Interaktivitas dengan JavaScript

Website tanpa interaksi itu kayak motor tanpa mesin. Kita tambahin beberapa fitur penting:

// Mobile Navigation Toggle
const hamburger = document.getElementById('hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
 navLinks.classList.toggle('active');
 hamburger.classList.toggle('open');


});

// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
 const target = document.querySelector(this.getAttribute('href'));
 if (target) {
 target.scrollIntoView({ behavior: 'smooth' });
 navLinks.classList.remove('active');
 }
 });
});

// Navbar Scroll Effect
window.addEventListener('scroll', () => {
 const navbar = document.getElementById('navbar');
 if (window.scrollY > 50) {
 navbar.style.background = 'rgba(15, 23, 42, 0.98)';
 navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.3)';
 } else {
 navbar.style.background = 'rgba(15, 23, 42, 0.95)';
 navbar.style.boxShadow = 'none';
 }
});

// Contact Form
const form = document.getElementById('contactForm');
if (form) {
 form.addEventListener('submit', (e) => {
 e.preventDefault();
 alert('Terima kasih! Pesan kamu sudah diterima.');
 form.reset();
 });
}

Fitur-fitur di atas cukup untuk bikin portfolio website terasa profesional:

Mobile navigation toggle - hamburger menu untuk layar kecil.
Smooth scroll - navigasi antar section tanpa loncat.
Navbar scroll effect - background berubah saat scroll, bikin navbar tetap readable.
Contact form handling - minimal ada feedback saat user submit form.

Step 5: Deploy ke GitHub Pages

Website udah jadi, saatnya go live! GitHub Pages gratis dan simpel:

# Init Git
 git init
 git add .
 git commit -m "Initial commit: Portfolio website"

# Buat repo baru di GitHub, lalu:
 git remote add origin https://github.com/username/portfolio.git
 git branch -M main
 git push -u origin main

Setelah push, aktifkan GitHub Pages di Settings repo kamu. Pilih branch main dan folder / (root). Dalam beberapa menit, website kamu sudah bisa diakses di https://username.github.io/portfolio/.

Tips Tambahan untuk Portfolio yang Memukau

Custom domain - Beli domain murah (~Rp50rb/tahun) dan point ke GitHub Pages. Nama domain profesional lebih meyakinkan recruiter.
Lighthouse score - Buka Chrome DevTools, tab Lighthouse. Targetin score 90+ di semua kategori. Ini nunjukin kamu paham web performance.
Analytics - Tambah Google Analytics atau Plausible buat track visitor. Tau dari mana audience kamu datang.
Update berkala - Portfolio yang fresh nunjukin kamu aktif develop. Update setiap ada project baru.
Testimonial - Kalau ada, tambahin quote dari client atau kolaborator. Social proof itu powerful.

Kesimpulan

Membuat portfolio website profesional itu gak harus rumit. Dengan HTML, CSS, dan JavaScript murni, kamu sudah bisa bikin website yang clean, responsive, dan performa tinggi. Yang penting:

Struktur yang semantic - pakai tag HTML yang benar untuk SEO dan accessibility.
Desain yang clean - CSS custom properties, typography yang konsisten, dan whitespace yang cukup.
Interaksi yang smooth - JavaScript untuk mobile nav, smooth scroll, dan efek visual.
Deployment yang mudah - GitHub Pages atau Vercel, gratis dan cepat.

Sekarang giliran kamu. Buka VS Code, buat folder baru, dan mulai coding. Portfolio pertama kamu gak harus sempulan u2014 yang penting mulai. Selamat coding! ud83dude80