Merge branch 'master' of https://github.com/shyamtawli/devFind

public/data/DaniloDO.json

@@ -0,0 +1,12 @@
+{
+  "name": "Danilo Donado",
+  "location": "Lara, Venezuela",
+  "bio": " A self thought developer who wants to improve as a software engineer. Interested in full-stack initiatives and projects, always willing to learn.",
+  "avatar": "https://github.com/DaniloDO.png",
+  "portfolio": "https://github.com/DaniloDO?tab=repositories",
+  "skills": ["HTML/CSS", "JavaScript/TypeScript", "NodeJS", "ReactJS", "MySQL", "Python", "Laravel/PHP"],
+  "social": {
+    "GitHub": "https://github.com/DaniloDO",
+    "LinkedIn": "https://www.linkedin.com/in/danilo-donado-4a5655168/?locale=en_US"
+  }
+}

public/data/KaptainCS3.json

@@ -0,0 +1,13 @@
+{
+  "name": "Leonard Appelgryn",
+  "location": "Buea, Cameroon",
+  "bio": "I am a self-motivated individual who is always eager to learn new technologies and approaches to programming.In my free time, enjoys reading about the latest trends in software development and experimenting with new coding techniques",
+  "avatar": "https://github.com/KaptainCS3.png",
+  "portfolio": "https://github.com/KaptainCS3",
+  "skills": ["HTML", "CSS", "Tailwind", "Javascript", "ReactJS", "Git", "Github", "MySQL", "Figma", "UML"],
+  "social": {
+    "GitHub": "https://github.com/KaptainCS3",
+    "Twitter": "https://twitter.com/KaptainCS3",
+    "LinkedIn": "https://www.linkedin.com/in/leonard_appelgryn_>"
+  }
+}

public/data/SagarBawanthade.json

@@ -0,0 +1,13 @@
+{
+  "name": "Sagar Bawanthade",
+  "location": "Pune,India",
+  "bio": "Open source Contributor a MERN Stack Developer currently learning DevOps",
+  "avatar": "https://github.com/SagarBawanthade.png",
+  "portfolio": "https://github.com/SagarBawanthade",
+  "skills": ["Java", "Python", "MERN Stack", "GIT", "GITHUB", "DevOps"],
+  "social": {
+    "GitHub": "https://github.com/SagarBawanthade",
+    "Twitter": "https://twitter.com/s__bawanthade",
+    "LinkedIn": "https://www.linkedin.com/in/sagar-bawanthade-99450b27b"
+  }
+}

public/data/rawasaditya.json

@@ -0,0 +1,13 @@
+{
+  "name": "Aditya Rawas",
+  "location": "Pune, India",
+  "bio": "Tech enthusiast and Full Stack Developer specializing in React and Node.js creating innovative solutions. Seeking opportunities to collaborate and contribute to the ever-evolving tech community. Currently learning Svelte",
+  "avatar": "https://github.com/rawasaditya.png",
+  "portfolio": "https://github.com/rawasaditya",
+  "skills": ["HTML", "CSS", "Tailwind", "SCSS", "JavaScript", "ReactJS", "NextJS", "React-Redux", "Svelte"],
+  "social": {
+    "GitHub": "https://github.com/rawasaditya",
+    "Twitter": "https://twitter.com/rawas_aditya",
+    "LinkedIn": "https://www.linkedin.com/in/aditya-rawas-626578149/"
+  }
+}

public/data/roc102.json

@@ -0,0 +1,23 @@
+{
+  "name": "Mohammad Fahad Rahman",
+  "location": "Bhubaneswar India",
+  "bio": "Experienced Full Stack Developer specializing in React, Node.js, Express, PostgreSQL, and REST API. Passionate about innovating web solutions, contributing to open source, and staying versatile in the ever-evolving tech landscape.",
+  "avatar": "https://github.com/roc102.png",
+  "portfolio": "https://github.com/roc102",
+  "skills": [
+    "JavaScript",
+    "ReactJS",
+    "NextJS",
+    "NodeJs",
+    "ExpressJs",
+    "PostgreSQL",
+    "Tailwind",
+    "Redux",
+    "Tachyons",
+    "RestAPI"
+  ],
+  "social": {
+    "GitHub": "https://github.com/roc102",
+    "LinkedIn": "https://www.linkedin.com/in/mohammad-fahad-rahman-a41a92233/"
+  }
+}

public/data/salmanakhtar57.json

