website-portofolio/docs/requirement.md

# PRD — Enterprise React Portfolio (Backend Developer Edition)

## 1. Overview
Website ini adalah aplikasi portofolio interaktif berbasis **React** yang dirancang untuk seorang **Backend Developer** dengan 3+ tahun pengalaman di industri perbankan (Java Spring Boot). Aplikasi ini dibangun dengan prinsip *Enterprise-Grade*: memiliki struktur folder yang *scalable*, keamanan yang ketat dari kerentanan web (OWASP), dan performa *rendering* tingkat tinggi.

Tujuan utama sistem ini adalah menampilkan rekam jejak penyelesaian masalah berskala *enterprise* (keamanan, skalabilitas, *microservices*), memamerkan keahlian sekunder di bidang *Mobile* dan *Frontend Development*, serta menyediakan sistem Admin (CMS) mandiri untuk mengelola konten.

## 2. Tech Stack & Infrastructure
Sistem mengadopsi ekosistem React modern dengan pendekatan *Server-Side Rendering* (SSR) dan *Static Site Generation* (SSG) untuk performa maksimal.

- **Framework:** Next.js (App Router).
- **Styling & UI:** Tailwind CSS + Framer Motion (untuk animasi transisi DOM yang dioptimalkan oleh GPU).
- **Backend / API:** Next.js Server Actions & Route Handlers.
- **Database & ORM:** PostgreSQL + Prisma ORM.
- **Image Storage:** Cloudinary.
- **Security & Validation:** Zod (validasi skema *End-to-End*), bcryptjs (Hashing).
- **Deployment:** Vercel (Frontend & Server Actions), Neon.tech/Supabase (Database).

## 3. Core Features

### 3.1. Public View (Visitor)
- **Hero Section:** Sapaan pembuka dengan *copywriting* yang menyoroti pengalaman *enterprise* (contoh: *"Building Secure, Scalable, Enterprise-Grade Systems. 3+ Years in Banking Tech."*). Dilengkapi animasi *reveal* dan tombol CTA menuju resume/kontak.
- **Experience & Timeline:** Garis waktu (*timeline*) interaktif yang menceritakan evolusi karir di industri perbankan dan pencapaian utama.
- **Tech Stack Showcase:** Menampilkan logo/ikon teknologi yang dikuasai, dikategorikan menjadi: *Enterprise Backend* (Java, Spring Boot, Kafka), *Database & Infra*, *Frontend*, dan *Mobile*.
- **Projects & Case Studies:** Galeri karya dengan fitur **Filter Kategori** (Semua, Backend, Frontend, Mobile). 
  - *Khusus Backend:* Menampilkan gambar *thumbnail* berupa **Diagram Arsitektur Sistem**, dengan metrik dampak (misal: "Meningkatkan performa API 40%").
  - *Khusus Mobile/Frontend:* Menampilkan UI *screenshot*.
- **Contact Section:** Formulir bagi pengunjung (Rekruiter/Klien) untuk mengirimkan penawaran kerja.

### 3.2. Admin Dashboard (CMS)
- **Secure Authentication:** Halaman login rahasia (`/admin/login`) menggunakan Email dan Password tunggal.
- **Project Management:** Fitur CRUD (*Create, Read, Update, Delete*) portofolio dan studi kasus.
- **Skill Management:** Fitur CRUD untuk menambah/menghapus *tech stack*.
- **Message Inbox:** Halaman untuk membaca dan menghapus pesan masuk dari pengunjung.

## 4. Enterprise-Grade Folder Structure
Untuk memastikan kode mudah dipelihara dan diuji, aplikasi menggunakan arsitektur berbasis fitur (**Feature-Driven Architecture**).

