# Portfolio — Fullstack Developer

A modern, production-grade portfolio website built with Next.js 16, TailwindCSS, Framer Motion, and Prisma.

## Tech Stack

- **Frontend**: Next.js 16 (App Router), React 19, TypeScript
- **Styling**: TailwindCSS + custom design tokens
- **Animations**: Framer Motion
- **ORM**: Prisma (PostgreSQL)
- **Validation**: Zod + React Hook Form
- **Icons**: Lucide React + React Icons
- **Infrastructure**: Docker + Docker Compose

## Project Structure

```
src/
├── app/
│   ├── api/                  # API Routes (Analytics, Contact, etc.)
│   ├── blog/                 # Blog pages
│   ├── dashboard/            # Admin dashboard
│   ├── layout.tsx            # Root layout with SEO metadata
│   └── page.tsx              # Home page (Server Component)
├── components/
│   ├── sections/             # Full-page section components
│   └── ui/                   # Reusable UI components (shadcn/ui style)
├── lib/
│   ├── prisma.ts             # Prisma client singleton
│   ├── s3.ts                 # Storage configuration (Cloudflare R2)
│   └── visitor.ts            # Analytics tracking logic
├── prisma/
│   ├── schema.prisma         # Database schema
│   └── migrations/           # Database migration history
├── Dockerfile                # Multi-stage production build
├── docker-compose.yml        # Infrastructure orchestration
└── deploy.sh                 # Production deployment script
```

## Getting Started

### 1. Install dependencies
```bash
pnpm install
```

### 2. Setup environment
```bash
cp .env.example .env
# Edit .env with your DATABASE_URL and other credentials
```

### 3. Setup database
```bash
pnpm db:generate             # Generate Prisma client
npx prisma migrate dev       # Run migrations
```

### 4. Run development server
```bash
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000)

## Deployment (Production Ready)

Project ini sudah dilengkapi dengan konfigurasi Docker untuk deployment mandiri (self-hosted).

### Deploy menggunakan Docker
1. Pastikan Docker dan Docker Compose sudah terinstall di server.
2. Siapkan file `.env` di root direktori.
3. Jalankan script deployment:
```bash
chmod +x deploy.sh
./deploy.sh
```

Script `deploy.sh` akan secara otomatis:
- Mendeteksi apakah database sudah berjalan (mencegah konflik).
- Membangun image Docker terbaru (`fikri-portfolio-app`).
- Menjalankan migrasi database Prisma secara otomatis.
- Melakukan pembersihan image lama untuk menghemat ruang disk.

Aplikasi akan berjalan di port **4000**.

## Architecture & Philosophy

Portfolio ini merefleksikan pengalaman saya sebagai **Fullstack Developer selama 3+ tahun** dalam membangun aplikasi web yang skalabel dan siap produksi:
- **Scalable Architecture**: Pemisahan yang jelas antara UI, logika bisnis, dan akses data.
- **Modern Next.js Features**: Memanfaatkan Server Components untuk performa maksimal dan SEO.
- **Type Safety**: Penggunaan TypeScript di seluruh bagian aplikasi (End-to-end).
- **Automated Deployment**: Konfigurasi Docker yang dioptimalkan untuk performa dan kemudahan maintenance.
- **Clean Code**: Fokus pada keterbacaan kode (*readability*) dan kemudahan pemeliharaan (*maintainability*).

## Contact

Update profile Anda di:
- `src/app/layout.tsx` — SEO metadata (name, description)
- `src/components/sections/...` — Konten section masing-masing