@@ -0,0 +1,13 @@
+{
+  "name": "Salman Akhtar",
+  "location": "Pakistan",
+  "bio": "Python developer and Machine Learning enthusiast. I love to work on new ideas and projects.",
+  "avatar": "https://github.com/salmanakhtar57.png",
+  "portfolio": "https://github.com/salmanakhtar57",
+  "skills": ["Python", "Machine Learning", "Open Source"],
+  "social": {
+    "GitHub": "https://github.com/salmanakhtar57",
+    "Twitter": "https://twitter.com/salman_codes",
+    "LinkedIn": "https://www.linkedin.com/in/salman-akhtar-09a210198/"
+  }
+}

public/data/shivanshu814.json

@@ -0,0 +1,19 @@
+{
+  "name": "Shivanshu Pathak",
+  "location": "Noida, India",
+  "bio": "Experienced Full Stack Developer with strong problem-solving skills. Proficient in C++, Python, JavaScript, TypeScript, Flutter. Passionate about learning and collaborating on diverse projects.",
+  "avatar": "https://github.com/shivanshu814.png",
+  "portfolio": "https://shivanshupathak.pages.dev",
+  "skills": [
+    "Problem Solving Skills",
+    "Software Developer",
+    "Network Defender",
+    "FullStack Developer",
+    "Android Developer"
+  ],
+  "social": {
+    "GitHub": "https://github.com/shivanshu814",
+    "Twitter": "https://twitter.com/Shivanshu814",
+    "LinkedIn": "https://www.linkedin.com/in/shivanshu-pathak-6611b5228"
+  }
+}

public/data/vigdisha.json

@@ -0,0 +1,13 @@
+{
+  "name": "Disha Vig",
+  "location": "Chandigarh, India",
+  "bio": "I am a full stack developer and a data anlaytics enthusiast",
+  "avatar": "https://github.com/vigdisha.png",
+  "portfolio": "https://github.com/vigdisha/portfolio",
+  "skills": ["HTML", "CSS", "JS", "React", "Nodejs", "mongodb"],
+  "social": {
+    "GitHub": "https://github.com/vigdisha",
+    "Twitter": "https://twitter.com/coffeebreath18",
+    "LinkedIn": "https://www.linkedin.com/in/disha-vig"
+  }
+}

public/data/ztest95.json

@@ -0,0 +1,11 @@
+{
+  "name": "Ztest95",
+  "location": "Manila, Philippines",
+  "bio": "Computer Science Student, specializing in whatever is cool / fun",
+  "avatar": "https://github.com/ztest95.png",
+  "portfolio": "https://github.com/ztest95",
+  "skills": ["HTML", "CSS", "Javascript", "Django", "Python", "Git"],
+  "social": {
+    "GitHub": "https://github.com/ztest95"
+  }
+}

src/App.js

@@ -4,16 +4,22 @@ import Search from './components/Search/Search';
 import Sidebar from './components/Sidebar/Sidebar';
 import ErrorPage from './components/ErrorPage/ErrorPage';
 import NoResultFound from './components/NoResultFound/NoResultFound';
+import Pagination from './components/Pagination/Pagination';
 import './App.css';
+import './components/Pagination/Pagination.css';
 import filenames from './ProfilesList.json';
 
 function App() {
   const [profiles, setProfiles] = useState([]);
   const [searching, setSearching] = useState(false);
   const [combinedData, setCombinedData] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [shuffledProfiles, setShuffledProfiles] = useState([]);
+  const recordsPerPage = 20;
+
   const currentUrl = window.location.pathname;
+
   useEffect(() => {
-    // Function to fetch data from a JSON file
     const fetchData = async (file) => {
       try {
         const response = await fetch(file);
@@ -25,69 +31,93 @@ function App() {
       }
     };
 
-    // Function to combine data from multiple JSON files
     const combineData = async () => {
       try {
         const promises = filenames.map((file) => fetchData(`/data/${file}`));
         const combinedData = await Promise.all(promises);
-
         setCombinedData(combinedData);
+        setShuffledProfiles(shuffleProfiles(combinedData));
       } catch (error) {
         console.error('Error combining data:', error);
         setCombinedData([]);
+        setShuffledProfiles([]);
       }
     };
 
     combineData();
   }, []);
 
+  const shuffleProfiles = (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;
+  };
+
   const handleSearch = (searchValue) => {
     const lowercaseSearch = searchValue.toLowerCase();
-    const results = [];
-
-    for (const object of combinedData) {
+    const results = combinedData.filter((object) => {
       const lowercaseName = object.name.toLowerCase();
       const lowercaseLocation = object.location.toLowerCase();
       const matchingSkills = object.skills.filter((skill) => skill.toLowerCase().includes(lowercaseSearch));
-      if (
+      return (
         matchingSkills.length > 0 ||
         lowercaseName.includes(lowercaseSearch) ||
         lowercaseLocation.includes(lowercaseSearch)
-      ) {
-        results.push(object);
-      }
-    }
+      );
+    });
 
     setSearching(true);
     setProfiles(results);
+    setCurrentPage(1);
   };
 
-  const shuffleProfiles = (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]];
+  const handleNextPage = () => {
+    const totalPages = Math.ceil((searching ? profiles.length : combinedData.length) / recordsPerPage);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
     }
-    return array;
   };
 
