data test

src/App.js

@@ -1,31 +1,26 @@
-import { useEffect, useState } from "react";
 import Profile from "./components/Profile/Profile";
 import Search from "./components/Search/Search";
 import Sidebar from "./components/Sidebar/Sidebar";
+import datas from "./data/Profile.json";
 
 function App() {
-  const [developers, setDevelopers] = useState(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch("../data/shyamtawli.json");
-        const data = await response.json();
-        setDevelopers(data);
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      }
-    };
-    fetchData();
-  }, []);
-
-  console.log(developers);
+  function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
 
+  // Shuffle the profiles array randomly
+  const shuffledProfiles = shuffleArray(datas);
   return (
     <div className="App">
       <Sidebar />
       <Search />
-      <Profile />
+      {shuffledProfiles.map((profile) => {
+        return <Profile data={profile} />;
+      })}
     </div>
   );
 }

src/components/Profile/Profile.css

@@ -8,6 +8,7 @@
   background: #1e2a47;
   margin-bottom: 1.5rem;
   padding: 1rem;
+  height: 220px;
   color: #fff;
 }
 

src/components/Profile/Profile.jsx

@@ -7,9 +7,8 @@ import {
   faLinkedin,
   faGithubSquare,
 } from "@fortawesome/free-brands-svg-icons";
-import data from "../../data/shyamtawli.json";
 
-function Profile() {
+function Profile({ data }) {
   return (
     <div className="profile-container">
       <Card data={data} />

src/components/Sidebar/Sidebar.css

@@ -1,4 +1,5 @@
 .sidebar {
+  font-family: "Space Mono", monospace, sans-serif;
   margin-top: 30px;
   margin-bottom: 30px;
   padding: 0px 30px;

src/data/Profile.json

@@ -0,0 +1,62 @@
+[
+  {
+    "name": "Shyam Tawli",
+    "location": "Indore, India",
+    "bio": "I am a Frontend Developer, Currently learning react and exploring open source. Pursuing my degree from Medi-Caps Universtity in Bachelor of Technology from IT department.  ",
+    "avatar": "https://github.com/shyamtawli.png",
+    "portfolio": "https://github.com/shyamtawli",
+    "skills": ["HTML", "CSS", "JavaScript", "ReactJS", "Java"],
+    "social": {
+      "GitHub": "https://github.com/shyamtawli",
+      "Twitter": "https://twitter.com/shyam_tawli",
+      "LinkedIn": "https://linkedin.com/in/shyamtawli"
+    }
+  },
+  {
+    "name": "John Doe",
+    "location": "New York, USA",
+    "bio": "I am a Full Stack Developer with expertise in JavaScript, Node.js, and MongoDB. I have 5 years of experience in building web applications and love to explore new technologies.",
+    "avatar": "https://github.com/johndoe.png",
+    "portfolio": "https://github.com/johndoe",
+    "skills": ["JavaScript", "Node.js", "ReactJS", "MongoDB", "HTML", "CSS"],
+    "social": {
+      "GitHub": "https://github.com/johndoe",
+      "Twitter": "https://twitter.com/johndoe",
+      "LinkedIn": "https://linkedin.com/in/johndoe"
+    }
+  },
+  {
+    "name": "Alice Smith",
+    "location": "London, UK",
+    "bio": "I am a UX/UI Designer with a passion for creating clean and visually appealing user interfaces. I have experience in designing websites and mobile applications for various industries.",
+    "avatar": "https://github.com/alicesmith.png",
+    "portfolio": "https://github.com/alicesmith",
+    "skills": [
+      "(UX) Design",
+      "(UI) Design",
+      "Sketch",
+      "Figma",
+      "InVision",
+      "Adobe XD"
+    ],
+    "social": {
+      "GitHub": "https://github.com/alicesmith",
+      "Twitter": "https://twitter.com/alicesmith",
+      "LinkedIn": "https://linkedin.com/in/alicesmith"
+    }
+  },
+
+  {
+    "name": "Tawli Shyam",
+    "location": "Indore, India",
+    "bio": "Currently learning react and exploring open source. Pursuing my degree from Medi-Caps Universtity ",
+    "avatar": "https://github.com/shyamtawli.png",
+    "portfolio": "https://github.com/shyamtawli",
+    "skills": ["JavaScript", "ReactJS", "Java"],
+    "social": {
+      "GitHub": "https://github.com/tawlishyam",
+      "Twitter": "https://twitter.com/tawli_shyam",
+      "LinkedIn": "https://linkedin.com/in/tawlishyam"
+    }
+  }
+]

src/index.css

@@ -1,6 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
 
 html {
   font-size: 16px;
@@ -15,9 +14,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  /* font-family: "Lato", sans-serif; */
   font-family: "Open Sans", sans-serif;
-  /* font-family: "Space Mono", monospace, sans-serif; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: rgba(20, 29, 47, 1);