Building a Cyberpunk Portfolio with Three.js and React

Introduction: Why Cyberpunk?

The cyberpunk aesthetic — with its neon lights, glitch effects, and futuristic UI — has become a popular choice for creative portfolios. It's bold, memorable, and perfectly suited for artists working in 3D, music, and digital media.

Tech Stack Overview

For this portfolio, we're using:

• Next.js 14+ — App Router, SSG/ISR for SEO
• Three.js / React Three Fiber — 3D scenes and animations
• GSAP + ScrollTrigger — Scroll-based animations
• Framer Motion — Page transitions and micro-interactions
• CSS Modules — Scoped styling with cyberpunk theme

Setting Up the 3D Scene

Start by creating a canvas component that wraps your Three.js scene. Use React Three Fiber to declaratively define your 3D objects.

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Float } from '@react-three/drei'

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
      <ambientLight intensity={0.3} />
      <pointLight position={[10, 10, 10]} color="#a855f7" />
      <Float speed={2} rotationIntensity={0.5}>
        <mesh>
          <torusKnotGeometry args={[1, 0.3, 128, 32]} />
          <meshStandardMaterial
            color="#06b6d4"
            emissive="#06b6d4"
            emissiveIntensity={0.4}
          />
        </mesh>
      </Float>
      <OrbitControls enableZoom={false} />
    </Canvas>
  )
}

Creating Glitch Text Effects

Glitch effects are a hallmark of the cyberpunk aesthetic. You can achieve this with pure CSS using pseudo-elements and clip-path animations.

Performance Optimization

3D portfolios can be heavy. Optimize by:

• Using dynamic imports for Three.js components
• Implementing lazy loading for below-the-fold content
• Compressing textures and 3D models
• Using prefers-reduced-motion to disable animations for users who need it

Conclusion

Building a cyberpunk portfolio is about balancing visual impact with performance. Use 3D elements sparingly, optimize for all devices, and always prioritize accessibility.