-
-
Projects
-
This is a list of projects I have worked on.
-
- - Project 1
- - Project 2
- - Project 3
-
-
+export default function Projects() {
+ const projectData = {
+ webDevelopment: [
+ {
+ title: 'Mirha Fasion',
+ description: 'Elegant Women’s Premium Quality Wedding Dresses',
+ techStack: 'Shopify, Liquid, Html, CSS, Javascript',
+ deployment: 'Deployed on Shopify',
+ link: 'https://www.mirhafashion.com/',
+ linkLabel: 'View Website',
+ },
+ {
+ title: 'Markhor Wear',
+ description: 'Elegant Men & Women’s Premium Quality Jackets',
+ techStack: 'WordPress, Avada Theme, CSS',
+ deployment: 'Deployed on WordPress',
+ link: 'https://markhoroutwear.com/',
+ linkLabel: 'View Website',
+ },
+ {
+ title: 'RhineStone Belt Store',
+ description: 'Elegant Men & Women’s Premium Quality Belts & Jeans',
+ techStack: 'Shopify, Liquid, CSS, JavaScript',
+ deployment: 'Deployed on Shopify',
+ link: 'https://rhinestonebeltstore.com/',
+ linkLabel: 'View Website',
+ },
+ {
+ title: 'Printer Worlds',
+ description: 'Printers',
+ techStack: 'Shopify, Liquid, CSS, JavaScript',
+ deployment: 'Deployed on Shopify',
+ link: 'https://printerworlds.com/',
+ linkLabel: 'View Website',
+ },
+ {
+ title: 'Ink Cartridge Supply',
+ description: 'Ink Cartridges of Differetn Types',
+ techStack: 'Shopify, Liquid, CSS, JavaScript',
+ deployment: 'Deployed on Shopify',
+ link: 'https://inkcartridgesupply.com/',
+ linkLabel: 'View Website',
+ },
+ {
+ title: 'Get Grate',
+ description: 'premium Design of Caps',
+ techStack: 'Shopify, Liquid, CSS, JavaScript',
+ deployment: 'Deployed on Shopify',
+ link: 'https://getgrate.com/',
+ linkLabel: 'View Website',
+ },
+ ],
+ appDevelopment: [
+ {
+ title: 'Carousel Reels',
+ description: 'Showcase TikTok videos on your Shopify store to attract customers, boost engagement, and enhance aesthetics.',
+ techStack: 'Remix.js, React.js, MongoDB, Shopify, Liquid, CSS, JavaScript, Github, Vercel',
+ deployment: 'Deployed on Vercel',
+ link: 'https://apps.shopify.com/carousel-reels',
+ linkLabel: 'View App',
+ },
+ {
+ title: 'Angie Lobster',
+ description: 'Private Shopify App managing the filtaration of Warehouses or Locaiton based Order, Product Summary, Print Receipt',
+ techStack: 'Remix.js, React.js, MongoDB, Shopify, Liquid, CSS, JavaScript, Github, Vercel',
+ deployment: 'Deployed on Vercel',
+ link: 'https://shop.angieslobster.com/',
+ linkLabel: 'View Website',
+ },
+ ],
+ pyhtonscript: [
+ {
+ title: 'Product Retrieving, Uploading, Updation, Deletion',
+ description: "Create a python script to retrieve, upload, update or delete the products through external API's (Open API's) or Shopify API's",
+ techStack: 'Python on Google Collab',
+ },
+ {
+ title: 'Order Retrieving, Uploading, Updation, Deletion',
+ description: "Create a python script to retrieve, upload, update or delete the orders through Shopify API's",
+ techStack: 'Python on Google Collab',
+ },
+ {
+ title: 'Srcaping the Reviews of the Product & Upload on Shopify',
+ description: "Create a python script to retrieve the product reviews from any site with the help of Selenium or Scraper API's",
+ techStack: 'Python on Google Collab',
+ },
+ ],
+ };
+
+ const renderProjects = (projects) =>
+ projects.map((project, index) => (
+
+
+
{project.title}
+
{project.description}
+
Tech Stack: {project.techStack}
+
{project.deployment}
+
+ {project.linkLabel}
+
-
+ );
+}
diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
index f6a5622..91a227c 100644
--- a/src/components/Skills.jsx
+++ b/src/components/Skills.jsx
@@ -11,6 +11,12 @@ import MongoDBLogoWhite from "../images/MongoDB_White.svg"
import githubCatLogo from "../images/github-mark-white.svg"
import vercelLogo from "../images/vercel-logotype-light.svg"
import PostManLogo from "../images/postman-logo.svg"
+import TikTokLogo from "../images/TikTokapiLogo.svg"
+import MetaLogo from "../images/MetaAPILogo.svg"
+import RestAPILogo from "../images/rest-apiLogo.svg"
+import GraphQLLogo from "../images/GraphQLLogo.png"
+import bootsrtapLogo from "../images/bootstrap-4.svg"
+import tailwindLogo from "../images/tailwindcss-logo.svg"
import React, { useEffect } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { Swiper, SwiperSlide } from 'swiper/react';
@@ -21,21 +27,7 @@ import { Navigation, Mousewheel, Keyboard } from 'swiper/modules';
import { Tooltip } from 'bootstrap';
-const skills = [
- { name: 'HTML', logo: 'html-5-logo.svg', alt: 'HTML', category: 'Frontend' },
- { name: 'CSS', logo: 'css3logo-com.svg', alt: 'CSS', category: 'Frontend' },
- { name: 'JavaScript', logo: 'js-yellow.svg', alt: 'JavaScript', category: 'Frontend' },
- { name: 'JQuery', logo: 'jQuery-Logo_On_Dark.svg', alt: 'JQuery', category: 'Frontend' },
- { name: 'React.js', logo: 'React_logo_dark.svg', alt: 'React.js', category: 'Frontend' },
-];
-
export default function Skills() {
- // Dynamically categorize skills
- const categorizedSkills = skills.reduce((acc, skill) => {
- acc[skill.category] = acc[skill.category] || [];
- acc[skill.category].push(skill);
- return acc;
- }, {});
useEffect(() => {
// Initialize tooltips
@@ -55,31 +47,55 @@ export default function Skills() {
+