Kiến Trúc Web Tương Tác 3D & Neo-Cyberpunk UI Với Next.js và Three.js

Khi xây dựng một trang portfolio cá nhân, mục tiêu không chỉ là liệt kê danh sách kỹ năng hay dự án cũ, mà là biến chính trang web thành một minh chứng sống động nhất cho tư duy kỹ thuật và gu thẩm mỹ của bạn.

1. Triết Lý Thiết Kế Neo-Cyberpunk

Phong cách Neo-Cyberpunk hiện đại không đơn thuần là đèn neon chói lóa trên nền đen tuyền. Nó là sự cân bằng tinh tế giữa:

• Obsidian Dark Surface: Nền đen sâu thẳm (#05070f) với các lớp card phủ kính mờ (Glassmorphism backdrop-blur-md).
• Laser Gradients: Ánh sáng quét viền Cyan (#00f0ff) và Violet (#8b5cf6) tạo chiều sâu không gian.
• Micro-Interactions: Con trỏ chuột tương tác, các particle phản hồi gia tốc chuột và âm thanh gõ terminal.

cssCopy
/* Card phát quang Cyberpunk */
.cyber-card {
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 20px -5px rgba(0, 240, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-card:hover {
  border-color: rgba(0, 240, 255, 0.6);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 35px -5px rgba(0, 240, 255, 0.35);
}

2. Tích Hợp Three.js Mượt Mà Trên Next.js

Để đảm bảo Three.js không gây sụt giảm khung hình (FPS drop) và hoạt động hoàn hảo khi render phía máy khách:

1. Khởi tạo Canvas Client-Only: Tách biệt Canvas 3D vào các client component có lifecycle rõ ràng (useEffect dọn dẹp bộ nhớ WebGL contexts và geometry/material buffers).
2. Particle Instancing: Thay vì render hàng ngàn Mesh độc lập, sử dụng InstancedMesh hoặc BufferGeometry điểm với Shader tùy biến để chỉ cần 1 duy nhất Draw Call!

typescriptCopy
// Tạo mạng lưới hạt tương tác theo chuột
const particleCount = 1500;
const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount * 3; i += 3) {
  positions[i] = (Math.random() - 0.5) * 20;
  positions[i + 1] = (Math.random() - 0.5) * 20;
  positions[i + 2] = (Math.random() - 0.5) * 20;
}

3. Tổng Kết

Một hệ thống web vừa mạnh mẽ về kỹ thuật vừa quyến rũ về mặt thị giác sẽ luôn tạo ấn tượng khó phai với bất kỳ ai ghé thăm. Hãy đón chờ các dự án tiếp theo trong trang Labs nhé!