github and live demo buttons added to each project

Mansoor-P · Jul 5, 2024 · 7074c45 · 7074c45
1 parent 0a81975
commit 7074c45
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/src/common/ProjectCard.jsx b/src/common/ProjectCard.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-
-function ProjectCard({ src, link, h3, p }) {
+import styles from "../sections/Projects/ProjectsStyles.module.css"
+function ProjectCard({ src, linkGit,linkDemo, h3, p }) {
   return (
-    <a href={link} target="_blank">
+    <div className={styles.a}>
       <img className="hover" src={src} alt={`${h3} logo`} />
       <h3>{h3}</h3>
       <p>{p}</p>
-    </a>
+      <button> <a href={linkGit} >GitHub</a></button>
+      <button> <a href={linkDemo} >Live Demo</a></button>
+    </div>
   );
 }
 

diff --git a/src/sections/Hero/HeroStyles.module.css b/src/sections/Hero/HeroStyles.module.css
@@ -35,6 +35,8 @@ a {
 }
 
 button {
+  margin-right: 10px;
+  margin-top: 10px;
   background-color: var(--btn-color);
   color: var(--btn-text-color);
   border: none;
@@ -45,6 +47,7 @@ button {
   font-weight: bold;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
   transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
+
 }
 
 button:hover {

diff --git a/src/sections/Projects/Projects.jsx b/src/sections/Projects/Projects.jsx
@@ -14,35 +14,39 @@ function Projects() {
       <div className={styles.projectsContainer}>
         <ProjectCard
           src={job}
-          link="https://mj-career.netlify.app/"
+          linkGit="https://mj-career.netlify.app/"
+          linkDemo="https://mj-career.netlify.app/"
           h3="Job Searching Portal"
           p=" A dynamic web application "
         />
         <ProjectCard
           src={food}
-          link="https://github.com/Mansoor-P/food-delivery-app"
+          linkGit="https://github.com/Mansoor-P/food-delivery-app"
+          linkDemo="https://mansoorfoodapp.netlify.app/"
           h3="Food  Delivering App"
           p="Hamburger Restaurant"
         />
         <ProjectCard
           src={portfolio}
-          link="https://github.com/Mansoor-P/Portfolio"
+          linkGit="https://github.com/Mansoor-P/Portfolio"
+          linkDemo="https://mansoorsportfolio.netlify.app/"
           h3="Portfolio"
           p="portfolio"
         />
         <ProjectCard
           src={Ecart}
-          link="https://github.com/Mansoor-P/E-Commerce-Website"
+          linkGit="https://github.com/Mansoor-P/E-Commerce-Website"
+          linkDemo=""
           h3="E-Cart"
           p="E-cart"
         />
         <ProjectCard
           src={Hotel}
-          link="https://github.com/Mansoor-P/hotel_booking"
+          linkGit="https://github.com/Mansoor-P/hotel_booking"
+          linkDemo=""
           h3="Hotel Booking Aeb App"
           p="Hotel Booking Aeb App"
         />
-
       </div>
     </section>
   );

diff --git a/src/sections/Projects/ProjectsStyles.module.css b/src/sections/Projects/ProjectsStyles.module.css
@@ -3,8 +3,8 @@
   flex-direction: column;
   text-align: center;
 
-  a {
-    width: 350px;
+  .a {
+    width: 300px;
     text-decoration: none;
     color: #222;
     transition: transform 200ms ease-in-out;
@@ -13,9 +13,13 @@
     border-radius: 10px;
   }
 
-  a:hover {
+  button a:hover {
     transform: scale(1.05);
   }
+  button a {
+    text-decoration: none;
+    color: white;
+  }
 
   img {
     height: 150px;