Add : sidgureja7803 - Added Voice Search and Skills Dropdown Functionality

public/data/sidgureja7803.json

@@ -0,0 +1,39 @@
+{
+    "name": "Siddhant Gureja",
+    "location": "Rishikesh, Uttarakhand, India",
+    "bio": "Hi! I am Siddhant currently pursuing B.E. in Computer and Electronics. I am a Mern Stack Developer and want to collaborate with fellow developers.",
+    "avatar": "https://github.com/sidgureja7803.png",
+    "portfolio": "https://github.com/sidgureja7803",
+    "skills": [
+      "HTML",
+      "CSS",
+      "JavaScript",
+      "React",
+      "Node.js",
+      "MongoDB",
+      "Express.js",
+      "Redux",
+      "MERN Stack",
+      "Database Management Systems (DBMS)",
+      "Cloud Computing",
+      "AWS",
+      "Docker",
+      "Kubernetes",
+      "NoSQL Databases (MongoDB, Cassandra, Redis)",
+      "Data Structure and Algorithms",
+      "Operating Systems",
+      "System Programming",
+      "Networking",
+      "Software Engineering",
+      "Project Management",
+      "Agile Methodologies",
+      "Version Control Systems (Git, SVN)",
+      "Sc"
+    ],
+    "social": {
+      "GitHub": "https://github.com/sidgureja7803",
+      "Twitter": "https://twitter.com/sidgureja",
+      "LinkedIn": "www.linkedin.com/in/sidgureja"
+    }
+  }
+

src/Homepage.jsx

@@ -9,7 +9,7 @@ import Pagination from './components/Pagination/Pagination';
 import './App.css';
 import filenames from './ProfilesList.json';
 
-function App() {
+function Homepage() {
   const profilesRef = useRef();
   const [profiles, setProfiles] = useState([]);
   const [searching, setSearching] = useState(false);
@@ -75,13 +75,14 @@ function App() {
       } else if (criteria === 'location') {
         return normalizeString(user.location).includes(normalizedValue);
       } else if (criteria === 'skill') {
-        return user.skills.some((skill) => normalizeString(skill).includes(normalizedValue));
+        return user.skills.some((skill) => normalizeString(skill) === normalizedValue);
       }
       return false;
     });
 
     setProfiles(filteredResults);
     setSearching(true);
+    setCurrentPage(1); // Reset to first page when searching
   };
 
   const handleNextPage = () => {
@@ -148,4 +149,4 @@ function App() {
   );
 }
 
-export default App;
+export default Homepage;

src/ProfilesList.json

@@ -320,5 +320,6 @@
   "Pushpa472.json",
   "HarshS16.json",
   "jaya005.json",
-  "divanshiii09.json"
+  "divanshiii09.json",
+   "sidgureja7803.json"
 ]

src/components/Search/Search.jsx

