fix navlinks / fixblackgradient / changed 3dmodel

package.json

@@ -32,6 +32,6 @@
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.2.0"
+    "vite": "^4.2.1"
   }
 }

src/App.jsx

@@ -6,7 +6,7 @@ const App = () => {
   return (
     <BrowserRouter>
 
-      <div className='relative z-0 bg-primary'>
+      <div className='relative z-0 bg-primary pb-1'>
         <div className='bg-hero-pattern bg-cover bg-no-repeat bg-center'>
           <Navbar/>
           <Hero/>

src/components/Contact.jsx

@@ -46,7 +46,7 @@ const Contact = () => {
     }
   }
   return (
-    <div className='xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden'>
+    <div className='xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden pb-18'>
       <motion.div
         variants={slideIn('left', 'tween', 0.2, 1)}
         className='flex-[0.75] bg-black-100 p-8 rounded-2xl'

src/components/canvas/Computers.jsx

@@ -4,7 +4,7 @@ import { OrbitControls, Preload, useGLTF } from '@react-three/drei'
 import CanvasLoader from '../Loader'
 
 const Computers = ({ isMobile }) => {
-  const computer = useGLTF('./mangrove/scene.gltf')
+  const computer = useGLTF('./desktop_pc/scene.gltf')
   return (
     <mesh>
       <hemisphereLight intensity={1} groundColor='white' />
@@ -18,9 +18,9 @@ const Computers = ({ isMobile }) => {
       />
       <primitive 
       object={computer.scene}
-      scale={isMobile ? 0.2 : 1.1}
-      position={[0, -5, 0]}
-      rotation={[-0.01, 1, 0]}
+      scale={isMobile ? 0.7 : 0.75}
+      position={[0, -2.5, -1.5]}
+      rotation={[0, -0.2, -0.1]}
       />
     </mesh>
   )
@@ -39,7 +39,7 @@ const ComputersCanvas = () => {
     <Canvas
       frameloop='demand'
       shadows
-      camera={{position: [20,3,0], fov:60}}
+      camera={{position: [20,3,5], fov:25}}
       gl={{preserveDrawingBuffer:true}}
     > 
       <Suspense fallback={<CanvasLoader/>}>

src/hoc/SectionWrapper.jsx

@@ -11,7 +11,11 @@ function HOC() {
         whileInView="show"
         viewport={{once:true, amount:0.25}}
         className={`${styles.paddingX} max-w-7xl mx-auto my-10`}
+        id={idName}
         >
+            <span className='hash-span' id={idName}>
+          &nbsp;
+        </span>
             <Component/>
         </motion.section>
     )

src/index.css

@@ -114,6 +114,22 @@
   -webkit-text-fill-color: transparent;
 }
 
+.black-text-gradient {
+  background: #464646; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #464646,
+    #555555
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #464646,
+    #949494
+  ); /* 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;
@@ -201,4 +217,5 @@
       -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;
   }
+
 }