Merge pull request #87 from torendo/lovelace-card

Added Ada Lovelace card

src/cards/lovelaceCard/LovelaceCard.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import './lovelaceCard.scss'
+import image from "./lovelace.png";
+
+function LovelaceCard() {
+  return (
+    <div className="lovelaceCardContainer">
+      <div className="card">
+        <img className="imageContainer" src={image} alt="lovelace-profile"/>
+      </div>
+      <div className="card-info">
+        <h3 className="name-h3">Ada Lovelace</h3>
+        <p className="text-blue">The first computer programmer</p>
+        <a
+          rel="noreferrer"
+          className="social-link"
+          target="_blank"
+          href="https://en.wikipedia.org/wiki/Ada_Lovelace"
+        >
+          Wikipedia
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default LovelaceCard;

src/cards/lovelaceCard/lovelaceCard.scss

@@ -0,0 +1,27 @@
+.lovelaceCardContainer {
+  background-image: linear-gradient(315deg, #ffffff 0%, #ecdbc9 34%);
+  display: flex;
+  height: 100%;
+  padding: 2rem 1rem;
+}
+
+.lovelaceCardContainer .card img {
+  box-shadow: -5px 3px 0 5px #e2a860;
+}
+
+.name-h3 {
+  color: rgb(176, 68, 0);
+}
+
+.social-link {
+  background-color: #E2A860;
+  margin-right: 5px;
+  color: #000;
+  border: solid 1px gray;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.text-blue {
+  color: rgb(29, 50, 89);
+}

src/cardsDisplay.jsx

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