Skip to content

Commit

Permalink
Updating the issues and content
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saad-Ahmed-03
Saad-Ahmed-03 committed Nov 22, 2024
1 parent 36fa5ae commit 35de78b
Show file tree
Hide file tree
Showing 7 changed files with 273 additions and 396 deletions.
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand Down Expand Up @@ -40,4 +40,4 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</html>
51 changes: 33 additions & 18 deletions src/components/Education.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,42 @@
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'

export default function Education (){
return (
<>
<div className="education">
<h2>Education</h2>
<div className="education-content">
<div className="education-item">
<h3>Master of Science in Computer Science</h3>
<p>University of California, Los Angeles (UCLA)</p>
<p>2018-2020</p>
</div>
<div className="education-item">
<h3>Bachelor of Science in Computer Science</h3>
<p>University of California, Los Angeles (UCLA)</p>
<p>2014-2018</p>
</div>
<div className="education-item">
<h3>High School Diploma</h3>
<p>Los Angeles High School</p>
</div>
<Container>
<div className="title-header">
<h2 className="fs-70"> Education </h2>
</div>
</div>
<Row>
<Col lg={12}>
<div className="education-item">
<h3>Bachelor of Science in Computer Science (BSCS)</h3>
<h4>PAF-KIET</h4>
<p className='mb-0'>2017-2022</p>
<p>Majors in Machine leaarning | Data Science | Big Data </p>
</div>
</Col>
<hr></hr>
<Col lg={12}>
<div className="education-item">
<h3>Intermediate</h3>
<h4>GDBC Nishtar Road </h4>
<p className='mb-0'>2013-2015</p>
<p> Pre-Engineering </p>
</div>
</Col>
<hr></hr>
<Col lg={12}>
<div className="education-item">
<h3>Matriculation</h3>
<h4>Bahria College N-O-R-E-I </h4>
<p className='mb-0'>2011-2013</p>
<p> Computer Science </p>
</div>
</Col>
</Row>
</Container>
</>
)
}
99 changes: 84 additions & 15 deletions src/components/Experience.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,92 @@
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import DevmontLogo from "../images/DevmontDigital.png"
import CubixLogo from "../images/cubixLogo.svg"
import QureshiLogo from "../images/QE-Logo.webp"


export default function Experience (){
return (
<>
<div className="experience">
<h2>Experience</h2>
<div className="experience-content">
<div className="experience-item">
<h3>Software Engineer</h3>
<p>ABC Company</p>
<p>Jan 2020 - Present</p>
<ul>
<li>Developed and maintained multiple software applications using Java and Python</li>
<li>Collaborated with cross-functional teams to design and implement new features</li>
<li>Improved code quality and reduced bugs by implementing automated testing and code review processes</li>
</ul>
</div>
<Container>
<div className="title-header">
<h2 className="fs-70"> Experience </h2>
</div>
</div>
<Row className='devmontcompany'>
<Col lg={6}>
<div className="experience-item text-start">
<h3>Devmont Digital</h3>
<h4>Senior Shopify Theme & App Developer</h4>
<p className='mb-0'>Feb-2024 - Present</p>
<h4> Job Decsription: </h4>
<ul className="mb-0" style={{ listStyle:"square" }}>
<li>
<p className='mb-0'> Responsible for Development of Shopify Apps for various clients, ensuring seamless integration with Shopify's ecosystem. </p>
</li>
<li>
<p className='mb-0'> Successfully launched and maintained Shopify apps, demonstrating expertise in app development and integration with Shopify's platform. </p>
</li>
</ul>
</div>
</Col>
<Col lg={6} className='d-flex justify-content-center align-items-center'>
<div className="experience-logo">
<a href='https://devmontdigital.io/' target="_blank">
<img src={DevmontLogo} alt='Devmont' title='Devmont'/>
</a>
</div>
</Col>
</Row>
<hr></hr>
<Row className='cubixcompany'>
<Col lg={6}>
<div className="experience-item text-start">
<h3>Cubix</h3>
<h4>Associate Software Engineer</h4>
<p className='mb-0'>Jul-2022 - Dec-2023</p>
<h4> Job Decsription: </h4>
<ul className="mb-0" style={{ listStyle:"square" }}>
<li>
<p className='mb-0'> Responsible for Development of Websites in Shopify with custom functionlaities in Shopify sites. </p>
</li>
<li>
<p className='mb-0'> Successfully launched and maintained Shopify Website, demonstrating expertise in Theme development and App Integration with Shopify's platform. </p>
</li>
</ul>
</div>
</Col>
<Col lg={6} className='d-flex justify-content-center align-items-center'>
<div className="experience-logo">
<a href='https://www.cubix.co/' target="_blank">
<img src={CubixLogo} alt='cubix' title='cubix'/>
</a>
</div>
</Col>
</Row>
<hr></hr>
<Row className='cubixcompany'>
<Col lg={6}>
<div className="experience-item text-start">
<h3>Qureshi Enterprises</h3>
<h4> Internship </h4>
<p className='mb-0'>may-2021 - Sep-2021</p>
<h4> Job Decsription: </h4>
<ul className='mb-0' style={{ listStyle:"square" }}>
<li>
<p className='mb-0'> Successfully launched and maintained Shopify Website named "petologist.pk" now converted to WordPress. </p>
</li>
</ul>
</div>
</Col>
<Col lg={6} className='d-flex justify-content-center align-items-center'>
<div className="experience-logo">
<a href='https://petologist.pk/' target="_blank">
<img src={QureshiLogo} alt='' title='Qureshi Enterprises'/>
</a>
</div>
</Col>
</Row>
</Container>
</>
)
}
}
172 changes: 33 additions & 139 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,37 @@
import React from 'react';
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>
));
import { Navbar, Container, Nav, Col, Row } from 'react-bootstrap';
import MainLogo from '../images/Saad Ahmed logo.png'

export default function Header({
scrollToSkills,
scrollToExperience,
scrollToSkillsRate,
scrollToEducate,
scrollToProject,
}) {
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>
<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>
</Navbar.Collapse>
</Col>
</Row>
</Container>
</Navbar>
);
}
}
Loading

0 comments on commit 35de78b

Please sign in to comment.