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's face +
+ +
+

{rhonda.data.name}

+

{rhonda.data.title}

+

{rhonda.data.email}

+
+ LinkedIn   + Github +
+
+
+ ) +} + +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) {
+
+ +
);