From 82eb2b3b3680b230e7ea6463722c3cf9f39fc03f Mon Sep 17 00:00:00 2001 From: Gaurav-Advocate Date: Wed, 29 Nov 2023 13:54:10 +0530 Subject: [PATCH] Tree done --- src/App.jsx | 37 ++++++++--------- src/components/Experience.jsx | 22 ++++++---- src/components/Navbar.jsx | 11 +++-- src/components/canvas/Ball.jsx | 64 ++++++++++++++++------------- src/components/canvas/Computers.jsx | 18 +++++--- 5 files changed, 85 insertions(+), 67 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2b0f01a..2d47381 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -23,21 +23,22 @@ import { Mouse } from "./components/canvas"; */ function App() { - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - const [mouseModes, setMouseModes] = useState("default"); - const cusoreMove = { - default: { - x: mousePosition.x - 40, - y: mousePosition.y - 40, - }, - text: { - width: 160, - height: 160, - x: mousePosition.x - 80, - y: mousePosition.y - 80, - }, - }; + // const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + // const [mouseModes, setMouseModes] = useState("default"); + + // const cusoreMove = { + // default: { + // x: mousePosition.x - 40, + // y: mousePosition.y - 40, + // }, + // text: { + // width: 160, + // height: 160, + // x: mousePosition.x - 80, + // y: mousePosition.y - 80, + // }, + // }; @@ -61,14 +62,8 @@ function App() { <>
- - - +
diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 913dec5..dd681d9 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,17 +1,19 @@ import { styles } from "../styles"; import { motion } from "framer-motion"; -import { fadeIn, textVariant } from "../utils/motion"; -import { experiences } from "../constants"; import { VerticalTimeline, VerticalTimelineElement, } from "react-vertical-timeline-component"; +import 'react-vertical-timeline-component/style.min.css' + import { SectionWrapper } from "../hoc"; +import { experiences } from "../constants"; +import { fadeIn, textVariant } from "../utils/motion"; const ExperienceCard = ({ experience }) => { return ( { date={experience.date} iconStyle={{ background: experience.iconBg }} icon={ -
+
{experience.company_name}
} > -
+

{experience.title}

{

- {experiences.map((exp, i) => ( - - ))} + { + experiences.map((experience, i) => ( + + )) + }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index bb20f89..a66aa33 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -4,12 +4,15 @@ import { Link } from "react-router-dom"; import { styles } from "../styles"; import { navLinks } from "../constants"; import { logo, menu, close } from "../assets"; -useState; + const Navbar = () => { const [active, setActive] = useState(""); const [toggle, setToggle] = useState(true); const [isNavColor, setNavColor] = useState(false); + console.log(active); + + useEffect(() => { const handleScroll = () => { const scrollTop = scrollY; @@ -36,8 +39,9 @@ const Navbar = () => {
{ + console.log('click'); setActive(""); scrollTo(0, 0); }} @@ -57,7 +61,7 @@ const Navbar = () => { className={`${ active === link.title ? "text-white" : "text-secondary" } cursor-pointer text-[18px] font-medium hover:text-white`} - onClick={() => setActive(link.title)} + onClick={() => (setActive(link.title, console.log('click')))} > {link.title} @@ -85,6 +89,7 @@ const Navbar = () => { onClick={() => { setActive(link.title); setToggle(!toggle); + console.log('click'); }} > {link.title} diff --git a/src/components/canvas/Ball.jsx b/src/components/canvas/Ball.jsx index 2fb0e28..85e8e77 100644 --- a/src/components/canvas/Ball.jsx +++ b/src/components/canvas/Ball.jsx @@ -1,5 +1,13 @@ import React, { Suspense, useRef } from "react"; -import { Decal, Float, OrbitControls, Preload, useTexture} from "@react-three/drei"; +import { + Decal, + Float, + OrbitControls, + Preload, + Shadow, + useTexture, +} from "@react-three/drei"; + import { Canvas } from "@react-three/fiber"; import CanvasLoader from "../Loader"; @@ -7,40 +15,40 @@ const Ball = (props) => { const [decal] = useTexture([props.imgUrl]); return ( - - - - - - - - - + + + + + + + + + ); }; const BallCanvas = ({ icon }) => { - const rootRef = useRef(); - return ( - + }> - - - - + diff --git a/src/components/canvas/Computers.jsx b/src/components/canvas/Computers.jsx index 0757a5b..e3592c4 100644 --- a/src/components/canvas/Computers.jsx +++ b/src/components/canvas/Computers.jsx @@ -1,6 +1,6 @@ import { Suspense, useEffect, useState } from "react"; import { Canvas } from "@react-three/fiber"; -import { OrbitControls, Preload, SpotLight, useGLTF } from "@react-three/drei"; +import { OrbitControls, Preload, useGLTF } from "@react-three/drei"; import CanvasLoader from "../Loader"; @@ -12,7 +12,7 @@ const Computers = ({isMobile}) => { // lighting required return ( - + { castShadow shadow-mapSize={1024} /> - + + {/* component that displays on the screen */} - - { rotation={[-0.01, -0.2, -0.1]} /> - + ); };