Added Executive Bio to member profile

src/collections/members/lee-calcote/index.mdx

@@ -19,4 +19,14 @@ badges:
 location: Austin, Texas, USA
 bio: "Lee Calcote is an innovative product and technology leader, passionate about empowering engineers and enabling organizations. As Founder of Layer5, he is at the forefront of the cloud native movement. Open source, advanced and emerging technologies have been a consistent focus through Calcote’s time at SolarWinds, Seagate, Cisco and Schneider Electric. An advisor, author, and speaker, Calcote is active in the community as a Docker Captain, Cloud Native Ambassador and GSoC, GSoD, and LFX Mentor."
 published: true
+executive_bio: available
+executive_image: ./lee-calcote-exec.jpeg
+executive_position: Founder and CEO
+company: Layer5
 ---
+
+Lee Calcote is an innovative product and technology leader, passionate about empowering engineers and enabling organizations. As Founder and CEO of Layer5, Lee Calcote is at the forefront of the cloud native movement. Previously, Calcote stewarded technology strategy and innovation across SolarWinds as head of CTO technology initiatives. He led software-defined data center engineering at Seagate, delivering predictive analytics and modern systems management. Calcote held various leadership positions at Cisco, where he created Cisco’s cloud management platform, pioneered software-defined network orchestration, and autonomic remote management services.
+
+In addition to his role at Layer5, Calcote is a maintainer of open source projects: Meshery, Service Mesh Performance (SMP), and Service Mesh Interface (SMI). Calcote serves as chair of the Cloud Native Computing Foundation (CNCF) TAG Network, and formerly, in the Distributed Management Task Foundation (DMTF) delivering Redfish 1.0, and in the Center for Internet Security (CIS) delivering the Docker Benchmark 1.0.
+
+Calcote serves on Cisco’s advisory board, and formerly advised startups Twistlock and Octarine, acquired by Palo Alto Networks and VMware, respectively. As a Docker Captain and Cloud Native Ambassador, he is a frequent speaker in the cloud native ecosystem. Calcote is the author of The Enterprise Path to Service Mesh Architectures, Istio: Up and Running, and Service Mesh Patterns with O’Reilly and title with other publishers. He holds a bachelor’s degree in Computer Science, a master’s degree in Business Administration and retains a list of industry certifications.

src/sections/Community/Member-single/index.js

@@ -1,9 +1,12 @@
-import React from "react";
+import React, {useState} from "react";
 import { Link } from "gatsby";
+import { MDXRenderer } from "gatsby-plugin-mdx";
+import { SRLWrapper } from "simple-react-lightbox";
 import { MemberSingleWrapper } from "./memberSingle.style";
 import { FaTwitter } from "@react-icons/all-files/fa/FaTwitter";
 import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
 import { FaLinkedin } from "@react-icons/all-files/fa/FaLinkedin";
+import { FaUserTie } from "@react-icons/all-files/fa/FaUserTie";
 import { IoIosArrowDropleftCircle } from "@react-icons/all-files/io/IoIosArrowDropleftCircle";
 import { Col, Container, Row } from "../../../reusecore/Layout";
 import Image from "../../../components/image";
@@ -17,8 +20,10 @@ import NighthawkLogo from "../../../assets/images/nighthawk/icon-only/SVG/nighth
 import imageHubLogo from "../../../assets/images/image-hub/layer5-image-hub.svg";
 import communityLogo from "../../../assets/images/community/community-green.svg";
 import Button from "../../../reusecore/Button";
+import Modal from "react-modal";
+import { GrFormClose } from "@react-icons/all-files/gr/GrFormClose";
 
