leadership section updates

remrobem · remrobem · commit 94759d53887e · 2020-01-07T16:38:19.000-05:00
diff --git a/components/leadershipCard.js b/components/leadershipCard.js
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+
+const Leadership = props => {
+    return (
+        <div className="card leadership-card">
+            <div className="card-image">
+                <figure className="image is-4by3">
+                    <img
+                        src="https://bulma.io/images/placeholders/1280x960.png"
+                        alt={props.profile.name}
+                    ></img>
+                </figure>
+            </div>
+            <div className="card-content">
+                <div className="columns">
+                    <div className="column is-half">
+                        <p className="title is-3">{props.profile.title}</p>
+                    </div>
+                    <div className="column is-half">
+                        <p className="title is-4">{props.profile.name}</p>
+                        <p className="subtitle is-6">{props.profile.handle}</p>
+                    </div>
+                </div>
+                <div className="content">{props.profile.bio}</div>
+            </div>
+        </div>
+    )
+}
+
+Leadership.propTypes = {
+    profile: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    handle: PropTypes.string.isRequired,
+    bio: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+}
+export default Leadership
diff --git a/pages/about.js b/pages/about.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import Page from '../components/page'
 import HeroImage from '../components/hero-image'
+// import Leadership from '..//components/leadership'
+import LeadershipCard from '..//components/leadershipCard'
+import Leaders from '../static/leadership.json'
 
 const About = () => (
     <Page title="">
@@ -86,6 +89,15 @@ const About = () => (
             </div>
         </div>
         <h2 className="subtitle is-2 content">Leadership</h2>
+        <div className="columns leadership">
+            {Leaders.map(profile => {
+                return (
+                    <div className="column is-one-third" key={profile.handle}>
+                        <LeadershipCard profile={profile} />
+                    </div>
+                )
+            })}
+        </div>
         <div className="content container">add content</div>
         <h2 className="subtitle is-2">Sponsors</h2>
         <div className="content container">add content</div>
diff --git a/static/leadership.json b/static/leadership.json
@@ -0,0 +1,26 @@
+[
+    {
+        "name": "Tim Leisman",
+        "title": "Brigade Captain",
+        "handle": "@tim",
+        "bio": "Tim Leisman is the current captain of Code for Greensboro. He is a civic tech enthusiast, graduate of Guilford College and UNCG's MPA program, and works full time at the Center for Creative Leadership."
+    },
+    {
+        "name": "rob",
+        "title": "rob title",
+        "handle": "@robhandle",
+        "bio": "rob bio"
+    },
+    {
+        "name": "jordan",
+        "title": "jordan title",
+        "handle": "@jordanhandle",
+        "bio": "jordan bio"
+    },
+    {
+        "name": "ethan",
+        "title": "ethan title",
+        "handle": "@ethanhandle",
+        "bio": "ethan bio"
+    }
+]
diff --git a/styles.scss b/styles.scss
@@ -187,6 +187,13 @@ footer a:hover {
 .alignment-left {
   margin: 0;
 }
+.leadership {
+  flex-wrap: wrap;
+}
+
+.leadership-card {
+  margin-top: 2vh;
+}
 
 .projects .card-equal-height {
   display: flex;
