diff --git a/src/cardData.json b/src/cardData.json
index 3d476f6..b53c4b4 100644
--- a/src/cardData.json
+++ b/src/cardData.json
@@ -12,6 +12,16 @@
"work": "www.paypal.com"
}
}
+ },
+ "rhonda": {
+ "component": "RhondaCard",
+ "data": {
+ "name": "Rhonda Kremer",
+ "title": "Software Engineer @ Invitae",
+ "email": "rhondakremer@gmail.com",
+ "linkedin": "http://www.linkedin.com/in/rhondakremer",
+ "github": "https://github.com/rhondakremer"
+ }
}
}
}
\ No newline at end of file
diff --git a/src/cards/rhondaCard/rhondaCard.jsx b/src/cards/rhondaCard/rhondaCard.jsx
new file mode 100644
index 0000000..c8e2074
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
{rhonda.data.name}
+
{rhonda.data.title}
+
{rhonda.data.email}
+
+
+
+ )
+}
+
+export default RhondaCard;
diff --git a/src/cards/rhondaCard/rhondaCard.scss b/src/cards/rhondaCard/rhondaCard.scss
new file mode 100644
index 0000000..61f2ef1
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/cards/rhondaCard/rhondapicture.jpg b/src/cards/rhondaCard/rhondapicture.jpg
new file mode 100644
index 0000000..d9fc04d
Binary files /dev/null and b/src/cards/rhondaCard/rhondapicture.jpg differ
diff --git a/src/cardsDisplay.jsx b/src/cardsDisplay.jsx
index 33bf895..278b1fc 100644
--- a/src/cardsDisplay.jsx
+++ b/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) {
+
+
+
);