Add Audrea's card

src/cards/audreasCard/audreaCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import './audreaCard.scss';
+import image from './audrea_headshot.jpg';
+
+//
+
+function AudreaCard() {
+  return (
+    <div className="cardContainer">
+
+        <div className="card">
+            <img className="imageContainer" src={image} alt="Headshot of Audrea Cook" />
+        </div>
+
+        <div className="card">
+            <h3>Audrea Cook</h3>
+            <p>Software Engineer</p>
+            <a href="https://codewitch.dev">CodeWitch.dev</a>
+            <br></br>
+            <a href="https://www.github.com/audthecodewitch">GitHub</a>
+            <br></br>
+            <a href="https://www.linkedin.com/in/audreacook">LinkedIn</a>
+      </div>
+
+    </div>
+  );
+}
+
+export default AudreaCard;

src/cards/audreasCard/audreaCard.scss

@@ -0,0 +1,23 @@
+.cardContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  align-items: center;
+}
+.card {
+  margin: auto;
+  //padding: 1rem 1rem 1rem 1rem;
+  //align-items: right;
+  text-align: center;
+  //border: 2px solid white;
+}
+.image {
+  background-image: url(./audrea_headshot.jpg);
+}
+.imageContainer {
+  //align-items: left;
+  width: 120px;
+  height: auto;
+  margin: auto;
+  border-radius: 50%;
+}

src/cardsDisplay.jsx

@@ -19,6 +19,7 @@ import DomsCard from "./cards/domsCard/domsCard";
 import JordanCard from "./cards/mjordanCard/jordanCard";
 import RonisCard from "./cards/ronisCard/roniCard";
 import ParastouCard from "./cards/parastouCard/parastouCard";
+import AudreaCard from "./cards/audreasCard/audreaCard"
 
 function CardsDisplay() {
   const contributors = useContext(CardContext);
@@ -73,6 +74,9 @@ function CardsDisplay() {
       <div>
         <ParastouCard />
       </div>
+      <div>
+        <AudreaCard />
+      </div>
       {Object.keys(contributors).map((contributor) => {
         if (
           contributor !== "brielle" &&