Build and Deploy an Amazing 3D Web Developer Portfolio with ThreeJS | React Three Fiber

constants.js

import {
  mobile,
  backend,
  creator,
  web,
  javascript,
  typescript,
  html,
  css,
  reactjs,
  redux,
  tailwind,
  nodejs,
  mongodb,
  git,
  figma,
  docker,
  meta,
  starbucks,
  tesla,
  shopify,
  carrent,
  jobit,
  tripguide,
  threejs,
} from "../assets";

export const navLinks = [
  {
    id: "about",
    title: "About",
  },
  {
    id: "work",
    title: "Work",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

const services = [
  {
    title: "Web Developer",
    icon: web,
  },
  {
    title: "React Native Developer",
    icon: mobile,
  },
  {
    title: "Backend Developer",
    icon: backend,
  },
  {
    title: "Content Creator",
    icon: creator,
  },
];

const technologies = [
  {
    name: "HTML 5",
    icon: html,
  },
  {
    name: "CSS 3",
    icon: css,
  },
  {
    name: "JavaScript",
    icon: javascript,
  },
  {
    name: "TypeScript",
    icon: typescript,
  },
  {
    name: "React JS",
    icon: reactjs,
  },
  {
    name: "Redux Toolkit",
    icon: redux,
  },
  {
    name: "Tailwind CSS",
    icon: tailwind,
  },
  {
    name: "Node JS",
    icon: nodejs,
  },
  {
    name: "MongoDB",
    icon: mongodb,
  },
  {
    name: "Three JS",
    icon: threejs,
  },
  {
    name: "git",
    icon: git,
  },
  {
    name: "figma",
    icon: figma,
  },
  {
    name: "docker",
    icon: docker,
  },
];

const experiences = [
  {
    title: "React.js Developer",
    company_name: "Starbucks",
    icon: starbucks,
    iconBg: "#383E56",
    date: "March 2020 - April 2021",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "React Native Developer",
    company_name: "Tesla",
    icon: tesla,
    iconBg: "#E6DEDD",
    date: "Jan 2021 - Feb 2022",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "Web Developer",
    company_name: "Shopify",
    icon: shopify,
    iconBg: "#383E56",
    date: "Jan 2022 - Jan 2023",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
  {
    title: "Full stack Developer",
    company_name: "Meta",
    icon: meta,
    iconBg: "#E6DEDD",
    date: "Jan 2023 - Present",
    points: [
      "Developing and maintaining web applications using React.js and other related technologies.",
      "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
      "Implementing responsive design and ensuring cross-browser compatibility.",
      "Participating in code reviews and providing constructive feedback to other developers.",
    ],
  },
];

const testimonials = [
  {
    testimonial:
      "I thought it was impossible to make a website as beautiful as our product, but Rick proved me wrong.",
    name: "Sara Lee",
    designation: "CFO",
    company: "Acme Co",
    image: "https://randomuser.me/api/portraits/women/4.jpg",
  },
  {
    testimonial:
      "I've never met a web developer who truly cares about their clients' success like Rick does.",
    name: "Chris Brown",
    designation: "COO",
    company: "DEF Corp",
    image: "https://randomuser.me/api/portraits/men/5.jpg",
  },
  {
    testimonial:
      "After Rick optimized our website, our traffic increased by 50%. We can't thank them enough!",
    name: "Lisa Wang",
    designation: "CTO",
    company: "456 Enterprises",
    image: "https://randomuser.me/api/portraits/women/6.jpg",
  },
];

const projects = [
  {
    name: "Car Rent",
    description:
      "Web-based platform that allows users to search, book, and manage car rentals from various providers, providing a convenient and efficient solution for transportation needs.",
    tags: [
      {
        name: "react",
        color: "blue-text-gradient",
      },
      {
        name: "mongodb",
        color: "green-text-gradient",
      },
      {
        name: "tailwind",
        color: "pink-text-gradient",
      },
    ],
    image: carrent,
    source_code_link: "https://github.com/",
  },
  {
    name: "Job IT",
    description:
      "Web application that enables users to search for job openings, view estimated salary ranges for positions, and locate available jobs based on their current location.",
    tags: [
      {
        name: "react",
        color: "blue-text-gradient",
      },
      {
        name: "restapi",
        color: "green-text-gradient",
      },
      {
        name: "scss",
        color: "pink-text-gradient",
      },
    ],
    image: jobit,
    source_code_link: "https://github.com/",
  },
  {
    name: "Trip Guide",
    description:
      "A comprehensive travel booking platform that allows users to book flights, hotels, and rental cars, and offers curated recommendations for popular destinations.",
    tags: [
      {
        name: "nextjs",
        color: "blue-text-gradient",
      },
      {
        name: "supabase",
        color: "green-text-gradient",
      },
      {
        name: "css",
        color: "pink-text-gradient",
      },
    ],
    image: tripguide,
    source_code_link: "https://github.com/",
  },
];

export { services, technologies, experiences, testimonials, projects };

index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  color-scheme: dark;
}

.hash-span {
  margin-top: -100px;
  padding-bottom: 100px;
  display: block;
}

.black-gradient {
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.violet-gradient {
  background: #804dee;
  background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
  background: -webkit-linear-gradient(
    -90deg,
    #804dee 0%,
    rgba(60, 51, 80, 0) 100%
  );
}

.green-pink-gradient {
  background: "#00cea8";
  background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
  background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
}

.orange-text-gradient {
  background: #f12711; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #f12711,
    #f5af19
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-text-gradient {
  background: #11998e; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #11998e,
    #38ef7d
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-text-gradient {
  /* background: -webkit-linear-gradient(#eee, #333); */
  background: #56ccf2; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #2f80ed,
    #56ccf2
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pink-text-gradient {
  background: #ec008c; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #ec008c,
    #fc6767
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* canvas- styles */
.canvas-loader {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff,
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
      1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

motion.js

export const textVariant = (delay) => {
  return {
    hidden: {
      y: -50,
      opacity: 0,
    },
    show: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        duration: 1.25,
        delay: delay,
      },
    },
  };
};

export const fadeIn = (direction, type, delay, duration) => {
  return {
    hidden: {
      x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
      y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
      opacity: 0,
    },
    show: {
      x: 0,
      y: 0,
      opacity: 1,
      transition: {
        type: type,
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const zoomIn = (delay, duration) => {
  return {
    hidden: {
      scale: 0,
      opacity: 0,
    },
    show: {
      scale: 1,
      opacity: 1,
      transition: {
        type: "tween",
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const slideIn = (direction, type, delay, duration) => {
  return {
    hidden: {
      x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
      y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
    },
    show: {
      x: 0,
      y: 0,
      transition: {
        type: type,
        delay: delay,
        duration: duration,
        ease: "easeOut",
      },
    },
  };
};

export const staggerContainer = (staggerChildren, delayChildren) => {
  return {
    hidden: {},
    show: {
      transition: {
        staggerChildren: staggerChildren,
        delayChildren: delayChildren || 0,
      },
    },
  };
};

styles.js

const styles = {
  paddingX: "sm:px-16 px-6",
  paddingY: "sm:py-16 py-6",
  padding: "sm:px-16 px-6 sm:py-16 py-10",

  heroHeadText:
    "font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
  heroSubText:
    "text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",

  sectionHeadText:
    "text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
  sectionSubText:
    "sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
};

export { styles };

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  mode: "jit",
  theme: {
    extend: {
      colors: {
        primary: "#050816",
        secondary: "#aaa6c3",
        tertiary: "#151030",
        "black-100": "#100d25",
        "black-200": "#090325",
        "white-100": "#f3f3f3",
      },
      boxShadow: {
        card: "0px 35px 120px -15px #211e35",
      },
      screens: {
        xs: "450px",
      },
      backgroundImage: {
        "hero-pattern": "url('/src/assets/herobg.png')",
      },
    },
  },
  plugins: [],
};

import { Suspense, useEffect, useState } from "react"; import { Canvas, useLoader} from '@react-three/fiber'; import { OrbitControls, Preload, useGLTF } from '@react-three/drei'; import CanvasLoader from '../Loader';

const Computers = () => { const computer = useGLTF('./desktop_pc/scene.gltf'); console.log(computer); return ( ); };

const ComputersCanvas = () => { return ( <Canvas frameloop='demand' shadows camera={{position: [20,, 3, 5], fov:25 }} gl={{preserveDrawingBuffer: true}}> <OrbitControls enableZoom = {false} maxPolarAngle = {Math.PI / 2} minPolarAngle = {Math.PI / 2} /> ); };

export default ComputersCanvas; I get the following error, can anyone help me?

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15) at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34) at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24) at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13) at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13) at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15) at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28) at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30) at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42) at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22) createInstance @ chunk-UQN7SVB7.js?v=e56d4dc1:16296 completeWork @ chunk-UQN7SVB7.js?v=e56d4dc1:8426 completeUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13709 performUnitOfWork @ chunk-UQN7SVB7.js?v=e56d4dc1:13691 workLoopSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13623 renderRootSync @ chunk-UQN7SVB7.js?v=e56d4dc1:13602 recoverFromConcurrentError @ chunk-UQN7SVB7.js?v=e56d4dc1:13192 performConcurrentWorkOnRoot @ chunk-UQN7SVB7.js?v=e56d4dc1:13140 workLoop @ chunk-UQN7SVB7.js?v=e56d4dc1:278 flushWork @ chunk-UQN7SVB7.js?v=e56d4dc1:257 performWorkUntilDeadline @ chunk-UQN7SVB7.js?v=e56d4dc1:465 Show 11 more frames Show less

The above error occurred in the <ForwardRef(Canvas)> component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18549:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at CanvasWrapper
at ComputersCanvas
at section
at Hero
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4031:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e56d4dc1:4774:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (chunk-UQN7SVB7.js?v=e56d4dc1:16296:15) at completeWork (chunk-UQN7SVB7.js?v=e56d4dc1:8426:34) at completeUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13709:24) at performUnitOfWork (chunk-UQN7SVB7.js?v=e56d4dc1:13691:13) at workLoopSync (chunk-UQN7SVB7.js?v=e56d4dc1:13623:13) at renderRootSync (chunk-UQN7SVB7.js?v=e56d4dc1:13602:15) at recoverFromConcurrentError (chunk-UQN7SVB7.js?v=e56d4dc1:13192:28) at performConcurrentWorkOnRoot (chunk-UQN7SVB7.js?v=e56d4dc1:13140:30) at workLoop (chunk-UQN7SVB7.js?v=e56d4dc1:278:42) at flushWork (chunk-UQN7SVB7.js?v=e56d4dc1:257:22)

The above error occurred in the

component:

at div
at Loader
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:16609:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:18403:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-UQN7SVB7.js?v=e56d4dc1:17998:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Turns out you gotta check CanvasLoader.js file.

chunk-IF634Q7A.js?v=a06f2f7e:17762 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. _BufferGeometry
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
2chunk-IF634Q7A.js?v=a06f2f7e:15732 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', " component:

at Earth
at Suspense
at Suspense
at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:16085:5)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17765:21)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17372:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
2chunk-IF634Q7A.js?v=a06f2f7e:17950 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', " component:

