Merge remote-tracking branch 'upstream/main' into sujal

PranavBarthwal · May 31, 2024 · a457d43 · a457d43
2 parents d42d14d + f7e68e1
commit a457d43
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 240 deletions.
diff --git a/dist/assets/index-D67J1T9l.js b/dist/assets/index-D67J1T9l.js
diff --git a/dist/assets/index-D8jJgqdT.css b/dist/assets/index-D8jJgqdT.css
diff --git a/dist/index.html b/dist/index.html
@@ -1,33 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="paste your icon here" /> -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cosmoXplore</title>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-      crossorigin="anonymous"
-    />
-    <script type="module" crossorigin src="/assets/index-D67J1T9l.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-D8jJgqdT.css">
-  </head>
-  <body>
-    <div id="root"></div>
-<!-- 
-    <script src="./particles.min.js"></script>
-    <script src="./app.js"></script> -->
-
-
-    <!-- scripts -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/assets/A%20letter%20tech%20logo-B_QDrxWF.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>cosmoXplore</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+  <script type="module" crossorigin src="/assets/index-DX2hSkQl.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CxiSztHf.css">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="src\assets\A letter tech logo.png" /> 
+  <link rel="icon" type="image/svg+xml" href="src\assets\A letter tech logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>cosmoXplore</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -16,10 +16,6 @@
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
-
-
-  <script type="module" src="./particles.min.js"></script>
-
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -11,14 +11,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.7.2",
-    "html-to-react": "^1.7.0",
     "@emailjs/browser": "^4.3.3",
-    "particles.js": "^2.0.0",
+    "@react-three/fiber": "^8.16.6",
+    "@tsparticles/all": "^3.4.0",
+    "@tsparticles/react": "^3.0.0",
+    "html-to-react": "^1.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
+    "three": "^0.164.1",
     "typed.js": "^2.1.0"
   },
   "devDependencies": {

diff --git a/particles.min.js b/particles.min.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,10 +3,12 @@ import './App.css'
 import Navbar from './components/Navbar/Navbar.jsx'
 import Footer from './components/Footer/Footer.jsx'
 import Toast from "./components/Toast/Toast.jsx"
+import BackGround from './components/BackGround/BackGround.jsx'
 
 function App() {
   return (
     <>
+      <BackGround />
       <Toast />
       <Navbar />
       <Outlet />

diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx
@@ -0,0 +1,63 @@
+import { Canvas, useFrame } from "@react-three/fiber";
+import Styles from "./BackGround.module.css"
+import { useRef, useState, useEffect, useCallback } from "react";
+
+
+function Star({ position }) {
+  const radius = 0.005;
+  return (
+    <mesh position={position}>
+      <sphereGeometry args={[radius, 16, 16]} />
+      <meshBasicMaterial color="white" />
+    </mesh>
+  );
+};
+
+function StarField({ numberOfStars = 100 }) {
+
+  const starFieldRef = useRef();
+
+  useFrame((state, delta) => {
+    starFieldRef.current.rotation.x += -0.001
+    starFieldRef.current.rotation.y += 0.002
+  })
+
+  const [positions, setPositions] = useState([])
+
+  const addStars = useCallback(() => {
+    const starsPosition = [];
+    for (let i = 0; i < numberOfStars; i++) {
+      let x = (Math.random() * 2 - 1) * 10; // Ensure x is within -5 to 5 range
+      let y = (Math.random() * 2 - 1) * 10; // Ensure y is within -5 to 5 range
+      let z = (Math.random() * 2 - 1) * 4; // Ensure z is within -5 to 5 range
+      starsPosition.push([x, y, z]);
+    }
+    setPositions((prev) => [...starsPosition]);
+  }, [numberOfStars])
+
+  useEffect(addStars, []);
+  return (
+    <group ref={starFieldRef} rotation={[0, 0, 1]}>
+      {
+        positions.map((position, index) => (
+          <Star key={index} position={position} />
+        ))
+      }
+    </group>
+  )
+}
+
+
+function Background() {
+
+  return (
+    <div id={Styles['container']}>
+      <Canvas id={Styles['background']} camera={{ fov: 80, position: [0, 0, 7] }} >
+        <ambientLight intensity={1} />
+        <StarField numberOfStars={5000} />
+      </Canvas>
+    </div>
+  );
+}
+
+export default Background;
diff --git a/src/components/BackGround/BackGround.module.css b/src/components/BackGround/BackGround.module.css
@@ -0,0 +1,6 @@
+#container {
+    position: fixed;
+    z-index: -100;
+    height: 100vh;
+    width: 100vw;
+}
diff --git a/src/components/Background/BackGround.module.css b/src/components/Background/BackGround.module.css
@@ -0,0 +1,6 @@
+#container {
+    position: fixed;
+    z-index: -100;
+    height: 100vh;
+    width: 100vw;
+}
diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx
diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx
@@ -32,7 +32,6 @@ function Toast() {
     function handleClose() {
         setIsShow(false);
         if (timeOut) {
-            console.log("cancle");
             clearTimeout(timeOut)
             timeOut = null
         }

diff --git a/src/components/Toast/Toast.module.css b/src/components/Toast/Toast.module.css
@@ -64,6 +64,19 @@
 
 @media (max-width:600px) {
     #toast {
-        left: 20%;
+        left: 15%;
     }
+
+    #container {
+        width: 200px;
+    }
+
+    #toast span {
+        width: 200px;
+    }
+
+    #container img {
+        width: 20px;
+    }
+
 }