RFB Portofolio

A clean, fast, and lightweight personal portfolio built with Next.js, Tailwind CSS, and Prisma — featuring a full-stack blog, photo gallery, and admin dashboard.

Technologies Used

• Framework: Next.js 15
• Styling: Tailwind CSS
• Database: Neon (PostgreSQL) via Prisma
• Image Storage: Cloudinary
• Authentication: NextAuth.js
• Deployment: Vercel

Features

• Blog — Full CRUD blog dengan dukungan Markdown/MDX, pagination, dan tanggal edit otomatis
• Photo Gallery — Upload foto ke Cloudinary, tampil dengan tooltip judul saat hover, dan load more
• Projects — Halaman showcase proyek
• Admin Dashboard — Kelola blog dan foto lewat antarmuka admin yang dilindungi autentikasi
• Light & Dark Mode — Toggle tema terang/gelap
• Hamburger Menu — Navigasi responsif untuk mobile
• SEO Optimization — Sitemap, robots.txt, dan metadata dinamis
• Error & Not Found Page — Halaman 404 dan 500 yang informatif

Struktur Halaman

Route	Keterangan
/	Halaman utama / beranda
/blog	Daftar blog dengan pagination
/blog/[slug]	Detail artikel blog
/projects	Daftar proyek
/photos	Galeri foto dengan load more
/admin	Dashboard admin (protected)
/admin/blog	Kelola blog
/admin/photo	Kelola foto

Instalasi

Pastikan sudah menginstall Node.js dan pnpm.

# Clone repo
git clone https://github.com/its-Bagas/Website-Personal.git
cd Website-Personal

# Install dependencies
pnpm install

# Setup environment variables
cp .env.example .env

Konfigurasi Environment

Isi file .env dengan variabel berikut:

# Database (Neon PostgreSQL)
DATABASE_URL="postgresql://"
DIRECT_URL="postgresql://"

# NextAuth
NEXTAUTH_SECRET="your-secret"
NEXTAUTH_URL="http://localhost:3000"

# Cloudinary
CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"

# App
NEXT_PUBLIC_BASE_URL="http://localhost:3000"

Setup Database

# Jalankan migrasi database
npx prisma migrate dev

# (Opsional) Buka Prisma Studio
npx prisma studio

Menjalankan Development Server

pnpm dev

Server berjalan di http://localhost:3000.

Konfigurasi Tambahan

• Update metadata dan social links di app/lib/config.ts
• Update routes di app/sitemap.ts untuk SEO
• Tulis blog post lewat admin dashboard di /admin/blog
• Upload foto lewat admin dashboard di /admin/photo

Deployment ke Vercel

1. Push repo ke GitHub
2. Import project di Vercel
3. Tambahkan semua environment variables di Vercel dashboard
4. Deploy

Lisensi

MIT License