Work card images

components/Work.js

@@ -28,11 +28,13 @@ export const Projects = ({ title, cards }) => {
 				<h1 className="text-light fw-bold">Projects</h1>
 				<div className="d-flex flex-row flex-wrap justify-content-center">
 					{cards.map((value, index) => (
-						<Card
-							key={index}
-							title={value.title}
-							description={value.description}
-							icons={value.icons} />
+							<Card
+								key={index}
+								title={value.title}
+								description={value.description}
+								icons={value.icons}
+								image={value.image}
+								/>
 					))}
 				</div>
 				{/* <div className="text-center">
@@ -43,19 +45,26 @@ export const Projects = ({ title, cards }) => {
 	);
 }
 
-export const Card = ({ title, description, icons }) => {
+export const Card = ({ title, description, icons, image }) => {
 	return (
-		<div className="card py-3 px-3 mx-sm-4 my-4 card-work" style={{ width: "20rem" }}>
-			<h4 className="text-primary">{title}</h4>
-			<p className="text-dark">{description}</p>
-			<div className="text-end">
-				{icons && icons.map((value, index) => (
-					<Link key={index} href={value.link}>
-						<a target="_blank" rel="noreferrer">
-							<FontAwesomeIcon className="icon-style mx-1" icon={value.icon} size="2x" />
-						</a>
-					</Link>
-				))}
+		<div className="col-lg-4 float-left" style={{ width: "23rem" }}>
+			<div className="card py-3 px-3 mx-sm-4 my-4 card-work" style={{ width: "20rem" }}>
+				<h4 className="text-primary">{title}</h4>
+				<img
+					className="card-img-top" style={{ width: 'auto', maxwidth: '100%', height: 'auto', maxHeight: '250px', objectFit: 'scale', objectPosition: '50% 0%' }}
+					src={image}
+					alt="Project image"
+				/>
+				<p className="text-dark">{description}</p>
+				<div className="text-end">
+					{icons && icons.map((value, index) => (
+						<Link key={index} href={value.link}>
+							<a target="_blank" rel="noreferrer">
+								<FontAwesomeIcon className="icon-style mx-1" icon={value.icon} size="2x" />
+							</a>
+						</Link>
+					))}
+				</div>
 			</div>
 		</div>
 	);

config/config.js

@@ -2,6 +2,9 @@
 import profile from './profile.png';
 import { faAppStore, faGithub, faGooglePlay } from '@fortawesome/free-brands-svg-icons';
 import { } from '@fortawesome/free-solid-svg-icons';
+import projectPreview1 from './project-preview-1.png';
+import projectPreview2 from './project-preview-2.png';
+import projectPreview3 from './project-preview-3.png';
 
 export const navigation = {
 	name: "Hashir",
@@ -72,6 +75,7 @@ export const projects = {
 	cards: [
 		{
 			title: "StarBook",
+			image:projectPreview1.src,
 			description: "A digital diary and mood tracking app that helps you in keeping track of your mood and productivity throughout the month/year.",
 			icons: [
 				{
@@ -86,6 +90,7 @@ export const projects = {
 		},
 		{
 			title: "QuranTalk",
+			image: projectPreview2.src,
 			description: "An emotional well being and mental health app. The app helps people to navigate their emotions in the light of the Quran.",
 			icons: [
 				{
@@ -100,6 +105,7 @@ export const projects = {
 		},
 		{
 			title: "Portfolio",
+			image:projectPreview3.src,
 			description: "A portfolio website template that helps you showcase your work, projects and skills as a software developer or freelancer.",
 			icons: [
 				{

styles/custom.global.scss

@@ -149,4 +149,5 @@ a {
 .card-image:hover {
   transform: translate(-0.5rem, -0.5rem);
   box-shadow: 2rem 2rem $primary;
-}
+}
+