## 1. Desain Arsitektur

Website portofolio ini menggunakan arsitektur statis vanilla frontend tanpa framework, sesuai permintaan pengguna (hanya HTML, CSS, dan JavaScript). Tidak ada backend atau database.

```mermaid
flowchart LR
    A["Browser Pengguna (HR)"] --> B["index.html<br/>(Struktur & Konten)"]
    B --> C["style.css<br/>(Styling & Animasi)"]
    B --> D["script.js<br/>(Interaksi & Scroll Effect)"]
    D --> E["Interop DOM<br/>(Smooth Scroll, Animasi on-scroll, Mobile Menu)"]
    C --> F["Google Fonts CDN<br/>(Tipografi)"]
    B --> G["Lucide Icons CDN<br/>(Ikon SVG)"]
```

## 2. Deskripsi Teknologi

- **Frontend**: Vanilla HTML5 + CSS3 + JavaScript (ES6+) — tanpa framework React/Vue, sesuai permintaan user
- **Styling**: Native CSS dengan CSS Variables untuk konsistensi tema (Dark Mode + gradient Biru-Ungu)
- **Tipografi**: Google Fonts (Space Grotesk untuk display, Plus Jakarta Sans untuk body) — di-load via CDN
- **Ikon**: Lucide Icons via CDN (skrip ringkas, SVG-based)
- **Asset Gambar**: Placeholder profil & project menggunakan text-to-image API sesuai panduan, atau placeholder yang bisa diganti user
- **Initialization**: Tidak perlu build tool / npm — file-file diletakkan langsung di root folder, bisa di-buka langsung via browser atau static server
- **Backend**: Tidak ada (pure static frontend)
- **Database**: Tidak ada (data kandidat di-hardcode dalam HTML — mudah diedit user)

## 3. Definisi Rute / File

Website ini Single Page, jadi hanya ada satu entry point utama dengan navigasi anchor ke section.

| File / Hash Route | Tujuan |
|-------------------|--------|
| `index.html` | Halaman utama (entry point semua section) |
| `#hero` | Section awal — sapaan, nama, CTA |
| `#about` | Section Tentang Saya — biodata & quick stats |
| `#skills` | Section Keahlian — progress bar skill |
| `#projects` | Section Proyek — 2 kartu proyek unggulan |
| `#contact` | Section Kontak — email, WA, sosial media |
| `style.css` | File styling lengkap (theming, layout, animasi, responsif) |
| `script.js` | File interaksi (smooth scroll, animate on scroll, mobile menu, scroll-to-top) |

## 4. Definisi API (Tidak Berlaku)

Tidak ada backend / API eksternal. Form kontak menggunakan `mailto:` link untuk membuka email client pengguna.

## 5. Diagram Arsitektur Server (Tidak Berlaku)

Tidak ada server. Proyek di-host sebagai static file (Netlify / Vercel / GitHub Pages).

## 6. Data Model

Data kandidat disimpan langsung di elemen HTML (tidak terpisah). Berikut struktur data yang akan di-wireframe di dalam markup:

### 6.1 Data Model Definition

```mermaid
erDiagram
    PROFILE {
        string namaLengkap
        string posisi
        string tagline
        string deskripsi
        string fotoUrl
        string lokasi
        number totalProyek
        string pengalaman
    }
    SKILL {
        string nama
        number persentase
        string kategori
    }
    PROJECT {
        string judul
        string deskripsi
        string thumbnailUrl
        string[] techStack
        string demoUrl
        string sourceUrl
    }
    CONTACT {
        string email
        string whatsapp
        string github
        string linkedin
    }
    PROFILE ||--o{ SKILL : memiliki
    PROFILE ||--o{ PROJECT : membuat
    PROFILE ||--|| CONTACT : terhubung_via
```

### 6.2 Initial Data (yang akan diisi ke HTML)

Tabel berikut berisi data placeholder yang nantinya dapat diganti user sesuai data pribadi:

| Entitas | Field | Nilai Placeholder |
|--------|-------|-------------------|
| Profile | namaLengkap | [Nama Anda] |
| Profile | posisi | Frontend Developer |
| Profile | tagline | Saya membangun antarmuka web yang modern, responsif, dan menyenangkan digunakan. |
| Profile | deskripsi | Lulusan baru / pemula yang bersemangat di bidang Frontend Development. Memiliki pemahaman tentang HTML, CSS, JavaScript dan telah mengerjakan 2 proyek pribadi untuk mengasah kemampuan. Senang mempelajari teknologi baru dan selalu berusaha menulis kode yang bersih serta terstruktur. |
| Profile | lokasi | [Kota, Negara] |
| Profile | totalProyek | 2 |
| Profile | pengalaman | Pemula / Fresh Graduate |
| Skill | kategori=Frontend | HTML, CSS, JavaScript, Responsive Design |
| Skill | kategori=Tools | Git, VS Code, Figma |
| Skill | kategori=Soft | Komunikasi, Problem Solving, Kerja Tim |
| Project 1 | judul | Proyek 1: [Nama Proyek] |
| Project 1 | deskripsi | Deskripsi singkat proyek pertama Anda — masalah yang diselesaikan, fitur utama, dan peran Anda. |
| Project 1 | techStack | [HTML, CSS, JS] |
| Project 2 | judul | Proyek 2: [Nama Proyek] |
| Project 2 | deskripsi | Deskripsi singkat proyek kedua Anda — tantangan, solusi, dan teknologi yang dipakai. |
| Project 2 | techStack | [HTML, CSS, JS] |
| Contact | email | [email.anda@example.com] |
| Contact | whatsapp | [+62 8xx-xxxx-xxxx] |
| Contact | github | [github.com/username] |
| Contact | linkedin | [linkedin.com/in/username] |

## 7. Struktur Folder Proyek

```
d:\portofolio\
├── .trae\
│   └── documents\
│       ├── prd-portofolio.md
│       └── arsitektur-teknis.md
├── index.html          ← Struktur utama semua section
├── style.css           ← Styling, theming, animasi, responsive
├── script.js           ← Interaktivitas (smooth scroll, animasi, menu)
└── assets\             ← (opsional, dibuat jika perlu untuk gambar)
    └── (gambar profil, screenshot proyek)
```
