## 1. Gambaran Produk

Website portofolio pribadi untuk Frontend Developer yang dirancang khusus untuk menarik perhatian HR (Human Resources) dalam proses rekrutmen. Website ini menampilkan identitas, keahlian, proyek, dan kontak secara visual menarik dengan gaya Dark Mode.

- Tujuan: Membantu HR mengenali profil kandidat secara cepat dan profesional
- Target pengguna: HR, recruiter, dan hiring manager
- Nilai utama: Tampilan yang modern, cepat diakses, dan mudah menelusuri informasi kandidat

## 2. Fitur Utama

### 2.1 Peran Pengguna

Website ini bersifat statis (tanpa login) untuk keperluan showcase profil.

### 2.2 Modul Fitur

Website berupa Single Page Application (SPA) satu halaman dengan modul-modul berikut:

1. **Hero Section**: Sapaan pembuka, nama lengkap, posisi yang dilamar, CTA (Call to Action), dan foto profil
2. **Tentang Saya**: Biodata singkat, deskripsi personal, dan nilai yang ditawarkan
3. **Keahlian (Skills)**: Daftar skill teknis Frontend dengan progress bar visual
4. **Proyek (Projects)**: Galeri 2 proyek unggulan dengan gambar, deskripsi, tag teknologi, dan tautan
5. **Kontak (Contact)**: Email, nomor telepon, sosial media (GitHub, LinkedIn), dan lokasi
6. **Navigasi**: Sticky navbar untuk berpindah antar section dengan smooth scroll

### 2.3 Detail Halaman

| Nama Halaman | Nama Modul | Deskripsi Fitur |
|--------------|------------|-----------------|
| Landing Page (Single Page) | Hero Section | Animasi fade-in saat load, gradient text pada nama, tombol "Lihat Proyek" & "Unduh CV", efek parallax ringan |
| Landing Page (Single Page) | Tentang Saya | Card dengan border gradient, foto di samping deskripsi, quick stats (jumlah proyek, pengalaman) |
| Landing Page (Single Page) | Keahlian | Progress bar dengan animasi fill saat scroll, kategori skill (Frontend, Tools, Soft Skills) |
| Landing Page (Single Page) | Proyek | Card grid 2 kolom, hover effect dengan glow, thumbnail project, tag tech stack, link demo & source |
| Landing Page (Single Page) | Kontak | Card kontak dengan ikon, link sosial media, form email sederhana (mailto) |
| Landing Page (Single Page) | Navigasi | Sticky navbar, smooth scroll, highlight section aktif, mobile hamburger menu |
| Landing Page (Single Page) | Footer | Copyright, sosial media kecil, tombol scroll to top |

## 3. Alur Utama Pengguna

Pengguna (HR) membuka website → melihat Hero Section dengan identitas utama → scroll atau klik navigasi ke section Tentang Saya → melihat Keahlian → membuka detail Proyek → menghubungi melalui Kontak.

```mermaid
flowchart TD
    A["HR membuka website portofolio"] --> B["Melihat Hero Section<br/>(Nama, posisi, CTA)"]
    B --> C["Scroll / klik menu navigasi"]
    C --> D["Tentang Saya<br/>(Profil singkat)"]
    D --> E["Keahlian<br/>(Skill teknis)"]
    E --> F["Proyek<br/>(2 proyek unggulan)"]
    F --> G["Kontak<br/>(Email, sosial media)"]
    G --> H["HR menghubungi kandidat"]
```

## 4. Desain Antarmuka Pengguna

### 4.1 Gaya Desain

- **Tema**: Dark Mode (latar gelap dengan elemen terang)
- **Warna Utama**:
  - Primary: Biru Elektrik (#3B82F6)
  - Secondary: Ungu (#8B5CF6)
  - Aksen: Gradient Biru-Ungu untuk highlight
  - Netral: Deep Navy (#0F172A) sebagai latar, Slate (#1E293B) untuk card
- **Tombol**: Rounded-lg, gradient border, hover glow effect, transition smooth
- **Tipografi**:
  - Display/Judul: Font Space Grotesk atau Poppins (bold, modern)
  - Body: Font Inter atau Plus Jakarta Sans (readable, clean)
  - Skala ukuran: 12px / 14px / 16px / 20px / 32px / 56px
- **Layout**: Card-based dengan spacing generous, max-width 1200px, centered
- **Ikon**: Lucide-style line icons, konsisten tipis dan modern
- **Efek Khusus**:
  - Glow / ambient blur di belakang card
  - Grain texture overlay subtle
  - Glassmorphism pada navbar sticky

### 4.2 Ringkasan Desain Halaman

| Nama Halaman | Nama Modul | Elemen UI |
|--------------|------------|-----------|
| Landing Page | Hero Section | Layout split (kiri: teks + CTA, kanan: foto/avatar), gradient text pada nama, animasi typing subtitle, decorative blob gradient di background |
| Landing Page | Tentang Saya | Card dengan border gradient, 2 kolom (foto + teks), bullet point keunggulan, mini badges untuk quick info |
| Landing Page | Keahlian | 3 kategori skill (Frontend / Tools / Soft Skills), progress bar animate on scroll, percentage label, card per kategori |
| Landing Page | Proyek | Grid 2 kolom responsif, card project dengan image thumbnail, overlay gradient saat hover, tech stack pill tags, tombol Demo & Source |
| Landing Page | Kontak | Info kontak dengan card individual per channel (email, WA, GitHub, LinkedIn), decorative icons, CTA email |
| Landing Page | Navbar & Footer | Navbar: logo kiri + menu kanan + hamburger mobile; Footer: copyright centang dengan social icons |

### 4.3 Responsivitas

- **Pendekatan**: Desktop-first, responsif untuk tablet & mobile
- **Breakpoint**:
  - Desktop (≥1024px): Layout maksimal, grid 2 kolom
  - Tablet (768px - 1023px): Grid disesuaikan, spacing dikurangi
  - Mobile (<768px): Single kolom, hamburger menu, typography disesuaikan
- **Optimasi Touch**: Ukuran tombol minimum 44x44px, jarak antar elemen cukup

### 4.4 Panduan 3D (Tidak Berlaku)

Tidak ada adegan 3D pada proyek ini.