at Canvas (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17910:3)
at FiberProvider (http://localhost:5173/node_modules/.vite/deps/chunk-IF634Q7A.js?v=a06f2f7e:17765:21)
at CanvasWrapper
at EarthCanvas
at div
at MotionComponent (http://localhost:5173/node_modules/.vite/deps/framer-motion.js?v=a06f2f7e:467:40)
at div
at Contact (http://localhost:5173/src/components/Contact.jsx:26:45)
at div
at div
at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=a06f2f7e:4366:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=a06f2f7e:5109:5)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.error @ chunk-IF634Q7A.js?v=a06f2f7e:17762Understand this error
react-dom.development.js:26962 Uncaught Error: Could not load ./planet/scene.gltf: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at chunk-IF634Q7A.js?v=a06f2f7e:17070:39
at _onError (GLTFLoader.js:179:9)
at Object.onLoad (GLTFLoader.js:210:11)
at three.module.js:44019:38Understand this error
16three.module.js:28952 THREE.WebGLRenderer: Context Lost.
**CAN ANY BODY HELP ME to solve this error **

import {Suspense,useState,useEffect} from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Preload, useGLTF,HemisphereLight, PointLight } from '@react-three/drei';

import CanvasLoader from '../Loader';

const Computers = () => {
const computer = useGLTF("./desktop_pc/scene.gltf");
console.log(computer);

return (





)
}

const ComputersCanvas = () => {
return(
<Canvas
frameloop='demand'
shadows
camera={{position: [20, 3, 5], fov: 25}}
gl={{preserveDrawingBuffer: true}}
>
<Suspense fallback={}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>




);
};

export default ComputersCanvas;

Unknown property 'object' foundeslintreact/no-unknown-property
const computer: GLTF & ObjectMap

What shall I do please help me out

Non of the tag properties are working ,
As you can see in the screenshot the PC 3D image is dark

but in my laptop the model isn't loading at all it's just a blank screen

…

On Sun, Jul 14, 2024, 2:02 PM Om-Shree ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Screenshot.2024-07-14.140030.png (view on web) <https://gist.github.com/user-attachments/assets/550c99bf-8ba5-4911-8256-b100bbd1e5e0> Non of the tag properties are working , As you can see in the screenshot the PC 3D image is dark Screenshot.2024-07-14.140148.png (view on web) <https://gist.github.com/user-attachments/assets/970f6aae-a988-43d6-a5ff-81943399fccf> — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1#gistcomment-5120738> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARRLINQTWG5XOUFFVPUMYC3ZMIZTTBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJSGAZDCNBQU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

FOR the services section , for our own one , from where we can get icons similar to his one.
i mean for other services where can I get the icons .

There's something wrong with the tech section pls helpppp!!!! my animation on balls doesn't work ! idk y the code is ok! there is no error plsssss help me

i find that my iphone can load all model, just android cannot

replit work with android.

Non of the tag properties are working , As you can see in the screenshot the PC 3D image is dark

how do u fix it?

hey guys im encountering such an error index-0c28a0fd.esm.js:1656 Uncaught Error: Could not load /desktop_pc/scene.gltf: THREE.GLTFLoader: Failed to load buffer "scene.bin". at index-0c28a0fd.esm.js:1656:36 at _onError (GLTFLoader.js:158:9) how did you guys fix it?
help pls

import Tilt from "react-tilt"; Replace it with this import {Tilt} from "react-tilt";
…
On Sun, May 14, 2023, 2:47 PM Mutakabbir Yeasin @.> wrote: @.* commented on this gist. ------------------------------ while coding About.jsx page the output becomes white in window. there is an error in the photo. any solution please [image: Screenshot_2] https://user-images.githubusercontent.com/98346932/238177902-58956d0f-743d-4d67-bbed-0665fece9960.png — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1#gistcomment-4567472 or unsubscribe https://github.com/notifications/unsubscribe-auth/AZPTJZTSBVKTF3E7TGRURDLXGCPL3BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJSGAZDCNBQU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

import Tilt from "react-tilt"; Replace it with this import {Tilt} from "react-tilt";
…
On Sun, May 14, 2023, 2:47 PM Mutakabbir Yeasin @.> wrote: @.* commented on this gist. ------------------------------ while coding About.jsx page the output becomes white in window. there is an error in the photo. any solution please [image: Screenshot_2] https://user-images.githubusercontent.com/98346932/238177902-58956d0f-743d-4d67-bbed-0665fece9960.png — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1#gistcomment-4567472 or unsubscribe https://github.com/notifications/unsubscribe-auth/AZPTJZTSBVKTF3E7TGRURDLXGCPL3BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJSGAZDCNBQU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

You should first install the package npm install react-tilt react react-dom
then import { Tilt } from 'react-tilt'

So I have completed the whole website and it's up and running fine on Firefox Developer Edition, but when I've tried it on Chrome or Edge, it breaks. Usually some floating balls doesn't load up and the floating PC doesn't neither.
I will provide a link to my Github as well as a screenshot of my console in Chrome developer tools. I hope someone can figure out this issue because I'm a bit lost. Thanks in Advance!
Link: Github

While waiting for answer I debugged a lot and found out the problems myself. After fixing it the website is now working properly on Chrome and Edge. I also had trouble with my extensions getting in the way.

hi bro I am also facing the same issue that it is not loading in mobile browsers like Chrome and Edge can you please tell me how you solved this problem.

i'm getting a "Failed to resolve import "./assets/react.svg" from "src/App.jsx". Does the file exist?"

Update: I was able to fix it. Not sure how but i just removed the last line from app.jsx -> run npm dev - killed terminal -> pasted the code back in -> run dev and then it worked. Have no idea why or how but if anyone can help me understand that would be great.

it is just a save issue LOL :)

