Commiting the Updated Code to repository

Saad-Ahmed-03 · Nov 22, 2024 · 36fa5ae · 36fa5ae
1 parent f493fd1
commit 36fa5ae
Show file tree

Hide file tree

Showing 19 changed files with 854 additions and 177 deletions.
diff --git a/src/App.js b/src/App.js
@@ -22,7 +22,6 @@ export default function App() {
     skillsRating: useRef(null),
     education: useRef(null),
     projects: useRef(null),
-    blogs: useRef(null),
     introduction: useRef(null),
   };
 
@@ -91,7 +90,6 @@ export default function App() {
           scrollToSkillsRate={() => scrollToSection(sectionsRef.skillsRating)}
           scrollToEducate={() => scrollToSection(sectionsRef.education)}
           scrollToProject={() => scrollToSection(sectionsRef.projects)}
-          scrollToBlogs={() => scrollToSection(sectionsRef.blogs)}
         />
       </header>
 
@@ -119,12 +117,7 @@ export default function App() {
         <section ref={sectionsRef.projects} id="projects" className="section bg-attractive">
           <Projects />
         </section>
-        <hr></hr>
-        <section ref={sectionsRef.blogs} id="blogs" className="section bg-attractive">
-          <Blogs />
-        </section>
       </div>
-      <hr></hr>
       <footer className="App-footer bg-attractive">
         <Footer />
       </footer>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,39 +1,143 @@
 import React from 'react';
-import { Navbar, Container, Nav, Col, Row } from 'react-bootstrap';
-import MainLogo from '../images/Saad Ahmed logo.png'
+import { Col, Container, Row, Tab, Nav } from 'react-bootstrap';
+
+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) => (
+      <Col lg={4} key={index} className="mb-4">
+        <div className="project-item text-start">
+          <h3>{project.title}</h3>
+          <h4>{project.description}</h4>
+          <p className="mb-0"><strong>Tech Stack:</strong> {project.techStack}</p>
+          <p><strong>{project.deployment}</strong></p>
+          <a href={project.link} target="_blank" rel="noopener noreferrer">
+            {project.linkLabel}
+          </a>
+        </div>
+      </Col>
+    ));
 
