add: dylan-dot-c (#1091)

Co-authored-by: Shyam Tawli <[email protected]>

public/data/dylan-dot-c.json

@@ -0,0 +1,25 @@
+{
+  "name": "Dylan Heslop",
+  "location": "New York, USA",
+  "bio": "Full Stack Software Developer, specializes in React, Vue, Supabase, TypsScript, Node.JS. Love making functional web applications and learning new things everyday.",
+  "avatar": "https://github.com/dylan-dot-c.png",
+  "portfolio": "https://www.frontendmentor.io/profile/dylan-dot-c",
+  "skills": [
+    "HTML",
+    "CSS",
+    "JS",
+    "TypeScript",
+    "React",
+    "Vue",
+    "Supabase",
+    "Python",
+    "Node.JS",
+    "Flask",
+    "Responsive Web Design",
+    "Mobile-First Design"
+  ],
+  "social": {
+    "GitHub": "https://github.com/dylan-dot-c",
+    "LinkedIn": "https://www.linkedin.com/in/heslopd23/"
+  }
+}

public/data/tainguyenphat74.json

@@ -10,4 +10,4 @@
     "Twitter": "https://twitter.com/tainguyenphat74",
     "LinkedIn": "https://www.linkedin.com/in/tainguyenphat74"
   }
-}
+}

src/App.js

@@ -58,30 +58,31 @@ function App() {
     return array;
   };
 
- const handleSearch = ({ value, criteria }) => {
+  const handleSearch = ({ value, criteria }) => {
     const normalizeString = (str) =>
-      str.toLowerCase().replace(/\s*,\s*/g, ' ').replace(/\s+/g, ' ').trim();
-
+      str
+        .toLowerCase()
+        .replace(/\s*,\s*/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+
     const normalizedValue = normalizeString(value);
-  
+
     const filteredResults = combinedData.filter((user) => {
       if (criteria === 'name') {
         return normalizeString(user.name).includes(normalizedValue);
       } 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).includes(normalizedValue));
       }
       return false;
     });
-  
+
     setProfiles(filteredResults);
     setSearching(true);
   };
 
-
   const handleNextPage = () => {
     const totalPages = Math.ceil((searching ? profiles.length : combinedData.length) / recordsPerPage);
     if (currentPage < totalPages) {

src/ProfilesList.json

@@ -430,5 +430,6 @@
   "why-deepanshux.json",
   "joselucasapp.json",
   "AnkitMourya12.json",
-  "tainguyenphat74.json"
-]
+  "tainguyenphat74.json",
+  "dylan-dot-c.json"
+]

src/components/Search/Search.jsx

@@ -58,9 +58,9 @@ function Search({ onSearch }) {
   }, []);
 
   return (
-    <div className="relative flex items-center justify-end pb-6 space-x-4">
+    <div className="relative flex items-center justify-end space-x-4 pb-6">
       <select
-        className="h-12 rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 text-base text-secondaryColor outline-none focus:border-primaryFocus focus:bg-primaryLight dark:border-borderColor dark:bg-secondaryColor dark:text-white dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight"
+        className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
         value={searchCriteria}
         onChange={handleCriteriaChange}
       >
@@ -70,7 +70,7 @@ function Search({ onSearch }) {
       </select>
       <div className="relative w-full">
         <input
-          className="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 focus:border-primaryFocus focus:bg-primaryLight dark:border-borderColor dark:bg-secondaryColor dark:text-white dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight"
+          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}
@@ -81,13 +81,13 @@ function Search({ onSearch }) {
         {searchValue ? (
           <FontAwesomeIcon
             onClick={handleDeleteButtonClick}
-            className="absolute top-1/2 right-4 transform -translate-y-1/2 scale-125 cursor-pointer text-xl text-secondaryColor hover:text-primaryFocus dark:text-white dark:hover:text-secondaryFocus"
+            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"
             icon={faXmark}
           />
         ) : (
           <FontAwesomeIcon
             onClick={handleSearchButtonClick}
-            className="absolute top-1/2 right-4 transform -translate-y-1/2 cursor-pointer text-xl text-secondaryColor hover:text-primaryFocus dark:text-white dark:hover:text-secondaryFocus"
+            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"
             icon={faMagnifyingGlass}
           />
         )}