diff --git a/blog/2024-03-15/prompt-engineering-guide.md b/blog/2024-03-15/prompt-engineering-guide.md index 759a1cfde62..bd25488abc8 100644 --- a/blog/2024-03-15/prompt-engineering-guide.md +++ b/blog/2024-03-15/prompt-engineering-guide.md @@ -7,6 +7,8 @@ date: 2020-12-21 15:34:11 Prompt Engineering is a process of creating a prompt that is used to guide the user through a series of steps to achieve a specific goal. It is a powerful tool that can help users complete complex tasks with ease and efficiency. In this guide, we will walk you through the process of creating an effective prompt that will help you achieve your desired outcome. + + ## Step 1: Define the Goal The first step in creating an effective prompt is to define the goal you want to achieve. This could be anything from completing a task, learning a new skill, or solving a problem. By clearly defining the goal, you can create a prompt that guides the user towards that goal. diff --git a/blog/debugging.md b/blog/debugging.md index 071ab74b234..b985364eb16 100644 --- a/blog/debugging.md +++ b/blog/debugging.md @@ -9,6 +9,8 @@ draft: false Debugging tests in a React application can be challenging, but fear not! We've got you covered with this step-by-step guide to help you overcome the common hurdles and make your tests shine. Let's dive in: + + **Step 1: Install Create React App** If you haven't already set up your Create React App project, start by installing it: diff --git a/blog/fix-bug-in-vscode-extension/index.md b/blog/fix-bug-in-vscode-extension/index.md index 61482b3840d..27fd0b358b1 100644 --- a/blog/fix-bug-in-vscode-extension/index.md +++ b/blog/fix-bug-in-vscode-extension/index.md @@ -5,3 +5,43 @@ tags: [vsix, VS Code, extension] date: 2021-11-06 20:51:21 description: How to fix a bug in any VS Code extension (.vsix) by rebuilding that extension --- + +If you are a developer who uses Visual Studio Code (VS Code) regularly, you might have encountered a bug in one of the extensions you use. While you can report the bug to the extension's maintainer, you might also want to fix the bug yourself if you are comfortable with the codebase. In this article, we will walk you through the process of fixing a bug in any VS Code extension by rebuilding that extension from the source code. + + + +## Prerequisites + +Before we begin, make sure you have the following prerequisites: + +- [Visual Studio Code](https://code.visualstudio.com/) installed on your machine. +- [Node.js](https://nodejs.org/) installed on your machine. +- [npm](https://www.npmjs.com/) installed on your machine. +- Basic knowledge of JavaScript and TypeScript. + +## Steps to Fix a Bug in a VS Code Extension + +Here are the steps to fix a bug in a VS Code extension: + +1. **Clone the Extension Repository**: The first step is to clone the repository of the extension you want to fix. You can find the repository link on the extension's marketplace page or GitHub repository. +2. **Install Dependencies**: Navigate to the cloned repository directory and install the dependencies using npm. You can do this by running the following command: + + ```bash + npm install + ``` +3. **Fix the Bug**: Identify the bug you want to fix and make the necessary changes to the codebase. You can use the debugging tools provided by VS Code to help you debug the issue. +4. **Build the Extension**: Once you have fixed the bug, you need to build the extension to generate the `.vsix` file. You can do this by running the following command: + + ```bash + npm run build + ``` +5. **Pack the Extension**: After building the extension, you can pack it to create the `.vsix` file. You can do this by running the following command: + + ```bash + npm run vsce package + ``` +6. **Install the Extension**: Finally, you can install the fixed extension by opening VS Code, navigating to the Extensions view, clicking on the ellipsis (`...`) icon, and selecting "Install from VSIX...". Choose the `.vsix` file you generated in the previous step to install the fixed version of the extension. +7. **Test the Extension**: Once the extension is installed, test it to ensure that the bug has been fixed successfully. You can also share the fixed version of the extension with the community or the extension maintainer. +8. **Contribute Back**: If you have fixed a bug in an open-source extension, consider contributing back to the original repository by creating a pull request. This will help the community benefit from your fix and improve the extension for everyone. + +By following these steps, you can fix bugs in any VS Code extension and contribute to the improvement of the VS Code ecosystem. Happy coding! 🚀 \ No newline at end of file diff --git a/blog/from-ftp-client-to-github-action.md b/blog/from-ftp-client-to-github-action.md index 27d0f4debe8..aa32f693cfa 100644 --- a/blog/from-ftp-client-to-github-action.md +++ b/blog/from-ftp-client-to-github-action.md @@ -9,6 +9,8 @@ draft: false In the early days of web development, the most common way to deploy a website was to use an FTP client. This involved manually uploading files to a remote server, which was a time-consuming and error-prone process. As web development practices evolved, so did the tools and techniques for deploying websites. One of the most significant advancements in this area has been the introduction of continuous integration (CI) and continuous deployment (CD) pipelines, which automate the process of building and deploying web applications. + + In this article, we'll take a look at the evolution of remote file management, from the use of FTP clients to the adoption of GitHub Actions for automated deployment. ## The FTP client era diff --git a/blog/getting-started-with-vite/index.md b/blog/getting-started-with-vite/index.md index 672a70380d9..e80aa7d636e 100644 --- a/blog/getting-started-with-vite/index.md +++ b/blog/getting-started-with-vite/index.md @@ -30,6 +30,8 @@ import './style.css'; Vite is a modern build tool that offers faster development times and optimized builds. It aligns with modern web standards and provides out-of-the-box support for TypeScript, making it an excellent choice for React development. In this blog post, we will learn how to get started with React by creating a new app using Vite. We will follow the steps to set up our development environment and build our first React application. + + ## Quick Start To get started with Vite, we need to have Node.js installed on our system. We can install Node.js by downloading the installer from the official website or using a package manager. Once we have Node.js installed, we can use npm to create a new Vite project with the React template. diff --git a/blog/git-best-practicies.md b/blog/git-best-practicies.md index 25baf918f6a..d5c4f6bca55 100644 --- a/blog/git-best-practicies.md +++ b/blog/git-best-practicies.md @@ -9,6 +9,8 @@ hide_table_of_contents: true Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. In this article, we'll take a look at some best practices for using Git, including how to structure your commits, how to manage branches, and how to collaborate with others. By following these best practices, you can make your development process more efficient and less error-prone. + + ## Commit Often, Perfect Later, Publish Once One of the most important best practices for using Git is to commit your changes often. This means that you should make small, focused commits that capture a single logical change to your code. By committing often, you can keep a detailed history of your changes, which makes it easier to understand the evolution of your codebase and to track down bugs. diff --git a/blog/install-mongodb-linux.md b/blog/install-mongodb-linux.md index ba9e04142de..8f9db2710d4 100644 --- a/blog/install-mongodb-linux.md +++ b/blog/install-mongodb-linux.md @@ -9,6 +9,8 @@ draft: false MongoDB is a popular NoSQL database that is known for its flexibility and scalability. It is widely used in modern web applications and is a great choice for storing and managing large volumes of data. In this article, we will walk you through the process of installing MongoDB on a Linux system, specifically Debian Bullseye. + + ## Step 1: Import the MongoDB GPG Key The first step is to import the MongoDB GPG key, which is used to verify the authenticity of the MongoDB packages. You can do this by running the following command in your terminal: diff --git a/blog/install-mongodb-windows.md b/blog/install-mongodb-windows.md index f79d58e0e14..e96633c5f7b 100644 --- a/blog/install-mongodb-windows.md +++ b/blog/install-mongodb-windows.md @@ -9,6 +9,8 @@ draft: false MongoDB is a popular NoSQL database that is known for its flexibility and scalability. It is widely used in modern web applications and is a great choice for storing and managing large volumes of data. In this article, we will walk you through the process of installing MongoDB on a Windows system. + + ## Step 1: Download the MongoDB Installer The first step is to download the MongoDB installer from the official MongoDB website. You can find the installer at the following URL: [https://www.mongodb.com/try/download/community](https://www.mongodb.com/try/download/community) diff --git a/blog/nvs-one-node-version-per-terminal-in-windows.mdx b/blog/nvs-one-node-version-per-terminal-in-windows.mdx index 50620a7c60b..215d9a7621d 100644 --- a/blog/nvs-one-node-version-per-terminal-in-windows.mdx +++ b/blog/nvs-one-node-version-per-terminal-in-windows.mdx @@ -7,6 +7,34 @@ decription: Install and setup nvs to Windows for PowerShell and Git-Bash draft: false --- -`nvs` is a cross-platform Node.js version manager that allows you to install and use multiple versions of Node.js on the same machine. It is similar to `nvm` for Unix-based systems. `nvs` is a simple and easy-to-use tool that allows you to switch between different versions of Node.js with a single command. +`nvs` is a cross-platform Node.js version manager that allows you to install and use multiple versions of Node.js on the same machine. It is similar to `nvm` for Unix-based systems. `nvs` is a simple and easy-to-use tool that allows you to switch between different versions of Node.js with a single command. + + In this article, we will learn how to install and set up `nvs` on Windows for PowerShell and Git-Bash. + +## Install `nvs` + +To install `nvs` on Windows, you can use the following PowerShell command: + + + +## Set up `nvs` for PowerShell + +To set up `nvs` for PowerShell, you need to add the following line to your PowerShell profile (`$PROFILE`): + +```powershell +nvs --use=8.17.0 +``` + +## Set up `nvs` for Git-Bash + +To set up `nvs` for Git-Bash, you need to add the following line to your Git-Bash profile (`~/.bashrc`): + +```bash +nvs --use=8.17.0 +``` + +## Conclusion + +In this article, we learned how to install and set up `nvs` on Windows for PowerShell and Git-Bash. `nvs` is a powerful tool that allows you to manage multiple versions of Node.js on the same machine, making it easy to switch between different versions for different projects. If you are working on multiple Node.js projects with different version requirements, `nvs` is a great tool to have in your toolkit. Give it a try and see how it can simplify your Node.js development workflow. \ No newline at end of file diff --git a/blog/sed-normalize-md-file-with-regex.md b/blog/sed-normalize-md-file-with-regex.md index 39a6bfdb71a..bcf4363dd87 100644 --- a/blog/sed-normalize-md-file-with-regex.md +++ b/blog/sed-normalize-md-file-with-regex.md @@ -9,6 +9,8 @@ draft: false I have been using [web clipper](https://www.notion.so/web-clipper) to save articles and blog posts for a while now. It's a great tool to save content from the web and organize it in a clean and readable format. However, the markdown files generated by web clipper are not always consistent, and I often find myself manually editing them to make them more readable. + + One of the common issues I encounter is inconsistent formatting of the front matter in the markdown files. The front matter is a block of metadata at the beginning of a markdown file that contains information such as the title, author, tags, date, and description of the content. Here's an example of what the front matter looks like: ```markdown diff --git a/package-lock.json b/package-lock.json index 46169d96c61..57f6d1000bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "express": "^4.18.2", "framer-motion": "^11.3.21", "joi": "^17.12.1", + "lucide-react": "^0.468.0", "passport": "^0.7.0", "passport-github": "^1.1.0", "prism-react-renderer": "^2.3.1", @@ -11277,6 +11278,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.468.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz", + "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/magic-string": { "version": "0.25.9", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", diff --git a/package.json b/package.json index f285d185c62..88c5aac5258 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "express": "^4.18.2", "framer-motion": "^11.3.21", "joi": "^17.12.1", + "lucide-react": "^0.468.0", "passport": "^0.7.0", "passport-github": "^1.1.0", "prism-react-renderer": "^2.3.1", diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx deleted file mode 100644 index 76aaa149f16..00000000000 --- a/src/components/Aboutpage/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import clsx from "clsx"; -import Heading from "@theme/Heading"; -import styles from "./styles.module.css"; - -const aboutImg = "/img/svg/feeling_proud.svg"; -// const aboutImg = "/img/svg/environmental_study.svg"; - -export default function AboutUsSection() { - return ( -
-
-
-
- About Us -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis enim doloremque rem dolorum recusandae asperiores sequi veritatis, fugiat neque cum molestias minus harum dolores est quas alias? Sequi, fugiat eum? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione esse numquam praesentium sequi reprehenderit magnam tempore, dolores quidem ipsum ea consectetur amet sunt labore a quas neque rem laborum consequuntur! -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione esse numquam praesentium sequi reprehenderit magnam tempore, dolores quidem ipsum ea consectetur amet sunt labore a quas neque rem laborum consequuntur! -

