feat: Upgrade to Next.js 16 and refactor deployment to use an external database with a simplified Docker Compose setup.

README.md

@@ -1,112 +1,100 @@
-# Portfolio — Senior Fullstack Engineer
+# Portfolio — Fullstack Developer
 
-A modern, production-grade portfolio website built with Next.js 15, TailwindCSS, Framer Motion, and Prisma.
+A modern, production-grade portfolio website built with Next.js 16, TailwindCSS, Framer Motion, and Prisma.
 
 ## Tech Stack
 
-- **Frontend**: Next.js 15 (App Router), React 19, TypeScript
+- **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/
-│   │   └── contact/         # Contact form API route
-│   ├── globals.css
+│   ├── 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
-│   │   ├── Navbar.tsx
-│   │   ├── HeroSection.tsx
-│   │   ├── AboutSection.tsx
-│   │   ├── TechStackSection.tsx
-│   │   ├── ProjectsSection.tsx
-│   │   ├── ExperienceSection.tsx
-│   │   ├── ArchitectureSection.tsx
-│   │   ├── ContactSection.tsx
-│   │   └── Footer.tsx
-│   └── ui/                   # Reusable UI components
-│       └── ProjectCard.tsx
+│   └── ui/                   # Reusable UI components (shadcn/ui style)
 ├── lib/
 │   ├── prisma.ts             # Prisma client singleton
-│   └── utils.ts              # cn() utility
-└── types/
-    └── index.ts              # TypeScript types
-prisma/
-├── schema.prisma             # Database schema
-└── seed.ts                   # Seed data
+│   ├── 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
-npm install
-# Also install react-icons for tech stack icons
-npm install react-icons
+pnpm install
 ```
 
 ### 2. Setup environment
 ```bash
 cp .env.example .env
-# Edit .env with your DATABASE_URL
+# Edit .env with your DATABASE_URL and other credentials
 ```
 
 ### 3. Setup database
 ```bash
-npm run db:generate   # Generate Prisma client
-npm run db:push       # Push schema to database
-npx ts-node prisma/seed.ts  # Seed with sample data
+pnpm db:generate             # Generate Prisma client
+npx prisma migrate dev       # Run migrations
 ```
 
 ### 4. Run development server
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000)
 
-## Customization
+## Deployment (Production Ready)
 
-### Personal Information
-Update these files with your information:
-- `src/app/layout.tsx` — SEO metadata (name, description, URL)
-- `src/components/sections/HeroSection.tsx` — Hero text & social links
-- `src/components/sections/AboutSection.tsx` — Bio, stats, skills
-- `src/components/sections/Footer.tsx` — Social links, email
-- `src/components/sections/ContactSection.tsx` — Contact info
+Project ini sudah dilengkapi dengan konfigurasi Docker untuk deployment mandiri (self-hosted).
 
-### Database Content
-After running seed, use Prisma Studio to manage content:
+### 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
-npm run db:studio
+chmod +x deploy.sh
+./deploy.sh
 ```
 
-Or update `prisma/seed.ts` with your actual projects and experience data.
+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.
 
-## Architecture Philosophy
+Aplikasi akan berjalan di port **4000**.
 
-This portfolio demonstrates the same architectural principles I apply in all projects:
-- **Clean folder structure** — scalable and maintainable
-- **Server Components** — data fetching at the server level with graceful fallbacks
-- **Type safety** — full TypeScript throughout
-- **Separation of concerns** — UI components separate from data fetching
-- **Graceful degradation** — fallback data when DB is not connected
+## Architecture & Philosophy
 
-## Deployment
+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*).
 
-Deploy to Vercel (recommended):
+## Contact
 
-1. Push to GitHub
-2. Import to Vercel
-3. Add `DATABASE_URL` environment variable
-4. Deploy
-
-For PostgreSQL, use [Supabase](https://supabase.com) or [Neon](https://neon.tech) for free hosted PostgreSQL.
+Update profile Anda di:
+- `src/app/layout.tsx` — SEO metadata (name, description)
+- `src/components/sections/...` — Konten section masing-masing