Proyek Puncak: Membangun Website Portofolio Pribadi yang Profesional

Halo Sobat Jurnal Coding! Coba hentikan aktivitasmu sejenak, lihat ke belakang, dan sadari seberapa jauh perjalananmu telah berkembang.

Kamu memulai dari sekadar ketakutan melihat layar hitam. Lalu kamu berhasil menulis "Hello World", memahami logika percabangan, membuat kalkulator diskon, membangun tombol Dark Mode, merekam data di LocalStorage, hingga memahami cara membuat desain yang responsif di layar HP. Kamu bukan lagi seorang pemula awam; kamu adalah seorang Web Developer Junior yang sangat potensial!

Namun, di industri teknologi, perusahaan atau klien tidak akan mempekerjakanmu hanya karena kamu berkata, "Saya sudah selesai membaca tutorial Jurnal Coding." Mereka butuh bukti nyata. Mereka ingin melihat karyamu.

Oleh karena itu, hari ini kita akan merakit proyek paling penting dalam karirmu: Membangun Website Portofolio (CV Digital) Pribadimu Sendiri. Proyek ini akan menyatukan semua potongan puzzle ilmu yang selama ini kamu kumpulkan menjadi sebuah mahakarya visual.

### Merancang Arsitektur Portofolio

Sebuah website portofolio profesional biasanya terdiri dari 3 bagian (section) utama yang dirancang menggunakan keajaiban CSS Flexbox. Mari kita susun kerangkanya:

1. Hero Section (Bagian Penyambutan)
Ini adalah area paling atas. Kita akan menggunakan Flexbox untuk menempatkan Foto Profilmu di sebelah kiri, dan Teks Sapaan Besar (Nama dan Keahlianmu) di sebelah kanan.
2. Skill Section (Daftar Keahlian)
Di sini kita akan menjejerkan beberapa kotak elegan berbahan kaca transparan (Glassmorphism) yang berisi logo HTML, CSS, dan JavaScript.
3. Project Showcase (Pameran Karya)
Ini adalah tempat kamu memajang tautan ke aplikasi yang sudah pernah kamu buat (seperti Game Tebak Angka dan Aplikasi Catatan Anti Hilang).

### Kepingan Kode Mahakarya (HTML & Flexbox)

Siapkan file index.html dan style.css barumu. Berikut adalah kerangka sakti untuk membuat bagian Header dan Hero Section agar tampil rapi dan responsif.

    Portofolioku.

        Tentang

        Proyek

Halo, Saya Budi Santoso
Saya seorang Web Developer Junior yang sangat bersemangat mengubah ide menjadi kode yang hidup di internet.

Lalu, kita bumbui dengan sihir penataan CSS Flexbox dan Media Queries agar terlihat cantik di HP:

/* DI DALAM FILE CSS */

body {

    background-color: #121212;

    color: #ffffff;

    font-family: sans-serif;

    margin: 0; padding: 0;

}

/* Flexbox untuk Navigasi (Menyebar ke Kiri dan Kanan) */

.navigasi-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 50px;

    background: rgba(255, 255, 255, 0.05); /* Efek Kaca */

}

/* Flexbox untuk Hero Section (Menjejerkan Teks dan Foto) */

.hero-flex {

    display: flex;

    justify-content: space-around;

    align-items: center;

    padding: 50px;

    height: 70vh;

}

/* MAGIC RESPONSIVE UNTUK HP! */

@media (max-width: 768px) {

    .hero-flex {

        flex-direction: column-reverse; /* Foto akan pindah ke atas teks! */

        text-align: center;

        padding: 20px;

    }

}

### Sentuhan Akhir dan Peluncuran!

Bayangkan kode di atas. Pada layar laptop, foto dan namamu akan berjejer anggun menyamping. Namun, berkat keajaiban flex-direction: column-reverse di dalam Media Queries, saat situs portofoliomu dibuka di layar sempit HP seorang HRD, fotomu akan secara otomatis berpindah ke atas teks perkenalan, dengan posisi teks rata tengah yang sangat estetis!

Langkah terakhirmu sangat jelas: Jangan lupa sertakan kode JavaScript Dark Mode dan LocalStorage yang sudah kita buat pada artikel sebelumnya agar HRD yang melihat situsmu semakin terkesima.

Setelah semuanya sempurna, dorong (Push) folder proyek ini ke GitHub, dan luncurkan melalui GitHub Pages! Sekarang, di bagian profil LinkedIn kamu, kamu sudah memiliki alamat website resmi portofoliomu sendiri.

Selamat, Sobat Jurnal Coding! Kamu telah resmi menaklukkan tantangan Web Development Dasar. Teruslah berkarya, pantang menyerah saat melihat Error, dan jadikan internet taman bermainmu!