101 lines
3.4 KiB
Markdown
101 lines
3.4 KiB
Markdown
# 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
|