-
-
- {/* Placeholder for an about us image */} - About Us -
-
-
-
- ); -} diff --git a/src/components/Aboutpage/styles.module.css b/src/components/Aboutpage/styles.module.css deleted file mode 100644 index 05381578551..00000000000 --- a/src/components/Aboutpage/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.aboutUsSection { - padding: 50px 0; -} \ No newline at end of file diff --git a/src/components/certificates/Card.tsx b/src/components/certificates/Card.tsx deleted file mode 100644 index fb21e2ef9b1..00000000000 --- a/src/components/certificates/Card.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { Certificate } from "../../data/certificates"; -import Link from "@docusaurus/Link"; - -interface CardProps { - certificate: Certificate; -} - -const Card: React.FC = ({ certificate }) => { - return ( -
- {certificate.title} -

- {certificate.title} -

-

- {certificate.description} -

-
- {certificate.technology.map((tech) => ( - - {tech} - - ))} -
- - View Certificate - -
- ); -}; - -export default Card; diff --git a/src/components/certificates/CertificateCard.tsx b/src/components/certificates/CertificateCard.tsx new file mode 100644 index 00000000000..32d3fe757c0 --- /dev/null +++ b/src/components/certificates/CertificateCard.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { ExternalLink, Info } from 'lucide-react'; +import { Certificate } from '../../types/certificate'; + +interface CertificateCardProps { + certificate: Certificate; +} + +export const CertificateCard: React.FC = ({ certificate }) => { + return ( +
+ {certificate.title} +
+

{certificate.title}

+

{certificate.description}

+ +
+ {certificate.tags.map((tag) => ( + + {tag} + + ))} +
+ +
+ + + Details + + + + View Certificate + +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/certificates/Filter.tsx b/src/components/certificates/Filter.tsx deleted file mode 100644 index bfba3d1f861..00000000000 --- a/src/components/certificates/Filter.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { TechType } from "../../data/certificates"; - -interface FilterProps { - technologies: TechType[]; - selected: TechType | ""; - onChange: (tech: TechType | "") => void; -} - -const Filter: React.FC = ({ - technologies, - selected, - onChange, -}) => { - return ( - - ); -}; - -export default Filter; diff --git a/src/components/certificates/SearchBar.tsx b/src/components/certificates/SearchBar.tsx index 14d821bc2f4..4d160b3d056 100644 --- a/src/components/certificates/SearchBar.tsx +++ b/src/components/certificates/SearchBar.tsx @@ -1,38 +1,22 @@ -import React from "react"; +import React from 'react'; +import { Search } from 'lucide-react'; interface SearchBarProps { - query: string; - onSearch: (query: string) => void; + value: string; + onChange: (value: string) => void; } -const SearchBar: React.FC = ({ query, onSearch }) => { +export const SearchBar: React.FC = ({ value, onChange }) => { return ( -
- +
+ onSearch(e.target.value)} + value={value} + onChange={(e) => onChange(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" + className="w-auto pl-10 pr-4 py-2 border border-[var(--ifm-color-primary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ifm-color-primary)] focus:border-transparent dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200" />
); -}; - -export default SearchBar; +}; \ No newline at end of file diff --git a/src/components/certificates/TagFilter/SelectedTags.tsx b/src/components/certificates/TagFilter/SelectedTags.tsx new file mode 100644 index 00000000000..55a12afffbb --- /dev/null +++ b/src/components/certificates/TagFilter/SelectedTags.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { X } from 'lucide-react'; + +interface SelectedTagsProps { + selectedTags: string[]; + onTagRemove: (tag: string) => void; +} + +export const SelectedTags: React.FC = ({ selectedTags, onTagRemove }) => { + if (selectedTags.length === 0) return null; + + return ( +
+ {selectedTags.map((tag) => ( + + {tag} + + + ))} +
+ ); +}; \ No newline at end of file diff --git a/src/components/certificates/TagFilter/TagDropdown.tsx b/src/components/certificates/TagFilter/TagDropdown.tsx new file mode 100644 index 00000000000..66483a909c7 --- /dev/null +++ b/src/components/certificates/TagFilter/TagDropdown.tsx @@ -0,0 +1,65 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { ChevronDown, X } from 'lucide-react'; + +interface TagDropdownProps { + tags: string[]; + selectedTags: string[]; + onTagSelect: (tag: string) => void; + onTagRemove: (tag: string) => void; +} + +export const TagDropdown: React.FC = ({ + tags, + selectedTags, + onTagSelect, + onTagRemove, +}) => { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + return ( +
+ + + {isOpen && ( +
+
+ {tags.map((tag) => ( +
{ + onTagSelect(tag); + setIsOpen(false); + }} + className={`px-3 py-2 text-sm cursor-pointer rounded-md ${ + selectedTags.includes(tag) + ? 'bg-[var(--ifm-color-primary)] text-white' + : 'hover:bg-gray-100 dark:hover:bg-gray-600' + }`} + > + {tag} +
+ ))} +
+
+ )} +
+ ); +}; \ No newline at end of file diff --git a/src/components/certificates/TagFilter/index.tsx b/src/components/certificates/TagFilter/index.tsx new file mode 100644 index 00000000000..ef3cbdac801 --- /dev/null +++ b/src/components/certificates/TagFilter/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { TagDropdown } from './TagDropdown'; +import { SelectedTags } from './SelectedTags'; + +interface TagFilterProps { + tags: string[]; + selectedTags: string[]; + onTagSelect: (tag: string) => void; +} + +export const TagFilter: React.FC = ({ tags, selectedTags, onTagSelect }) => { + const handleTagRemove = (tagToRemove: string) => { + onTagSelect(tagToRemove); + }; + + return ( +
+ + +
+ ); +}; \ No newline at end of file diff --git a/src/components/certificates/index.tsx b/src/components/certificates/index.tsx index 21a9cb03bb0..1dac30ea9a6 100644 --- a/src/components/certificates/index.tsx +++ b/src/components/certificates/index.tsx @@ -1,69 +1,69 @@ -import React, { useState } from "react"; -import { - certificates as allCertificates, - Certificate, - TechType, -} from "../../data/certificates"; -import Card from "./Card"; -import Filter from "./Filter"; -import SearchBar from "./SearchBar"; +import React from "react"; +import { certificates } from "../../data/certificates"; +import { SearchBar } from "./SearchBar"; +import { TagFilter } from "./TagFilter"; +import { CertificateCard } from "./CertificateCard"; +import { Award } from "lucide-react"; +import { useCertificateFilters } from "../../hooks/useCertificateFilters"; -const Certificates: React.FC = () => { - const [query, setQuery] = useState(""); - const [selectedTech, setSelectedTech] = useState(""); - - const technologies = Array.from( - new Set(allCertificates.flatMap((cert) => cert.technology)) - ); - - const filteredCertificates = allCertificates.filter((cert) => { - const matchesQuery = cert.title.toLowerCase().includes(query.toLowerCase()); - const matchesTech = selectedTech - ? cert.technology.includes(selectedTech) - : true; - return matchesQuery && matchesTech; - }); +export const Certificates: React.FC = () => { + const { + searchQuery, + setSearchQuery, + selectedTags, + allTags, + filteredCertificates, + handleTagSelect, + } = useCertificateFilters(certificates); return ( -
-
-
-

- CERTiFiCATES & COURSES +
+
+
+
+ +
+

+ Professional Certifications

-

- Welcome to my certificates page! Here you can find all the courses - and certifications I have completed. Feel free to filter them by - technology or search for a specific certificate. If you want to know - more about a specific certificate, click on it to see more details. +

+ A comprehensive collection of my professional certifications and + achievements in software development and technology.

-

-
+
-
-
- + {/* Filters Section */} +
+
+
+ +
+
+ +
+
-
- + + {/* Certificates Grid */} +
+ {filteredCertificates.map((certificate) => ( + + ))}
+ + {/* Empty State */} + {filteredCertificates.length === 0 && ( +
+

+ No certificates found matching your criteria. +

+
+ )}
-
- {filteredCertificates.map((cert) => ( - - ))} -
- {filteredCertificates.length === 0 && ( -

- No certificates found. -

- )}
); }; - -export default Certificates; diff --git a/src/data/certificates.ts b/src/data/certificates.ts index 9dfb73c92b8..afe1b5a57bf 100644 --- a/src/data/certificates.ts +++ b/src/data/certificates.ts @@ -1,163 +1,38 @@ -export interface Certificate { - id: string; - title: string; - technology: TechType[]; - description: string; - imageUrl: string; - link: string; -} - -export type TechType = - | "html" - | "css" - | "javascript" - | "bootstrap" - | "python" - | "jquery" - | "react" - | "nextjs" - | "typescript" - | "nodejs" - | "express" - | "ChatGPT" - | "mongodb"; +import { Certificate } from '../types/certificate'; export const certificates: Certificate[] = [ { - id: "1", - title: "Javascript Build a Calculator using HTML, CSS and Javascript", - technology: ['html', 'css', 'javascript'], - description: "Learn how to build a calculator using HTML, CSS and Javascript.", - imageUrl: "https://img-c.udemycdn.com/course/480x270/2186830_20f1_2.jpg", - link: "https://www.udemy.com/certificate/UC-a31d605a-ce97-48c2-86e1-cb1887609f1c/", - }, - { - id: "2", - title: "Complete Guide in HTML & CSS - Build Responsive Website", - technology: ['html', 'css'], - description: "Learn how to build a responsive website using HTML and CSS.", - imageUrl: "https://img-c.udemycdn.com/course/750x422/5641604_e106.jpg", - link: "https://www.udemy.com/certificate/UC-3e7df4b3-3ad3-47bf-b921-87979ff56fd2/", - }, - { - id: "3", - title: "Web Design for Beginners: Build Websites in HTML & CSS", - technology: ['html', 'css'], - description: "Learn Web Designing in HTML & CSS and Build Websites.", - 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: "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: "8", - title: "Javascript Practicals Crash Course", - technology: ['javascript'], - description: "Learn javascript Concepts With Javascript Practical Demonstrations and Exercises.", - imageUrl: "https://img-c.udemycdn.com/course/750x422/4200228_c917_2.jpg", - link: "#", - }, - { - id: "9", - title: "Practical CSS3 Mastery Course", - technology: ['css', 'html'], - description: "Learn CSS3 Flexbox, CSS3 Grid, CSS3 Transitions, CSS3 Animations, CSS3 Responsive Design, and so much more!", - imageUrl: "https://img-c.udemycdn.com/course/750x422/4281352_1712.jpg", - link: "https://www.udemy.com/certificate/UC-c7930bb3-2d2b-476b-912f-29b79532ff45/", - }, - { - id: "10", - title: "ChatGPT for Mastering Compelling Content", - technology: ['ChatGPT'], - description: "Learn how to use OpenAI's ChatGPT to generate compelling content for your blog, website, or social media.", - imageUrl: "https://img-c.udemycdn.com/course/750x422/5672298_c693_2.jpg", - link: "https://www.udemy.com/certificate/UC-9474eb80-bcd9-4afb-bcc6-977155e26144/", - }, - { - id: "11", - title: "Fullstack MERN Web-Development", - technology: ['react', 'nodejs', 'mongodb', 'express'], - description: "Learn MERN stack web development by building production ready social network with React, Node, Express, MongoDB and SocketIO", - imageUrl: "https://img-c.udemycdn.com/course/240x135/4656608_c525.jpg", - link: "https://www.udemy.com/course/fullstack-mern-web-development-free-content/", - }, - { - id: "12", - title: "Python Quick Start 40-Minute Beginner's Guide", - technology: ['python'], - description: "Learn Python basics in 40 minutes! This is the perfect Python quick start guide for beginners.", - imageUrl: "https://img-c.udemycdn.com/course/480x270/6243407_9eb3.jpg", - link: "https://www.udemy.com/course/python-quick-start-40-minute-beginners-guide/", - }, - { - id: "13", - title: "ChatGPT - The Complete Beginner Course on How to Use ChatGPT", - technology: ['ChatGPT'], - description: "Learn how to use OpenAI's ChatGPT to generate compelling content for your blog, website, or social media.", - imageUrl: "https://img-c.udemycdn.com/course/750x422/5033810_a59c_4.jpg", - link: "https://www.udemy.com/certificate/UC-c269cb98-956d-42ff-9cf0-16a148a271c5/", - }, - { - id: "14", - title: "CSS Complete Course For Beginners", - technology: ['html', 'css'], - description: "Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.", - imageUrl: "https://img-c.udemycdn.com/course/480x270/4280734_2d17.jpg", - link: "https://www.udemy.com/certificate/UC-81a8f5c8-9ac2-496c-8d05-19dfdbc96609/", - }, - // { - // id: "", - // title: "", - // technology: ['react'], - // description: "", - // imageUrl: "#", - // link: "", - // }, - // { - // id: "", - // title: "", - // technology: ['react'], - // description: "", - // imageUrl: "#", - // link: "", - // }, - // { - // id: "", - // title: "", - // technology: ['react'], - // description: "", - // imageUrl: "#", - // link: "", - // }, - // Add more certificates here -]; + id: '1', + title: 'React Developer Certification', + description: 'Advanced React development including hooks, context, and performance optimization', + imageUrl: 'https://images.unsplash.com/photo-1496171367470-9ed9a91ea931', + date: '2024-01-15', + tags: ['React', 'Frontend', 'Web Development'], + detailsUrl: '#', + certificateUrl: '#', + issuer: 'Meta' + }, + { + id: '2', + title: 'TypeScript Professional', + description: 'Comprehensive TypeScript development and best practices', + imageUrl: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97', + date: '2023-12-20', + tags: ['TypeScript', 'Programming', 'Web Development'], + detailsUrl: '#', + certificateUrl: '#', + issuer: 'Microsoft' + }, + { + id: '3', + title: 'TypeScript Professional', + description: 'Comprehensive TypeScript development and best practices', + imageUrl: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97', + date: '2023-12-20', + tags: ['TypeScript', 'Programming', 'Web Development'], + detailsUrl: '#', + certificateUrl: '#', + issuer: 'Microsoft' + }, + // Add more certificates as needed +]; \ No newline at end of file diff --git a/src/hooks/useCertificateFilters.ts b/src/hooks/useCertificateFilters.ts new file mode 100644 index 00000000000..0ab657ea20f --- /dev/null +++ b/src/hooks/useCertificateFilters.ts @@ -0,0 +1,44 @@ +import { useMemo, useState } from "react"; +import { Certificate } from "../types/certificate"; + +export const useCertificateFilters = (certificates: Certificate[]) => { + const [searchQuery, setSearchQuery] = useState(""); + const [selectedTags, setSelectedTags] = useState([]); + + const allTags = useMemo(() => { + const tags = new Set(); + certificates.forEach((cert) => { + cert.tags.forEach((tag) => tags.add(tag)); + }); + return Array.from(tags).sort(); + }, [certificates]); + + const filteredCertificates = useMemo(() => { + return certificates.filter((cert) => { + const matchesSearch = + cert.title.toLowerCase().includes(searchQuery.toLowerCase()) || + cert.description.toLowerCase().includes(searchQuery.toLowerCase()); + + const matchesTags = + selectedTags.length === 0 || + selectedTags.some((tag) => cert.tags.includes(tag)); + + return matchesSearch && matchesTags; + }); + }, [certificates, searchQuery, selectedTags]); + + const handleTagSelect = (tag: string) => { + setSelectedTags((prev) => + prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag] + ); + }; + + return { + searchQuery, + setSearchQuery, + selectedTags, + allTags, + filteredCertificates, + handleTagSelect, + }; +}; diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx deleted file mode 100644 index 275471d0034..00000000000 --- a/src/pages/about/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Layout from "@theme/Layout"; -import AboutUsSection from "../../components/Aboutpage"; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import React from "react"; - -export default function About() { - const {siteConfig} = useDocusaurusContext(); - return ( - - - - ); -} diff --git a/src/pages/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.md b/src/pages/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.md new file mode 100644 index 00000000000..29df58cd3c8 --- /dev/null +++ b/src/pages/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.md @@ -0,0 +1,59 @@ +--- +id: UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11 +title: HTML For Beginners +hide_table_of_contents: true +hide_title: true +--- + +

+HTML For Beginners +

+ +
+ HTML For Beginners Certificate +
+ +## Description + +This course is designed to help you learn the basics of HTML. It is ideal for beginners who want to learn how to create webpages. The course is structured to provide you with a solid foundation in HTML and help you understand how to create a simple webpage. + +## What I learned: + +- Learn the basic structure for defining HTML webpages +- Understand how a HTML document can be created +- Describe the differences between block level and inline elements +- Understand how various elements can be used within a HTML document + +## Learn Course Content: + +
+Introduction +- Introduction to HTML +- Additional Information on HTML Tags +
+ +
+Getting your first HTML Webpage +- Setup +- Creating your first HTML Webpage +- Instructions to launch HTML Document manually +
+ +
+HTML Element Types +- HTML Element Types +- Element Types Quiz +
+ +
+ +## Certificate Information + +- **Issued by:** Udemy +- **Issue Date:** 2024-08-09 +- **Certificate ID:** UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11 +- **Links:** [Issuer Page](https://www.udemy.com/certificate/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11/) + + \ No newline at end of file diff --git a/src/pages/certificates.tsx b/src/pages/certificates/index.tsx similarity index 67% rename from src/pages/certificates.tsx rename to src/pages/certificates/index.tsx index 1908e4a96ce..6a52a55966d 100644 --- a/src/pages/certificates.tsx +++ b/src/pages/certificates/index.tsx @@ -1,12 +1,12 @@ import React from "react"; -import Certificates from "../components/certificates"; +import { Certificates } from "../../components/certificates"; import Layout from "@theme/Layout"; const CertificatesPage: React.FC = () => { return ( diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx index 0a3512275ee..415a8111dad 100644 --- a/src/theme/Footer/index.tsx +++ b/src/theme/Footer/index.tsx @@ -95,7 +95,7 @@ const Footer: React.FC = () => {
  • About diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 391b9ea992b..b4c8da1cd8a 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -19,7 +19,9 @@ import DocCardList from "@theme/DocCardList"; import TabItem from "@theme/TabItem"; import Tabs from "@theme/Tabs"; import { FaReact } from "react-icons/fa"; - +import MagicButton from "../ui/MagicButton"; +import Link from "@docusaurus/Link"; +import { FaLocationArrow } from "react-icons/fa"; import YoutubeVideo from "../components/YoutubeVideo"; export default { @@ -47,4 +49,7 @@ export default { YoutubeVideo, Lesson, Head, + MagicButton, + Link, + FaLocationArrow, }; diff --git a/src/types/certificate.ts b/src/types/certificate.ts new file mode 100644 index 00000000000..f81ee1a9f7d --- /dev/null +++ b/src/types/certificate.ts @@ -0,0 +1,11 @@ +export interface Certificate { + id: string; + title: string; + description: string; + imageUrl: string; + date: string; + tags: string[]; + detailsUrl: string; + certificateUrl: string; + issuer: string; + } \ No newline at end of file diff --git a/static/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.jpg b/static/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.jpg new file mode 100644 index 00000000000..637ff299a2e Binary files /dev/null and b/static/certificates/UC-d4ff6d0b-0fba-4111-9ad6-6f3df60adf11.jpg differ