i'm getting a "Failed to resolve import "./assets/react.svg" from "src/App.jsx". Does the file exist?"
Update: I was able to fix it. Not sure how but i just removed the last line from app.jsx -> run npm dev - killed terminal -> pasted the code back in -> run dev and then it worked. Have no idea why or how but if anyone can help me understand that would be great.

it is just a save issue LOL :)

You can add in src/App.jsx to resolve the problem :

import { BrowserRouter } from "react-router-dom";
.
.
.
.
.
return (
    <BrowserRouter>
      <div> 
        3D Devoloper Portfolio
      </div>
    </BrowserRouter>
  );

There's something wrong with the tech section pls helpppp!!!! my animation on balls doesn't work ! idk y the code is ok! there is no error plsssss help me

Did u get the solution?? cause I'm also facing the same problem

import {Suspense,useEffect,useState} from 'react';
import { Canvas } from '@react-three/fiber';

import { OrbitControls,Preload,useGLTF } from '@react-three/drei';

import CanvasLoader from '../Loader';

const Computers = () => {
const computer = useGLTF('./desktop_pc/scene.gltf')
return (

)
}
const ComputersCanvas = () => {
return(
<Canvas
frameloop='demand'
shadows
camera={{position:[20,30,5],fov:25}}
gl={{preserveDrawingBuffer:true}}

>
  <Suspense fallback={<CanvasLoader/>}>
  <OrbitControls
   enableZoom={false}
   maxPolarAngle={Math.PI/2}
   minPolarAngle={Math.PI/2} 
   />
   <Computers/>
   <preload all/>
  </Suspense>

</Canvas>

)
}

