Merge pull request #56 from rhondakremer/main

adds my card

src/cardData.json

@@ -12,6 +12,16 @@
           "work": "www.paypal.com"
         }
       }
+    },
+    "rhonda": {
+      "component": "RhondaCard",
+      "data": {
+        "name": "Rhonda Kremer",
+        "title": "Software Engineer @ Invitae",
+        "email": "[email protected]",
+        "linkedin": "http://www.linkedin.com/in/rhondakremer",
+        "github": "https://github.com/rhondakremer"
+      }
     }
   }
 }

src/cards/rhondaCard/rhondaCard.jsx

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { CardContext } from '../../App';
+import image from './rhondapicture.jpg';
+import './rhondaCard.scss';
+
+const RhondaCard = () => {
+    const { rhonda } = useContext(CardContext);
+
+    return (
+        <div className="rhondaCardContainer">
+            <div className="centered">
+                    <img className="image" src={image} alt="rhonda's face" />
+            </div>
+
+            <div className="centered">
+                <h3>{rhonda.data.name}</h3>
+                <p>{rhonda.data.title}</p>
+                <p>{rhonda.data.email}</p>
+                <div>
+                    <a href={rhonda.data.linkedin} rel="noreferrer" target="_blank">LinkedIn</a>&nbsp;&nbsp;
+                    <a href={rhonda.data.github} rel="noreferrer" target="_blank">Github</a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RhondaCard;

src/cards/rhondaCard/rhondaCard.scss

@@ -0,0 +1,37 @@
+.rhondaCardContainer {
+    align-items: center;
+    background: #FEAC5E;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to left, #4bc0c8be, #C779D0, #FEAC5E);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to left, #4bc0c8d3, #C779D0, #FEAC5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: whitesmoke;
+    display: flex;
+    font-weight: 600;
+    height: 100%;
+    justify-content: space-around;
+    text-shadow: 4px 2px 6px #000000;
+
+    h3 {
+        margin-top: 0!important;
+    }
+
+    a {
+        color: hsl(204, 100%, 75%); 
+        font-weight: bold;
+    }
+
+    .centered {
+        text-align: center;
+    }
+
+    .image {
+        border-radius: 50% 20% / 10% 50%;
+        height: 130px;
+        filter:saturate(200%) sepia(30%);
+    }
+
+    @media only screen and (max-width: 768px) {
+        .image {
+            height: 110px;
+        }
+    }
+}

src/cardsDisplay.jsx

@@ -12,6 +12,7 @@ import RachaelCard from "./cards/rachael-tCard/rachael-tCard";
 import ChumleyCard from "./cards/chumleyCard/chumleyCard";
 import BriesCard from './cards/briesCard/briesCard';
 import PalesaCard from './cards/PalesaCard/PalesaCard';
+import RhondaCard from './cards/rhondaCard/rhondaCard';
 
 function CardsDisplay(props) {
   return (
@@ -49,6 +50,9 @@ function CardsDisplay(props) {
       <div>
         <BriesCard />
       </div>
+      <div>
+        <RhondaCard />
+      </div>
     </div>
 
   );