Merge pull request #65 from mjordancodes/mj/card

added my(jordan) card
women-who-software · Oct 20, 2021 · c5b3db3 · c5b3db3
2 parents 6b9d625 + 2b1a37a
commit c5b3db3
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 21 deletions.
diff --git a/CREDITS.md b/CREDITS.md
@@ -1,11 +1,12 @@
 # Credits
 
-[Bay Chairangsaris](https://github.com/BayLadyCoder), Frontend Developer from York, PA   
-[Kesinee Powers](https://github.com/KesineeP), Frontend Developer from Florida   
-[Noon Schluntz](https://github.com/Nuanjan), A Bootcamp student and Future Frontend Developer South Berwick, ME   
-[Chayanit McCormick](https://github.com/chay-chay), Frontend Developer from Easton, PA   
-[Rebecca Chumley](https://github.com/rebeccachumley), Frontend Developer from Fredericksburg, VA   
-[Jennifer Grenier Diaz](https://github.com/JAGrenier), Full Stack Software Engineer from Fort Collins, CO   
+[Bay Chairangsaris](https://github.com/BayLadyCoder), Frontend Developer from York, PA  
+[Kesinee Powers](https://github.com/KesineeP), Frontend Developer from Florida  
+[Noon Schluntz](https://github.com/Nuanjan), A Bootcamp student and Future Frontend Developer South Berwick, ME  
+[Chayanit McCormick](https://github.com/chay-chay), Frontend Developer from Easton, PA  
+[Rebecca Chumley](https://github.com/rebeccachumley), Frontend Developer from Fredericksburg, VA  
+[Jennifer Grenier Diaz](https://github.com/JAGrenier), Full Stack Software Engineer from Fort Collins, CO  
 [Rachael Thomas](https://github.com/rachael-t), Frontend Developer from Denver, CO  
 [Supamas Sirichotiyakul](https://github.com/supamasS), Software Engineer from Gilbert, AZ & New Hartford, NY  
 [Dominika Wilk Avila](https://github.com/domsbytes), Sr Software Engineer from Phoenix, AZ
+[Jordan Levine](https://github.com/mjordancodes), CSS Engineer from Denver, CO
diff --git a/src/cardData.json b/src/cardData.json
@@ -22,6 +22,20 @@
         "linkedin": "http://www.linkedin.com/in/rhondakremer",
         "github": "https://github.com/rhondakremer"
       }
+    },
+    "jordan": {
+      "component": "JordanCard",
+      "data": {
+        "name": "Jordan Levine",
+        "title": "CSS Engineer",
+        "company": "Universe",
+        "company-url": "https:onuniverse.com",
+        "email": "[email protected]",
+        "sites": {
+          "main": "https://mjordan.codes",
+          "link-list": "https://mjordan.onuniverse.com"
+        }
+      }
     }
   }
-}
+}
diff --git a/src/cards/mjordanCard/jordan.png b/src/cards/mjordanCard/jordan.png
diff --git a/src/cards/mjordanCard/jordanCard.jsx b/src/cards/mjordanCard/jordanCard.jsx
@@ -0,0 +1,66 @@
+import React, { useContext } from "react";
+import { CardContext } from "../../App";
+import "./jordanCard.scss";
+import image from "./jordan.png";
+
+//
+
+function JordanCard() {
+  const { jordan } = useContext(CardContext);
+
+  return (
+    <div className="cardContainer mj-card-container">
+      <div className="card">
+        <svg
+          viewBox="0 0 288 300.41"
+          xmlns="http://www.w3.org/2000/svg"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          strokeLinejoin="round"
+        >
+          <clipPath id="mask">
+            <path
+              d="M223.64,89.77c-0.26-3.79,11.46-17.08,13.58-20.23c22.72-33.79-42.79-116.86-185.2-5.23
+	C-81.3,168.8,150.51,179.94,85.9,254.3s168.86,22.31,182.7-8.46C282.07,215.92,232.5,220.73,223.64,89.77z"
+            />
+          </clipPath>
+          <image
+            width="100%"
+            height="100%"
+            clipPath="url(#mask)"
+            preserveAspectRatio="xMidYMid slice"
+            href={image}
+          />
+        </svg>
+      </div>
+
+      <div className="card">
+        <div className="card-details">
+          <h3>{jordan.data.name}</h3>
+          <p>
+            I'm a <span>{jordan.data.title}</span> at{" "}
+            <span>
+              <a href={jordan.data["company-url"]}>{jordan.data.company}</a>
+            </span>
+          </p>
+          <p>
+            <a href={`mailto:${jordan.data.email}`}>{jordan.data.email}</a>
+          </p>
+          {Object.keys(jordan.data.sites || {}).map((label, idx) => (
+            <p key={`s-${idx}`}>
+              <a
+                href={`${jordan.data.sites[label]}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {jordan.data.sites[label].substring(8)}
+              </a>
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default JordanCard;
diff --git a/src/cards/mjordanCard/jordanCard.scss b/src/cards/mjordanCard/jordanCard.scss
@@ -0,0 +1,61 @@
+.mj-card-container {
+  // grid-template-columns: 120px 1fr;
+  background: linear-gradient(
+    -45deg,
+    rgba(255, 159, 159, 1),
+    rgba(251, 198, 133, 1),
+    rgba(251, 241, 121, 1),
+    rgba(169, 252, 126, 1),
+    rgba(130, 240, 200, 1),
+    rgba(149, 202, 228, 1),
+    rgba(168, 168, 216, 1),
+    rgba(203, 166, 200, 1),
+    rgba(255, 159, 159, 1)
+  );
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.mj-card-container .card .card-details {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: stretch;
+}
+
+.mj-card-container p,
+.mj-card-container h3 {
+  background: white;
+  padding: 0 4px;
+  margin: 0;
+}
+
+.mj-card-container h3 {
+  border-bottom: 2px solid rgb(22, 134, 190);
+}
+
+.mj-card-container p span {
+  font-weight: bold;
+}
+
+.mj-card-container a {
+  color: black;
+}
+
+.mj-card-container a:hover {
+  text-decoration: none;
+  color: rgb(22, 134, 190);
+}
diff --git a/src/cardsDisplay.jsx b/src/cardsDisplay.jsx
@@ -1,20 +1,21 @@
 import React from "react";
 import "./cardsDisplay.scss";
 
-import ExampleCard from './cards/exampleCard/exampleCard';
-import KayleesCard from './cards/kayleesCard/kayleesCard'
+import ExampleCard from "./cards/exampleCard/exampleCard";
+import KayleesCard from "./cards/kayleesCard/kayleesCard";
 import IndigoCard from "./cards/indigoCard/indigoCard";
-import KristiCard from './cards/kristiCard/kristiCard';
-import ChayCard from './cards/ChayCard/ChayCard'
+import KristiCard from "./cards/kristiCard/kristiCard";
+import ChayCard from "./cards/ChayCard/ChayCard";
 import KesineeCard from "./cards/kesineeCard/KesineeCard";
 import JennDiazCard from "./cards/jennDiazCard/jennDiazCard";
 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 NoonCard from './cards/noonCard/NoonCard';
-import RhondaCard from './cards/rhondaCard/rhondaCard';
-import DomsCard from './cards/domsCard/domsCard';
+import BriesCard from "./cards/briesCard/briesCard";
+import PalesaCard from "./cards/PalesaCard/PalesaCard";
+import NoonCard from "./cards/noonCard/NoonCard";
+import RhondaCard from "./cards/rhondaCard/rhondaCard";
+import DomsCard from "./cards/domsCard/domsCard";
+import JordanCard from "./cards/mjordanCard/jordanCard";
 
 function CardsDisplay(props) {
   return (
@@ -49,12 +50,22 @@ function CardsDisplay(props) {
       <div>
         <PalesaCard />
       </div>
-      <div><BriesCard /></div>
-      <div><DomsCard/></div>
-      <div><NoonCard/></div>
-      <div><RhondaCard/></div>
+      <div>
+        <BriesCard />
+      </div>
+      <div>
+        <DomsCard />
+      </div>
+      <div>
+        <JordanCard />
+      </div>
+      <div>
+        <NoonCard />
+      </div>
+      <div>
+        <RhondaCard />
+      </div>
     </div>
-
   );
 }