nuhptr / threejs-portfolio

✅🚀 JSM Building portfolio website using three @react-three/fiber and other library using reactjs and tailwindcss

Threejs Portfolio

Create a portfolio using threejs with some cool animations and effects.

Getting Started

• Create Project (npm create vite@latest ./ -- --template react)

Init Tailwind

• npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
• npx tailwindcss init -p
• update content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
• index.css -> @tailwind base; @tailwind components; @tailwind utilities;

Dependencies

• three - npm install three @react-three/fiber (3D Library)
• react-three/drei - npm install @react-three/drei (3D Library)
• maath - npm install maath (Math Library)
• react-tilt - npm install react-tilt (Tilt Effect / follow mouse effect)
• react-vertical-timeline-component - npm install react-vertical-timeline-component (Timeline Library)
• @emailjs/browser - npm install @emailjs/browser (Sending Emails.)
• framer-motion - npm install framer-motion (Animation Library)
• react-router-dom - npm install react-router-dom (Routing Library)