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

pnpm install

2. Setup environment

cp .env.example .env
# Edit .env with your DATABASE_URL and other credentials

3. Setup database

pnpm db:generate             # Generate Prisma client
npx prisma migrate dev       # Run migrations

4. Run development server

pnpm dev

Open 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:

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