-export default function Header({
-  scrollToSkills,
-  scrollToExperience,
-  scrollToSkillsRate,
-  scrollToEducate,
-  scrollToProject,
-  scrollToBlogs,
-}) {
   return (
-          <Navbar expand="lg" className="bg-body-tertiary">
-            <Container fluid="md" className='container-header d-block'>
-                <Row>
-                    <Col lg={2}>
-                        <a className='main-page-link' href='./'> 
-                            <img className="main-logo" src={MainLogo} alt='logo'/>
-                        </a>
-                    </Col>
-                    <Col lg={10} className='container-10'>
-                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
-                        <Navbar.Collapse id="basic-navbar-nav">
-                            <Nav className="me-auto">
-                            <Nav.Link onClick={scrollToSkills}>Skills</Nav.Link>
-                            <Nav.Link onClick={scrollToExperience}>Work Experience</Nav.Link>
-                            <Nav.Link onClick={scrollToSkillsRate}>Skills Rating</Nav.Link>
-                            <Nav.Link onClick={scrollToEducate}>Education</Nav.Link>
-                            <Nav.Link onClick={scrollToProject}>Projects</Nav.Link>
-                            <Nav.Link onClick={scrollToBlogs}>Blogs</Nav.Link>
-                            </Nav>
-                        </Navbar.Collapse>
-                    </Col>
-            </Row>
-            </Container>
-          </Navbar>
+    <Container>
+      <div className="title-header text-start">
+        <h2 className="fs-70">Projects</h2>
+      </div>
+      <Row>
+        <Col lg={12}>
+          <Tab.Container defaultActiveKey="webDevelopment">
+            <Nav variant="tabs" className="justify-content-center">
+              <Nav.Item>
+                <Nav.Link eventKey="webDevelopment">Web Development</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey="appDevelopment">App Development</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey="pyhtonscript">Python Sripting</Nav.Link>
+              </Nav.Item>
+            </Nav>
+            <Tab.Content className="mt-4">
+              <Tab.Pane eventKey="webDevelopment">
+                <Row>{renderProjects(projectData.webDevelopment)}</Row>
+              </Tab.Pane>
+              <Tab.Pane eventKey="appDevelopment">
+                <Row>{renderProjects(projectData.appDevelopment)}</Row>
+              </Tab.Pane>
+              <Tab.Pane eventKey="pyhtonscript">
+                <Row>{renderProjects(projectData.pyhtonscript)}</Row>
+              </Tab.Pane>
+            </Tab.Content>
+          </Tab.Container>
+        </Col>
+      </Row>
+    </Container>
   );
-}
+}
diff --git a/src/components/Intrduction.jsx b/src/components/Intrduction.jsx
@@ -11,7 +11,7 @@ export default function Introduction() {
             <Col xs={12} lg={8}>
                 <div className='intro text-start'>
                     <h1 className='fw-bold fs-70 cusrive-font'>Hi, I am Saad Ahmed</h1>
-                    <p className='fw-normal fs-18 mb-0'>Software Engineer | Shopify Theme & App Developer | Python </p>
+                    <p className='fw-normal fs-18 mb-0'>Software Engineer | Shopify Theme & App | Python </p>
                     <p className='fw-normal fs-18'>
                       Passionate about creating seamless e-commerce experiences, I specialize in Shopify theme and app development, 
                       blending technical expertise with creative problem-solving to help businesses thrive online. With a strong foundation 
@@ -40,4 +40,4 @@ export default function Introduction() {
       </Container>
     </>
   );
-}
+}
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
@@ -1,21 +1,143 @@
-import React from 'react'
+import React from 'react';
+import { Col, Container, Row, Tab, Nav } from 'react-bootstrap';
 
-export default function Projects (){
-  return (
-    <>
-    <div className="container">
-        <div className="row">
-            <div className="col-md-12">
-                <h1>Projects</h1>
-                <p>This is a list of projects I have worked on.</p>
-                <ul>
-                    <li>Project 1</li>
-                    <li>Project 2</li>
-                    <li>Project 3</li>
-                </ul>
-            </div>
+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) => (
+      <Col lg={4} key={index} className="mb-4">
+        <div className="project-item text-start">
+          <h3>{project.title}</h3>
+          <h4>{project.description}</h4>
+          <p className="mb-0"><strong>Tech Stack:</strong> {project.techStack}</p>
+          <p><strong>{project.deployment}</strong></p>
+          <a href={project.link} target="_blank" rel="noopener noreferrer">
+            {project.linkLabel}
+          </a>
         </div>
-    </div>
-    </>
-  )
-}
+      </Col>
+    ));
+
+  return (
+    <Container>
+      <div className="title-header text-start">
+        <h2 className="fs-70">Projects</h2>
+      </div>
+      <Row>
+        <Col lg={12}>
+          <Tab.Container defaultActiveKey="webDevelopment">
+            <Nav variant="tabs" className="justify-content-center">
+              <Nav.Item>
+                <Nav.Link eventKey="webDevelopment">Web Development</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey="appDevelopment">App Development</Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey="pyhtonscript">Python Sripting</Nav.Link>
+              </Nav.Item>
+            </Nav>
+            <Tab.Content className="mt-4">
+              <Tab.Pane eventKey="webDevelopment">
+                <Row>{renderProjects(projectData.webDevelopment)}</Row>
+              </Tab.Pane>
+              <Tab.Pane eventKey="appDevelopment">
+                <Row>{renderProjects(projectData.appDevelopment)}</Row>
+              </Tab.Pane>
+              <Tab.Pane eventKey="pyhtonscript">
+                <Row>{renderProjects(projectData.pyhtonscript)}</Row>
+              </Tab.Pane>
+            </Tab.Content>
+          </Tab.Container>
+        </Col>
+      </Row>
+    </Container>
+  );
+}