Skip to content

taiseen/portfolio-site-three.js-react

Repository files navigation

02 - March - 2023

Portfolio Site | Live Link

Technology used:

  • React
  • Three.js
  • Tailwind-CSS

Dev Environment - Vite

yarn create vite

after clone or download, for installing dependencies, please run at terminal...

yarn

& to start the application, please run...

yarn dev

Yarn Dependencies:

  • yarn add react-simple-maps
  • yarn add react-hook-form
  • yarn add prop-types
  • yarn add @emailjs/browser
  • yarn add three
  • yarn add @react-three/fiber
  • yarn add @react-three/drei
  • yarn add @react-three/postprocessing
  • npm install -g gltf-pipeline

Learning context:

  • No Scrollbar
  • Scroll Snap Effect
  • scrolling mouse animation...
  • at tailwind.config file url img path calling time avoid (.) at start
  • dynamically pass content value at pseudo ::after class at mouse hover effect
  • using of react-map & its use cases...
  • using of @emailjs/browser form client side to mail box
  • loading data from environment variables in vite project
  • emailJs with react-hook-form combination data sending
  • interact with threeJs Canvas & other materials objects...
  • dynamically load/render components from a list name hovering...

Converting 3D model into JSX, has some steps...

  • 1st download [glTF] formate data from website

glTF Pipeline

gltf-pipeline -i [inputFileName].gltf -o [outputFileName].gltf -d

glTF to jsx

npx gltfjsx [outputFileName].gltf --transform

tailwind-css

parent --> h-screen snap-y snap-mandatory overflow-y-scroll scroll-smooth
children --> h-screen snap-center