Portfolio using React, tailwind and threejs-fiber

• Use models in React
• Framer motion animation for elements
• Build using tailwind css

• Github Code
• Assets, Components and Public folders
• Youtube

Install the dependencies and devDependencies and start the server.

npm create vite@latest
npm install --legacy-peer-deps -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p
npm install --legacy-peer-deps three @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom typed.js

For production environments...

Instructions on how to use them in your own application are linked below.

npm run dev

For production release:

vite build

By default, the Docker will expose port 3000, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image.

cd 3d-portfolio
docker build -t <youruser>/3d-portfolio:${package.json.version} .

This will create the 3d-portfolio image and pull in the necessary dependencies. Be sure to swap out ${package.json.version} with the actual version of 3d-portfolio.

Once done, run the Docker image and map the port to whatever you wish on your host. In this example, we simply map port 8000 of the host to port 8080 of the Docker (or whatever port was exposed in the Dockerfile):

docker run -d -p 8000:8080 --name=3d-portfolio <youruser>/3d-portfolio:${package.json.version}

Verify the deployment by navigating to your server address in your preferred browser.

localhost:3000

MIT

Free Software, Hell Yeah!