export default Computers

kindly resolve my error

why is herobg.png not appearing for me in the website

Is there a way to host the website through github? I tried but it looks like the dist that created by the command npm run build does not fully optimized what it needed to run a website, cause when I opened the website using the link and inspected it, the images cannot be found/accessed through assets.. leading to 404 errors.

Is there a way to host the website through github? I tried but it looks like the dist that created by the command npm run build does not fully optimized what it needed to run a website, cause when I opened the website using the link and inspected it, the images cannot be found/accessed through assets.. leading to 404 errors.

Probably an issue with paths, aboslute vs relative paths on local vs deployed, where are you deploying the site?

Is there a way to host the website through github? I tried but it looks like the dist that created by the command npm run build does not fully optimized what it needed to run a website, cause when I opened the website using the link and inspected it, the images cannot be found/accessed through assets.. leading to 404 errors.

Probably an issue with paths, aboslute vs relative paths on local vs deployed, where are you deploying the site?

Well I tried netlify and vercel yesterday and I was able to deploy it, I just don’t know what happened with github.

i really dont know why there is an error here

import React, {useEffect, useState} from 'react'
import {Link} from 'react-router-dom';
import { styles} from '../styles';
import {navLinks} from '../constants';
import { logo, menu, close } from '../assets';

const Navbar = () => {
return (

Navbar

)
}

I checked the folder structure. its fine from my side

@subhransu720 did your issue get solved? Am getting the same error

Have you checked the index file in the assets folder and made sure it imports and exports the actual images correctly?

@subhransu720 did your issue get solved? Am getting the same error

Yes, I mean the issue was with the logo, menu, close from assets only. I could not figure out what the issue was. I just pasted them in public folder and then imported it from there only in my code. This solve my issue

In the NavBar Section, when I click on About, Work, or Contact instead of going to that particular section it refreshes the page. Anyone has a solution for this?

i have so mutch problems with this Project its not funny . In the Computer Comp. the hemisphereLight intensity={1.5} groundColor="black" dosnt work i get nothing in the browser. i find out that it works with hemisphereLight intensity={Math.PI} groundColor="black" You have to write Math.PI not 1.5. The SectionWrapper dosnt work at all. I dont know i cant fix it.

Hi has anyone had problems with creating the initial homepage. None of the components are beinn rendered when I run. Like none. even when i copy and paste the components straight from github. Did you guys modify the components? Let me know.