@@ -1,20 +1,82 @@
 import React, { useState, useRef, useEffect } from 'react';
 import useDebounce from '../../hooks/useDebouncer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faMagnifyingGlass, faXmark, faMicrophone } from '@fortawesome/free-solid-svg-icons';
 
 function Search({ onSearch }) {
   const [searchValue, setSearchValue] = useState('');
   const [prevSearchValue, setPrevSearchValue] = useState('');
   const [searchCriteria, setSearchCriteria] = useState('name');
   const searchInput = useRef(null);
+  const [isListening, setIsListening] = useState(false);
+  const [skills, setSkills] = useState([
+    'React',
+    'Redux',
+    'HTML',
+    'CSS',
+    'Tailwind',
+    'Django',
+    'TypeScript',
+    'Figma',
+    'UI',
+    'UX',
+    'C',
+    'C++',
+    'JavaScript',
+    'Python',
+    'Java',
+    'Web Development',
+    'DBMS',
+    'Operating Systems',
+    'Computer Networks',
+    'Machine Learning',
+    'Deep Learning',
+    'Flutter',
+    'Hugging Face',
+    'NLP',
+    'REST APIs',
+    'GraphQL',
+    'Docker',
+    'Kubernetes',
+    'Firebase',
+    'PostgreSQL',
+    'MongoDB',
+    'MySQL',
+    'Node.js',
+    'Express.js',
+    'Git',
+    'GitHub',
+    'TensorFlow',
+    'PyTorch',
+    'Azure',
+    'AWS',
+    'Google Cloud',
+    'Linux',
+    'Cybersecurity',
+    'Microservices',
+    'Blockchain',
+    'Jenkins',
+    'CI/CD',
+    'TDD',
+    'Agile Methodologies',
+    'Data Structures',
+    'Algorithms',
+    'Computer Vision',
+    'Natural Language Processing',
+    'UI Design',
+    'UX Design',
+    'Cloud Computing',
+    'Socket Programming',
+    'Data Mining',
+  ]);
 
   const handleInputChange = (event) => {
     setSearchValue(event.target.value);
   };
 
   const handleCriteriaChange = (event) => {
     setSearchCriteria(event.target.value);
+    setSearchValue('');
   };
 
   const debouncedValue = useDebounce(searchValue, 500);
@@ -57,6 +119,37 @@ function Search({ onSearch }) {
     searchInput.current.focus();
   }, []);
 
+  const handleVoiceSearch = () => {
+    if ('webkitSpeechRecognition' in window) {
+      const recognition = new window.webkitSpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+
+      recognition.onstart = () => {
+        setIsListening(true);
+      };
+
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        setSearchValue(transcript);
+        handleSearch();
+      };
+
+      recognition.onerror = (event) => {
+        console.error('Speech recognition error', event.error);
+        setIsListening(false);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+      };
+
+      recognition.start();
+    } else {
+      alert('Speech recognition is not supported in your browser.');
+    }
+  };
+
   return (
     <div className="relative flex items-center justify-end space-x-4 pb-6">
       <select
@@ -69,28 +162,50 @@ function Search({ onSearch }) {
         <option value="skill">Skill</option>
       </select>
       <div className="relative w-full">
-        <input
-          className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 w-full rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 pr-12 font-spaceMono text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
-          ref={searchInput}
-          type="text"
-          onChange={handleInputChange}
-          value={searchValue}
-          placeholder={`Search user by ${searchCriteria}`}
-          onKeyDown={handleSearchOnEnter}
-        />
+        {searchCriteria === 'skill' ? (
+          <select
+            className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 w-full rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 pr-12 font-spaceMono text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+          >
+            <option value="">Select a skill</option>
+            {skills.map((skill, index) => (
+              <option key={index} value={skill}>
+                {skill}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 w-full rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 pr-12 font-spaceMono text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
+            ref={searchInput}
+            type="text"
+            onChange={handleInputChange}
+            value={searchValue}
+            placeholder={`Search user by ${searchCriteria}`}
+            onKeyDown={handleSearchOnEnter}
+          />
+        )}
         {searchValue ? (
           <FontAwesomeIcon
             onClick={handleDeleteButtonClick}
-            className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-4 top-1/2 -translate-y-1/2 scale-125 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
+            className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-12 top-1/2 -translate-y-1/2 scale-125 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
             icon={faXmark}
           />
         ) : (
           <FontAwesomeIcon
             onClick={handleSearchButtonClick}
-            className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-4 top-1/2 -translate-y-1/2 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
+            className="hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-12 top-1/2 -translate-y-1/2 transform cursor-pointer text-xl text-secondaryColor dark:text-white"
             icon={faMagnifyingGlass}
           />
         )}
+        <FontAwesomeIcon
+          onClick={handleVoiceSearch}
+          className={`hover:text-primaryFocus dark:hover:text-secondaryFocus absolute right-4 top-1/2 -translate-y-1/2 transform cursor-pointer text-xl ${
+            isListening ? 'text-red-500' : 'text-secondaryColor dark:text-white'
+          }`}
+          icon={faMicrophone}
+        />
       </div>
     </div>
   );