Building an Immersive 3D Portfolio: Next.js 14 + React Three Fiber

Context

A personal portfolio site that doubles as a technical showcase. Instead of a conventional static portfolio, I built an immersive 3D experience using React Three Fiber (R3F) — demonstrating not just frontend development but 3D graphics, internationalization, and DevOps integration in a single project.

Live: creative.soominlab.com GitHub: Lajancia/Next14-R3F

Technical highlights

1. 3D scene composition with React Three Fiber

The site features multiple interactive 3D scenes:

• Macro Keyboard — The homepage hero: a detailed keyboard model (.glb) with keycaps, rendered with custom lighting and post-processing effects
• Motorcycle — Interactive 3D motorcycle model with orbit controls

Each scene is a self-contained R3F component:

// Example: 3D keyboard scene component structure
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, useGLTF } from '@react-three/drei'

function KeyboardScene() {
  const { nodes, materials } = useGLTF('/keyboard.glb')
  return (
    <group>
      {Object.values(nodes).map((node, i) => (
        <mesh key={i} geometry={node.geometry} material={materials[node.name]} />
      ))}
    </group>
  )
}

2. Bilingual support with i18next

Full Korean and English localization using i18next with:

• Dynamic route-based language detection (/en/pipeline, /ko/pipeline)
• Server-side language negotiation via accept-language header
• Namespaced translation files per page component

3. Panda CSS for styling

Styling is handled by Panda CSS — a modern CSS-in-JS framework with:

• Type-safe design tokens
• Zero-runtime CSS generation at build time
• Responsive variants without media query boilerplate

CI/CD pipeline

The project includes a complete DevOps pipeline:

• dockerfile — Multi-stage build (deps → builder → runner) with pnpm
• docker-compose.yml — Local deployment configuration
• Jenkinsfile — Automated build, push to GHCR, GitOps repo update
• ecosystem.config.js — PM2 process management for production

Key decisions

Why Panda CSS over Tailwind? Panda CSS generates type-safe atomic styles at build time, providing the developer experience of Tailwind with the type safety of CSS-in-JS libraries. It also supports configurable design tokens that can be shared across the application.

Why separate CI/CD case study? The Next14-R3F project originally contained both the 3D portfolio and the Jenkins/K3s pipeline. I've documented them separately because each addresses a different engineering concern — visualization and infrastructure.

Results

Related

See the CI/CD Pipeline case study for the full Jenkins + K3s + ArgoCD setup that powers this project's deployment.