```text
src/
├── app/                  # Next.js App Router (Definisi rute publik & admin)
├── core/                 # Konfigurasi inti sistem & infrastruktur
│   ├── security/         # Middleware auth, session management
│   ├── db/               # Prisma client & koneksi database
│   └── error-handling/   # Global error boundaries
├── features/             # Domain bisnis utama (Vertical Slicing)
│   ├── projects/         # Komponen UI, Server Actions (CRUD), & Zod Schema
│   ├── skills/           # Domain keahlian/tech stack
│   ├── messages/         # Domain inbox & kontak pengunjung
│   └── auth/             # Domain autentikasi admin
├── shared/               # Kode global (Reusability)
│   ├── components/       # UI dasar (Button, Input, Modal)
│   ├── lib/              # Utility functions (cn, formatDate)
│   └── types/            # Global TypeScript interfaces
└── public/               # Asset statis
```

## 5. System Architecture & Database Schema

### Data Flow (Server Actions)
```mermaid
sequenceDiagram
    participant Client as React Client
    participant Server as Next.js Server Actions
    participant Validation as Zod Schema Validation
    participant Cloud as Cloudinary
    participant DB as PostgreSQL (Prisma)

    Client->>Server: Submit FormData (Tambah Proyek)
    Server->>Validation: Validasi Tipe Data & Sanitasi Input
    Validation-->>Server: Data Valid
    Server->>Cloud: Upload Image Buffer
    Cloud-->>Server: Return Secure Image URL
    Server->>DB: Eksekusi Query (Prisma Create)
    DB-->>Server: Konfirmasi Sukses
    Server->>Client: revalidatePath('/') & Tampilkan Success Toast
```

### Entity Relationship Diagram (ERD)
```mermaid
erDiagram
    users {
        uuid id PK
        string email
        string password_hash
        string name
    }
    projects {
        uuid id PK
        string title
        string slug
        text description
        string image_url
        string repo_url
        string live_url
        string category
        boolean is_published
        datetime created_at
    }
    skills {
        uuid id PK
        string name
        string icon_name
        string category
    }
    project_skills {
        uuid project_id FK
        uuid skill_id FK
    }
    messages {
        uuid id PK
        string sender_name
        string sender_email
        text content
        boolean is_read
        datetime created_at
    }

    projects ||--o{ project_skills : "uses"
    skills ||--o{ project_skills : "applied in"
```

## 6. Enterprise Security Standards
1. **Authentication & Session Management:** Menggunakan **HTTP-Only, Secure, SameSite Cookies** untuk sesi Admin. *Password* di-*hash* menggunakan bcrypt.
2. **Input Validation (XSS/SQLi Prevention):** Semua input divalidasi ganda di *Client* dan *Server* menggunakan **Zod**. Prisma ORM mencegah SQL Injection.
3. **Data Protection:** Penerapan **Rate Limiting** pada *endpoint* kontak untuk mencegah *Spam/DDoS*, serta implementasi Content Security Policy (CSP).

## 7. Performance Optimization Strategy
Standar performa yang harus dicapai adalah **Lighthouse Score 95+**:
1. **React Server Components (RSC):** Meminimalisir pengiriman JavaScript ke klien.
2. **Code Splitting & Lazy Loading:** Gambar dan komponen berat (seperti diagram) dimuat secara asinkron.
3. **Image Optimization:** Wajib menggunakan tag `<Image>` dari Next.js untuk format WebP/AVIF dan *resizing* dinamis.

## 8. Typography & Design Constraints
- **Konsep Visual:** *Clean, High Contrast, Minimalist Enterprise*. Mendukung *Dark/Light Mode*.
- **Font Stack:**
  - **Sans:** `Geist Mono, ui-monospace, monospace` (Teks paragraf dan antarmuka).
  - **Serif:** `serif` (Elemen dekoratif/kutipan).
  - **Mono:** `JetBrains Mono, monospace` (Metrik angka, *badge* teknologi, *code snippet*).
- **Animasi:** Berbasis `opacity` dan `transform` untuk performa 60fps. Fokus pada *Reveal on Scroll*. Hindari animasi yang menggeser layout (memicu *Reflow*).