-const MemberSingle = ({ frontmatter }) => {
+const MemberSingle = ({ frontmatter, body }) => {
   const {
     name,
     position,
@@ -30,7 +35,16 @@ const MemberSingle = ({ frontmatter }) => {
     location,
     badges,
     bio,
+    executive_bio,
+    executive_image,
+    executive_position,
+    company,
   } = frontmatter;
+
+  const [modalIsOpen,setIsOpen] = useState(false);
+  const openModal = () => setIsOpen(true);
+  const closeModal = () => setIsOpen(false);
+
   return (
     <MemberSingleWrapper>
       <Container>
@@ -161,6 +175,39 @@ const MemberSingle = ({ frontmatter }) => {
               </div>
               <div className="social-bg">
                 <ul className="profile-social-links">
+                  <li>
+                    {executive_bio &&
+                    <div>
+                      <FaUserTie className="bio" size={32} onClick={openModal} />
+                      <Modal
+                        isOpen={modalIsOpen}
+                        onRequestClose={closeModal}
+                        className="Modal"	
+                        overlayClassName="Overlay"			
+                        ariaHideApp={false}
+                        contentLabel="Executive Bio"
+                      >
+                        <Button secondary className="close-modal-btn" onClick={closeModal}> <GrFormClose /></Button>
+                        <div className="exec-bio-image">
+                          <h2 className="modal-heading">Executive Bio</h2>
+                          <Image
+                            className="bio-image"
+                            {...executive_image}
+                            alt={name}
+                          />
+                          <h3>{name}</h3>
+                          <p>{executive_position}</p>
+                          <p>{company}</p>
+                        </div>
+                        <div className="exec_bio">
+                          <SRLWrapper>
+                            <MDXRenderer>{body}</MDXRenderer>
+                          </SRLWrapper>
+                        </div>
+                      </Modal>
+                    </div>
+                    }
+                  </li>
                   {github && (
                     <li>
                       <a href={`https://github.com/${github}`}>

src/sections/Community/Member-single/memberSingle.style.js

@@ -106,7 +106,6 @@ export const MemberSingleWrapper = styled.div`
             padding-left: 0 !important;
 
             li {
-                a{
                     display: block;
                     color: black;
                     text-align: left;
@@ -117,6 +116,10 @@ export const MemberSingleWrapper = styled.div`
                     -o-transition: box-shadow 0.2s;
                     transition: box-shadow 0.2s;
                     transition: 0.3s;
+
+                    a{
+                        color: black;   
+                    }
 
                     &:hover{
                         box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
@@ -131,6 +134,10 @@ export const MemberSingleWrapper = styled.div`
                         .twitter{
                             color: #1DA1F2;
                         }
+                        .bio{
+                            color: #00b39f;
+                            cursor: pointer;
+                        }
                     }
 
                     &:active{
@@ -148,7 +155,6 @@ export const MemberSingleWrapper = styled.div`
                         height: 2rem;
                         max-width: none;
                     }
-                }
             }
         }
         .start-contributing{

src/sections/app.style.js

@@ -155,6 +155,9 @@ section{
     padding: 20px;
     margin-right: -50%;
     transform: translate(-50%, -50%);
+    max-width: 60rem;
+    max-height: 40rem;
+    overflow-y: scroll;
 
     .close-modal-btn {
         min-width: 2rem;
@@ -173,8 +176,28 @@ section{
 
     .modal-heading {
         text-align: center;
-
     }
+
+    .exec-bio-image{
+      text-align: center;
+      margin-bottom: 1rem;
+        img{
+            -ms-interpolation-mode: bicubic;
+            vertical-align: middle;
+        }
+        .gatsby-image-wrapper, .old-gatsby-image-wrapper {
+            display: block;
+            margin: 1rem auto;
+            border-radius: 100%;
+            overflow: hidden;
+            width: 140px;
+            height: 140px;
+            box-shadow: 0px 0px 8px 1px rgba(0,179,159,1);
+          }
+          p{
+              margin: 0 auto;
+          }
+     }
 }
 
 .Overlay {
@@ -207,6 +230,12 @@ section{
         height: 26rem;
     }
 }
+@media screen and (max-width: 370px) {
+  .form-frame {
+      width: 15rem;
+      height: 26rem;
+  }
+}
 
 /* Modal CSS Ends */
 `;

src/templates/member-single.js

@@ -14,6 +14,7 @@ import theme from "../theme/app/themeStyles";
 
 export const query = graphql`query MemberBySlug($slug: String!) {
   mdx(fields: {slug: {eq: $slug}}) {
+    body
     frontmatter {
       name
       position
@@ -24,13 +25,23 @@ export const query = graphql`query MemberBySlug($slug: String!) {
       location
       badges
       bio
+      executive_bio
+      executive_position
+      company
       image_path {
         childImageSharp {
           gatsbyImageData(width: 500, layout: CONSTRAINED)
         }
         extension
         publicURL
       }
+      executive_image {
+        childImageSharp {
+          gatsbyImageData(width: 500, layout: CONSTRAINED)
+        }
+        extension
+        publicURL
+      }
     }
   }
 }
@@ -43,7 +54,7 @@ const MemberSinglePage = ({data}) => {
         <GlobalStyle />
         <SEO title={data.mdx.frontmatter.name} image={data.mdx.frontmatter.image_path.publicURL}/>
         <Navigation />
-        <MemberSingle frontmatter={data.mdx.frontmatter}/>
+        <MemberSingle frontmatter={data.mdx.frontmatter} body={data.mdx.body} />
         <Footer />
       </Layout>
     </ThemeProvider>