Skip to content

Commit 7dce256

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #314 from ajay-dhangar/dev-1.1
update page
2 parents a35555c + 6c63e63 commit 7dce256

File tree

6 files changed

+1076
-1051
lines changed

6 files changed

+1076
-1051
lines changed

‎src/components/HomePage/Skills/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default function Skills() {
9898
<Skill name="ESLint" to="#" icon="/icons/eslint.svg" />
9999
<Skill name="Prettier" to="#" icon="/icons/prettier.png" />
100100
<Skill name="Docker" to="#" icon="/icons/docker.svg" />
101-
<Skill name="GitHub Actions" to="#" icon="/icons/gitHub-actions.svg" />
101+
<Skill name="GitHub Actions" to="#" icon="/icons/github-actions.svg" />
102102
<Skill name="Lighthouse" to="#" icon="/icons/lighthouse.svg" />
103103
<Skill name="Google Analytics" to="#" icon="/icons/ga.svg" />
104104
<Skill name="Firefox Developer Tools" to="#" icon="/icons/firefox.svg" />

‎src/components/certificates/Filter.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,28 @@ interface FilterProps {
77
onChange: (tech: TechType | "") => void;
88
}
99

10-
const Filter: React.FC<FilterProps> = ({ technologies, selected, onChange }) => {
10+
const Filter: React.FC<FilterProps> = ({
11+
technologies,
12+
selected,
13+
onChange,
14+
}) => {
1115
return (
1216
<select
13-
className="border dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700"
17+
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"
1418
value={selected}
1519
onChange={(e) => onChange(e.target.value as TechType | "")}
1620
>
1721
<option value="">All</option>
1822
{technologies.map((tech) => (
19-
<option key={tech} value={tech}>
23+
<option
24+
key={tech}
25+
value={tech}
26+
>
2027
{tech}
2128
</option>
2229
))}
2330
</select>
2431
);
2532
};
2633

27-
export default Filter;
34+
export default Filter;

‎src/components/certificates/SearchBar.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,32 @@ interface SearchBarProps {
77

88
const SearchBar: React.FC<SearchBarProps> = ({ query, onSearch }) => {
99
return (
10-
<input
11-
type="text"
12-
value={query}
13-
onChange={(e) => onSearch(e.target.value)}
14-
placeholder="Search certificates..."
15-
className="w-full rounded-md p-2 text-gray-700 dark:text-gray-200 outline-none bg-transparent"
16-
/>
10+
<div className="relative w-full">
11+
<svg
12+
width="20"
13+
height="20"
14+
className="DocSearch-Search-Icon absolute top-1/2 left-3 transform -translate-y-1/2"
15+
viewBox="0 0 20 20"
16+
aria-hidden="true"
17+
>
18+
<path
19+
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"
20+
stroke="currentColor"
21+
fill="none"
22+
fill-rule="evenodd"
23+
stroke-linecap="round"
24+
stroke-linejoin="round"
25+
></path>
26+
</svg>
27+
<input
28+
type="text"
29+
value={query}
30+
onChange={(e) => onSearch(e.target.value)}
31+
placeholder="Search certificates..."
32+
className="w-full rounded-md pl-10 p-2 text-gray-700 dark:text-gray-200 outline-none bg-transparent"
33+
/>
34+
</div>
1735
);
1836
};
1937

20-
export default SearchBar;
38+
export default SearchBar;

‎src/components/certificates/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
import Card from "./Card";
88
import Filter from "./Filter";
99
import SearchBar from "./SearchBar";
10-
import { FiSearch } from "react-icons/fi";
1110

1211
const Certificates: React.FC = () => {
1312
const [query, setQuery] = useState("");
@@ -26,7 +25,7 @@ const Certificates: React.FC = () => {
2625
});
2726

2827
return (
29-
<div className="pb-2 pt-2 md:pt-4 p-4 relative overflow-hidden">
28+
<div className="pt-2 md:pt-4 p-4 pb-8 relative overflow-hidden">
3029
<div className="mb-2 mt-2 md:mt-4 p-4 relative overflow-hidden">
3130
<header className="mt-4">
3231
<h1 className="text-3xl font-bold text-gray-800 dark:text-gray-200 text-center">
@@ -42,8 +41,7 @@ const Certificates: React.FC = () => {
4241
</div>
4342

4443
<div className="flex flex-col md:flex-row items-center justify-between gap-4 my-8">
45-
<div className="flex items-center gap-2 rounded-md p-2">
46-
<FiSearch className="text-gray-500 dark:text-gray-400 text-lg w-8 h-8" />
44+
<div className="rounded-md p-2">
4745
<SearchBar query={query} onSearch={setQuery} />
4846
</div>
4947
<div className="flex items-center gap-2">
@@ -60,7 +58,7 @@ const Certificates: React.FC = () => {
6058
))}
6159
</div>
6260
{filteredCertificates.length === 0 && (
63-
<p className="text-gray-600 dark:text-gray-400 mt-4">
61+
<p className="text-gray-600 dark:text-gray-400 mt-4 text-center">
6462
No certificates found.
6563
</p>
6664
)}

‎src/data/certificates.ts‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export type TechType =
1111
| "html"
1212
| "css"
1313
| "javascript"
14+
| "bootstrap"
15+
| "jquery"
1416
| "react"
1517
| "nextjs"
1618
| "typescript"
@@ -42,38 +44,38 @@ export const certificates: Certificate[] = [
4244
imageUrl: "https://img-c.udemycdn.com/course/240x135/4343040_3ac0_5.jpg",
4345
link: "https://www.udemy.com/certificate/UC-1232584b-96be-409d-a0b7-9c0aef3d1f6f/",
4446
},
45-
// {
46-
// id: "",
47-
// title: "",
48-
// technology: ['react'],
49-
// description: "",
50-
// imageUrl: "#",
51-
// link: "",
52-
// },
53-
// {
54-
// id: "",
55-
// title: "",
56-
// technology: ['react'],
57-
// description: "",
58-
// imageUrl: "#",
59-
// link: "",
60-
// },
61-
// {
62-
// id: "",
63-
// title: "",
64-
// technology: ['react'],
65-
// description: "",
66-
// imageUrl: "#",
67-
// link: "",
68-
// },
69-
// {
70-
// id: "",
71-
// title: "",
72-
// technology: ['react'],
73-
// description: "",
74-
// imageUrl: "#",
75-
// link: "",
76-
// },
47+
{
48+
id: "4",
49+
title: "Web Development Wizardry: HTML & CSS Course for Beginners.",
50+
technology: ['html', 'css'],
51+
description: "Learn HTML & CSS to create a website from scratch. Absolutely perfect for beginners.",
52+
imageUrl: "https://img-c.udemycdn.com/course/750x422/4550210_d97b_4.jpg",
53+
link: "https://www.udemy.com/certificate/UC-86a6a565-9ab9-44b1-a86e-68b3932e5a21/",
54+
},
55+
{
56+
id: "5",
57+
title: "Complete Portfolio Website Using HTML CSS NETLIFY Project",
58+
technology: ['html', 'css'],
59+
description: "Learn to create a portfolio website using HTML, CSS and deploy it using Netlify.",
60+
imageUrl: "https://img-c.udemycdn.com/course/750x422/6064327_f790.jpg",
61+
link: "https://www.udemy.com/certificate/UC-53758eb0-bbfb-4df4-ae5a-2dc4333cc8ca/",
62+
},
63+
{
64+
id: "6",
65+
title: "Complete Responsive Web Development: 4 courses in 1",
66+
technology: ['html', 'css', 'javascript', 'bootstrap', 'jquery'],
67+
description: "Learn HTML, CSS, Responsive Design, Flexbox & Grid, Bootstrap, Javascript, jQuery and more!",
68+
imageUrl: "https://img-c.udemycdn.com/course/750x422/1426718_abb7_2.jpg",
69+
link: "https://www.udemy.com/certificate/UC-585cbea3-9319-44aa-938b-cf46ec99eca0/",
70+
},
71+
{
72+
id: "7",
73+
title: "Full Stack Development Course for Beginners",
74+
technology: ['html', 'css', 'javascript', 'react', 'nodejs', 'mongodb'],
75+
description: "Master Web Development Foundations with Board Infinity: Dive into MERN, HTML, CSS, & JS Essentials",
76+
imageUrl: "https://img-c.udemycdn.com/course/750x422/5458112_e6fd_2.jpg",
77+
link: "https://www.udemy.com/course/full-stack-development-course-for-beginners/",
78+
},
7779
// {
7880
// id: "",
7981
// title: "",

0 commit comments

Comments
 (0)