Merge pull request #314 from ajay-dhangar/dev-1.1

update page
ajay-dhangar · Nov 21, 2024 · 7dce256 · 7dce256
2 parents a35555c + 6c63e63
commit 7dce256
Show file tree

Hide file tree

Showing 6 changed files with 1,076 additions and 1,051 deletions.
diff --git a/src/components/HomePage/Skills/index.tsx b/src/components/HomePage/Skills/index.tsx
@@ -98,7 +98,7 @@ export default function Skills() {
           <Skill name="ESLint" to="#" icon="/icons/eslint.svg" />
           <Skill name="Prettier" to="#" icon="/icons/prettier.png" />
           <Skill name="Docker" to="#" icon="/icons/docker.svg" />
-          <Skill name="GitHub Actions" to="#" icon="/icons/gitHub-actions.svg" />
+          <Skill name="GitHub Actions" to="#" icon="/icons/github-actions.svg" />
           <Skill name="Lighthouse" to="#" icon="/icons/lighthouse.svg" />
           <Skill name="Google Analytics" to="#" icon="/icons/ga.svg" />
           <Skill name="Firefox Developer Tools" to="#" icon="/icons/firefox.svg" />

diff --git a/src/components/certificates/Filter.tsx b/src/components/certificates/Filter.tsx
@@ -7,21 +7,28 @@ interface FilterProps {
   onChange: (tech: TechType | "") => void;
 }
 
-const Filter: React.FC<FilterProps> = ({ technologies, selected, onChange }) => {
+const Filter: React.FC<FilterProps> = ({
+  technologies,
+  selected,
+  onChange,
+}) => {
   return (
     <select
-      className="border dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700"
+      className="border dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 text-md"
       value={selected}
       onChange={(e) => onChange(e.target.value as TechType | "")}
     >
       <option value="">All</option>
       {technologies.map((tech) => (
-        <option key={tech} value={tech}>
+        <option
+          key={tech}
+          value={tech}
+        >
           {tech}
         </option>
       ))}
     </select>
   );
 };
 
-export default Filter;
+export default Filter;
diff --git a/src/components/certificates/SearchBar.tsx b/src/components/certificates/SearchBar.tsx
@@ -7,14 +7,32 @@ interface SearchBarProps {
 
 const SearchBar: React.FC<SearchBarProps> = ({ query, onSearch }) => {
   return (
-    <input
-      type="text"
-      value={query}
-      onChange={(e) => onSearch(e.target.value)}
-      placeholder="Search certificates..."
-      className="w-full rounded-md p-2 text-gray-700 dark:text-gray-200 outline-none bg-transparent"
-    />
+    <div className="relative w-full">
+      <svg
+        width="20"
+        height="20"
+        className="DocSearch-Search-Icon absolute top-1/2 left-3 transform -translate-y-1/2"
+        viewBox="0 0 20 20"
+        aria-hidden="true"
+      >
+        <path
+          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+          stroke="currentColor"
+          fill="none"
+          fill-rule="evenodd"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => onSearch(e.target.value)}
+        placeholder="Search certificates..."
+        className="w-full rounded-md pl-10 p-2 text-gray-700 dark:text-gray-200 outline-none bg-transparent"
+      />
+    </div>
   );
 };
 
-export default SearchBar;
+export default SearchBar;
diff --git a/src/components/certificates/index.tsx b/src/components/certificates/index.tsx
@@ -7,7 +7,6 @@ import {
 import Card from "./Card";
 import Filter from "./Filter";
 import SearchBar from "./SearchBar";
-import { FiSearch } from "react-icons/fi";
 
 const Certificates: React.FC = () => {
   const [query, setQuery] = useState("");
@@ -26,7 +25,7 @@ const Certificates: React.FC = () => {
   });
 
   return (
-    <div className="pb-2 pt-2 md:pt-4 p-4 relative overflow-hidden">
+    <div className="pt-2 md:pt-4 p-4 pb-8 relative overflow-hidden">
       <div className="mb-2 mt-2 md:mt-4 p-4 relative overflow-hidden">
         <header className="mt-4">
           <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-200 text-center">
@@ -42,8 +41,7 @@ const Certificates: React.FC = () => {
       </div>
 
       <div className="flex flex-col md:flex-row items-center justify-between gap-4 my-8">
-        <div className="flex items-center gap-2 rounded-md p-2">
-          <FiSearch className="text-gray-500 dark:text-gray-400 text-lg w-8 h-8" />
+        <div className="rounded-md p-2">
           <SearchBar query={query} onSearch={setQuery} />
         </div>
         <div className="flex items-center gap-2">
@@ -60,7 +58,7 @@ const Certificates: React.FC = () => {
         ))}
       </div>
       {filteredCertificates.length === 0 && (
-        <p className="text-gray-600 dark:text-gray-400 mt-4">
+        <p className="text-gray-600 dark:text-gray-400 mt-4 text-center">
           No certificates found.
         </p>
       )}

diff --git a/src/data/certificates.ts b/src/data/certificates.ts
@@ -11,6 +11,8 @@ export type TechType =
   | "html"
   | "css"
   | "javascript"
+  | "bootstrap"
+  | "jquery"
   | "react"
   | "nextjs"
   | "typescript"
@@ -42,38 +44,38 @@ export const certificates: Certificate[] = [
     imageUrl: "https://img-c.udemycdn.com/course/240x135/4343040_3ac0_5.jpg",
     link: "https://www.udemy.com/certificate/UC-1232584b-96be-409d-a0b7-9c0aef3d1f6f/",
   },
-  // {
-  //   id: "",
-  //   title: "",
-  //   technology: ['react'],
-  //   description: "",
-  //   imageUrl: "#",
-  //   link: "",
-  // },
-  // {
-  //   id: "",
-  //   title: "",
-  //   technology: ['react'],
-  //   description: "",
-  //   imageUrl: "#",
-  //   link: "",
-  // },
-  // {
-  //   id: "",
-  //   title: "",
-  //   technology: ['react'],
-  //   description: "",
-  //   imageUrl: "#",
-  //   link: "",
-  // },
-  // {
-  //   id: "",
-  //   title: "",
-  //   technology: ['react'],
-  //   description: "",
-  //   imageUrl: "#",
-  //   link: "",
-  // },
+  {
+    id: "4",
+    title: "Web Development Wizardry: HTML & CSS Course for Beginners.",
+    technology: ['html', 'css'],
+    description: "Learn HTML & CSS to create a website from scratch. Absolutely perfect for beginners.",
+    imageUrl: "https://img-c.udemycdn.com/course/750x422/4550210_d97b_4.jpg",
+    link: "https://www.udemy.com/certificate/UC-86a6a565-9ab9-44b1-a86e-68b3932e5a21/",
+  },
+  {
+    id: "5",
+    title: "Complete Portfolio Website Using HTML CSS NETLIFY Project",
+    technology: ['html', 'css'],
+    description: "Learn to create a portfolio website using HTML, CSS and deploy it using Netlify.",
+    imageUrl: "https://img-c.udemycdn.com/course/750x422/6064327_f790.jpg",
+    link: "https://www.udemy.com/certificate/UC-53758eb0-bbfb-4df4-ae5a-2dc4333cc8ca/",
+  },
+  {
+    id: "6",
+    title: "Complete Responsive Web Development: 4 courses in 1",
+    technology: ['html', 'css', 'javascript', 'bootstrap', 'jquery'],
+    description: "Learn HTML, CSS, Responsive Design, Flexbox & Grid, Bootstrap, Javascript, jQuery and more!",
+    imageUrl: "https://img-c.udemycdn.com/course/750x422/1426718_abb7_2.jpg",
+    link: "https://www.udemy.com/certificate/UC-585cbea3-9319-44aa-938b-cf46ec99eca0/",
+  },
+  {
+    id: "7",
+    title: "Full Stack Development Course for Beginners",
+    technology: ['html', 'css', 'javascript', 'react', 'nodejs', 'mongodb'],
+    description: "Master Web Development Foundations with Board Infinity: Dive into MERN, HTML, CSS, & JS Essentials",
+    imageUrl: "https://img-c.udemycdn.com/course/750x422/5458112_e6fd_2.jpg",
+    link: "https://www.udemy.com/course/full-stack-development-course-for-beginners/",
+  },
   // {
   //   id: "",
   //   title: "",