Light version of Allie's card

src/cards/AlliesCard/AlliesCard.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "./AlliesCard.scss";
+import image from "./allies_headshot.JPG";
+
+function AlliesCard() {
+  return (
+    <div className="cardContainer">
+      <div className="card">
+        <img
+          className="allieImageContainer"
+          src={image}
+          alt="example headshot of a woman"
+        />
+      </div>
+
+      <div className="card">
+        <h3>Allie LeFever</h3>
+        <p>Software Engineer</p>
+        <a href="https://www.linkedin.com/in/allie-lefever/">LinkedIn</a>
+      </div>
+    </div>
+  );
+}
+
+export default AlliesCard;

src/cards/AlliesCard/AlliesCard.scss

@@ -0,0 +1,24 @@
+.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(./allies_headshot.JPG);
+}
+.allieImageContainer {
+  //align-items: left;
+  width: 120px;
+  height: auto;
+  margin: auto;
+  border-radius: 50%;
+  box-shadow: 5px 10px #00ffff44;
+}

src/cardsDisplay.jsx

@@ -22,6 +22,7 @@ import AudreaCard from "./cards/audreasCard/audreaCard";
 import LovelaceCard from "./cards/lovelaceCard/LovelaceCard";
 import KatyaCard from "./cards/katyaCard/katyaCard";
 import ExampleCard from "./cards/exampleCard/exampleCard";
+import AlliesCard from "./cards/AlliesCard/AlliesCard";
 import RachelWCard from "./cards/rachelWCard/rachelWCard";
 import AshleighCard from "./cards/aHalverstadtCard/aHalverstadtCard";
 import RachelCard from "./cards/rachelCard/rachelCard";
@@ -50,6 +51,7 @@ function CardsDisplay() {
     { name: "Parastou", component: <ParastouCard /> },
     { name: "Audrea", component: <AudreaCard /> },
     { name: "Ada", component: <LovelaceCard /> },
+    { name: "Allie", component: <AlliesCard /> },
     { name: "Rachel", component: <RachelWCard />},
     { name: "Ashleigh", component: <AshleighCard /> },
     { name: "Rachel", component: <RachelCard /> },
@@ -108,11 +110,21 @@ function CardsDisplay() {
   return (
     <>
       <div className="sort-by-bar">
-        <button className="btn btn-main" onClick={() => setDisplayedCards(initialCards)}>Initial</button>
-        <button className="btn btn-main" onClick={() => setDisplayedCards(sortedCards)}>
+        <button
+          className="btn btn-main"
+          onClick={() => setDisplayedCards(initialCards)}
+        >
+          Initial
+        </button>
+        <button
+          className="btn btn-main"
+          onClick={() => setDisplayedCards(sortedCards)}
+        >
           Alphabetical
         </button>
-        <button className="btn btn-main" onClick={() => randomizeCards()}>Randomize</button>
+        <button className="btn btn-main" onClick={() => randomizeCards()}>
+          Randomize
+        </button>
       </div>
       <div className="cardholder">
         {displayedCards.map((card, i) => {