Building a Retro Terminal Portfolio with Next.js 16

Building a Retro Terminal Portfolio with Next.js 16

Membangun portfolio adalah ritus peralihan bagi setiap developer. Tapi bagaimana jika portfolio Anda bukan sekadar daftar proyek, melainkan sebuah pengalaman?

Filosofi Desain: Kenapa Terminal?

Terminal adalah antarmuka paling jujur dalam komputasi. Tidak ada hiasan, tidak ada distraksi. Setiap karakter memiliki tujuan. Filosofi ini yang saya bawa ke dalam desain portfolio ulumdcode.dev.

---

Arsitektur Aplikasi

+----------------------------------------------------+
|  Browser (Client)                                   |
|  +----------------------------------------------+  |
|  | Next.js 16 App Router                        |  |
|  |  +----------+  +----------+  +------------+  |  |
|  |  | Server   |  | Client   |  | API Route  |  |  |
|  |  | Component|  | Component|  | Handler    |  |  |

|  |  +----+-----+  +----+-----+  +-----+------+  |  |
|  +-------|------------|--------------|-----------+  |
+----------|------------|--------------|--------------+

       |            |              |
       v            v              v

  +--------+  +---------+  +----------+
  | Prisma |  | NextAuth|  | Supabase |
  | ORM    |  | v5      |  | PG       |
  +----+---+  +---------+  +----+-----+
       |                         |
       +----------+--------------+

              v

       +------------------------+
       |  PostgreSQL (Supabase) |
       +------------------------+

Tech Stack Breakdown

Integrasi Prisma v7 + Supabase

Prisma v7 menggunakan driver adapter system. Ini konfigurasi yang benar:

// prisma.config.ts
import "dotenv/config";
import { defineConfig } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  datasource: { url: process.env["DATABASE_URL"] },
});

// src/lib/prisma.ts
import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";

export const prisma = new PrismaClient({
  adapter: new PrismaPg({
    connectionString: process.env.DATABASE_URL
  }),
});

Environment Variables

# .env — JANGAN pernah commit ke git!

# Transaction pooler (port 6543) — untuk runtime query
DATABASE_URL="postgresql://user:pass@host:6543/postgres?pgbouncer=true&connection_limit=1"

# Session pooler (port 5432) — untuk migrasi
DIRECT_URL="postgresql://user:pass@host:5432/postgres"

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

Fitur Unggulan Portfolio Ini

1. Multi-theme: Console (dark), Classic (light), Retro Game (dark)
2. Typewriter Animation: Efek mengetik otomatis di halaman utama
3. Blinking Cursor: Kursor berkedip khas terminal
4. Dashboard Admin: CRUD proyek dan blog dengan autentikasi
5. Responsive Design: Tetap nyaman di layar HP

---

Kesimpulan: Portfolio bertema retro terminal bukan hanya unik secara visual, tetapi juga menunjukkan penguasaan full-stack development dari frontend hingga database.