-  const shuffledProfiles = shuffleProfiles(combinedData);
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [currentPage]);
+
+  const getPaginatedData = () => {
+    const data = searching ? profiles : shuffledProfiles;
+    const startIndex = (currentPage - 1) * recordsPerPage;
+    const endIndex = startIndex + recordsPerPage;
+    return data.slice(startIndex, endIndex);
+  };
+
+  const renderProfiles = () => {
+    const paginatedData = getPaginatedData();
+    return paginatedData.map((currentRecord, index) => <Profile data={currentRecord} key={index} />);
+  };
+
   return (
     <div className="App">
       <Sidebar />
+      <Search onSearch={handleSearch} />
       {currentUrl === '/' ? (
         <>
-          <Search onSearch={handleSearch} />
-          {profiles.length === 0 && searching ? (
-            <NoResultFound />
-          ) : profiles.length === 0 && !searching ? (
-            shuffledProfiles.map((profile, index) => {
-              return <Profile data={profile} key={index} />;
-            })
-          ) : (
-            profiles.map((profile, index) => {
-              return <Profile data={profile} key={index} />;
-            })
-          )}
+          {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
+          <Pagination
+            currentPage={currentPage}
+            totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
+            onNextPage={handleNextPage}
+            onPrevPage={handlePrevPage}
+          />
         </>
       ) : (
         <ErrorPage />

src/ProfilesList.json

@@ -1,4 +1,6 @@
 [
+  "SagarBawanthade.json",
+  "shivanshu814.json",
   "ansisme.json",
   "therealtmmy.json",
   "Praveenkumar.json",
@@ -106,5 +108,12 @@
   "anubhav1206.json",
   "Yvad60.json",
   "avinashji1302.json",
-  "wasifdv.json"
+  "wasifdv.json",
+  "KaptainCS3.json",
+  "salmanakhtar57.json",
+  "vigdisha.json",
+  "ztest95.json",
+  "DaniloDO.json",
+  "rawasaditya.json",
+  "roc102.json"
 ]

src/components/Pagination/Pagination.css

@@ -0,0 +1,34 @@
+.pagination {
+  margin-left: 12rem;
+  padding: 1rem 1rem 1rem 1rem;
+  height: auto;
+  text-align: center;
+}
+
+.pagination-button {
+  background-color: inherit;
+  padding: 1rem;
+  margin-left: 3rem;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  border: none;
+  width: 60px;
+}
+
+.pagination-text {
+  color: white;
+  text-decoration: none;
+  font-family: 'Space Mono', monospace, sans-serif;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.pagination-text:hover {
+  color: #00a6fb;
+}
+
+.pagination-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

src/components/Pagination/Pagination.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+function Pagination({ currentPage, totalPages, onNextPage, onPrevPage }) {
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      onPrevPage();
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      onNextPage();
+    }
+  };
+
+  return (
+    <div className="pagination">
+      <button onClick={handlePrevPage} disabled={currentPage === 1} className="pagination-button">
+        <span href="#" className="pagination-text">
+          Previous
+        </span>
+      </button>
+      <button
+        onClick={handleNextPage}
+        type="submit"
+        disabled={currentPage === totalPages}
+        className="pagination-button "
+      >
+        <span href="#" className="pagination-text">
+          Next
+        </span>
+      </button>
+    </div>
+  );
+}
+
+export default Pagination;

src/components/Profile/Profile.css

@@ -75,6 +75,7 @@
   white-space: nowrap;
   height: 30px;
   cursor: default;
+  display: inline;
 }
 
 .profile-link a {