Merge pull request #43 from KesineeP/main

Issue#4/create-your-card

src/cards/kesineeCard/KesineeCard.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import "./kesineeCard.scss";
+import image from "./kesinee_headshot.png";
+
+function KesineeCard() {
+  return (
+    <div className="cardContainer">
+      <div className="card">
+        <img className="imageContainer" src={image} alt="kesinee's headshot" />
+      </div>
+
+      <div className="card">
+        <h3>Kesinee Powers</h3>
+        <p>Front-End Web Developer</p>
+        <p>[email protected]</p>
+
+        <a
+          rel="noreferrer"
+          className="link"
+          target="_blank"
+          href="https://www.linkedin.com/in/kesineepowers/"
+        >
+          {"LinkedIn"}
+        </a>
+        <a
+          rel="noreferrer"
+          className="link"
+          target="_blank"
+          href="https://github.com/KesineeP"
+        >
+          {"GitHub"}
+        </a>
+        <a
+          rel="noreferrer"
+          className="link"
+          target="_blank"
+          href="https://kesineep.github.io/"
+        >
+          {"Portfolio"}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default KesineeCard;

src/cards/kesineeCard/kesineeCard.scss

@@ -0,0 +1,31 @@
+.cardContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  align-items: center;
+}
+.card {
+  margin: auto;
+  text-align: center;
+}
+.imageContainer {
+  width: 120px;
+  height: auto;
+  margin: auto;
+  border-radius: 50%;
+}
+.link {
+  padding: 5px 10px;
+  margin: 0 5px 5px;
+  background-color: rgb(47, 91, 72);
+  box-shadow: 2px 2px 4px grey;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  font-size: smaller;
+}
+.link:hover {
+  background-color: rgb(222, 218, 218);
+  color: cadetblue;
+  text-decoration: none;
+}

src/cardsDisplay.jsx

@@ -3,26 +3,40 @@ import "./cardsDisplay.scss";
 
 import ExampleCard from "./cards/exampleCard/exampleCard";
 import IndigoCard from "./cards/indigoCard/indigoCard";
-import KristiCard from './cards/kristiCard/kristiCard';
-import ChumleyCard from "./cards/chumleyCard/chumleyCard";
-import JennDiazCard from './cards/jennDiazCard/jennDiazCard'
+import KristiCard from "./cards/kristiCard/kristiCard";
+import KesineeCard from "./cards/kesineeCard/KesineeCard";
+import JennDiazCard from "./cards/jennDiazCard/jennDiazCard";
 import RachaelCard from "./cards/rachael-tCard/rachael-tCard";
+import ChumleyCard from "./cards/chumleyCard/chumleyCard";
 import BriesCard from './cards/briesCard/briesCard';
 
 
 function CardsDisplay(props) {
   return (
     <div className="cardholder">
-
-      <div><ExampleCard /></div>
+      <div>
+        <ExampleCard />
+      </div>
+
+      <div>
+        <JennDiazCard />
+      </div>
 
-      <div><JennDiazCard /></div>
+      <div>
+        <IndigoCard />
+      </div>
 
-      <div><IndigoCard /></div>
+      <div>
+        <KristiCard />
+      </div>
 
-      <div><KristiCard /></div>
+      <div>
+        <KesineeCard />
+      </div>
 
-      <div><ChumleyCard /></div>
+      <div>
+        <ChumleyCard />
+      </div>
 
       <div><RachaelCard /></div>