Creating a 3D Developer Portfolio Website with Three.js, React, and Tailwind

In this tutorial, we will walk through the process of building a 3D developer portfolio website using Three.js, React, and Tailwind CSS. Three.js is a JavaScript library that allows you to create 3D graphics in the browser, React is a popular JavaScript library for building user interfaces, and Tailwind CSS is a utility-first CSS framework that allows you to quickly design and customize your website.

Before we begin, make sure you have Node.js installed on your computer. You can download it from the official website if you don’t already have it installed.

Step 1: Set up a new React project
To start, we need to set up a new React project. Open your terminal and run the following command:

npx create-react-app 3d-portfolio

This will create a new React project called 3d-portfolio in the current directory. Once the project is set up, navigate into the project directory by running:

cd 3d-portfolio

Step 2: Install Three.js and Tailwind CSS
Next, we need to install Three.js and Tailwind CSS. Run the following commands in your terminal to install both libraries:

npm install three @react-three/fiber @react-three/drei tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Set up Tailwind CSS
After installing Tailwind CSS, we need to set it up in our project. Create a new file called tailwind.css in the src directory and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, open the index.css file in the src directory and import the tailwind.css file at the top of the file:

@import './tailwind.css';

Step 4: Create a 3D component
Now let’s create a 3D component using Three.js. Create a new file called Cube.js in the src/components directory and add the following code:

import React, { useRef, useMemo } from "react";
import { useFrame } from "@react-three/fiber";
import { Mesh } from "three";

const Cube = () => {
  const mesh = useRef<Mesh>();

  const alpha = useMemo(() => {
    return Math.random() * Math.PI * 2;
  }, []);

  useFrame(() => {
    if (mesh.current) {
      mesh.current.rotation.x += 0.01;
      mesh.current.rotation.y += 0.01;
    }
  });

  return (
    <mesh ref={mesh}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="skyblue" />
    </mesh>
  );
};

export default Cube;

This component creates a rotating cube using Three.js. It uses a useRef hook to access the mesh object, a useMemo hook to generate a random value for the alpha angle, and a useFrame hook to update the rotation of the cube every frame.

Step 5: Add the 3D component to the App component
Now let’s add the Cube component to the App component. In the src directory, open the App.js file and replace the existing code with the following:

import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import Cube from "./components/Cube";

function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Cube />
      </Suspense>
    </Canvas>
  );
}

export default App;

Step 6: Start the development server
To see your 3D developer portfolio website in action, start the development server by running the following command in your terminal:

npm start

This will start the development server and open your website in your default web browser. You should see a rotating cube on the screen.

That’s it! You have successfully built a 3D developer portfolio website using Three.js, React, and Tailwind CSS. Feel free to customize the website further by adding more 3D objects, text, images, and animations. Happy coding!