Merge pull request #71 from remrobem/dev

#68 Sponsor cards

components/leadershipCard.js

@@ -13,12 +13,9 @@ const Leadership = props => {
             </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">
+                    <div className="column">
+                        <p className="title is-3 ">{props.profile.title}</p>
                         <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>

components/sponsorCard.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+
+const Sponsor = props => {
+    return (
+        <div className="card sponsor-card">
+            <div className="card-image">
+                <figure className="image is-256x256">
+                    <img
+                        src={`../static/sponsors/${props.sponsor.image}`}
+                        alt={props.sponsor.name}
+                    ></img>
+                </figure>
+            </div>
+            <div className="card-content">
+                <div className="columns">
+                    <div className="column">
+                        <p className="title is-3">{props.sponsor.name}</p>
+                        <p className="title is-5">
+                            <a href={props.sponsor.url}>{props.sponsor.url}</a>
+                        </p>
+                    </div>
+                </div>
+                <div className="content">{props.sponsor.description}</div>
+            </div>
+        </div>
+    )
+}
+
+Sponsor.propTypes = {
+    sponsor: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+}
+
+export default Sponsor

package.json

@@ -12,27 +12,27 @@
     }
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.8",
-    "@fortawesome/free-solid-svg-icons": "^5.5.0",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "@statickit/react": "^1.0.0-beta.7",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@statickit/react": "^1.2.0",
     "@zeit/next-sass": "^1.0.1",
     "bulma": "^0.7.5",
     "net": "^1.0.2",
-    "next": "^9.0.1",
-    "node-sass": "^4.12.0",
-    "postmark": "^2.3.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "next": "^9.1.7",
+    "node-sass": "^4.13.0",
+    "postmark": "^2.3.4",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "tls": "0.0.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "husky": "^3.0.8",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "husky": "^3.1.0",
     "prettier": "1.18.2"
   }
 }

pages/about.js

@@ -1,9 +1,10 @@
 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 SponsorCard from '..//components/sponsorCard'
 import Leaders from '../static/leadership.json'
+import Sponsors from '../static/sponsors.json'
 
 const About = () => (
     <Page title="Who We Are">
@@ -117,7 +118,18 @@ const About = () => (
         <section className="section">
             <div className="container">
                 <h2 className="subtitle is-2">Sponsors</h2>
-                <div>add content</div>
+                <div className="columns leadership">
+                    {Sponsors.map(sponsor => {
+                        return (
+                            <div
+                                className="column is-one-third"
+                                key={sponsor.name}
+                            >
+                                <SponsorCard sponsor={sponsor} />
+                            </div>
+                        )
+                    })}
+                </div>
             </div>
         </section>
     </Page>

static/leadership.json

@@ -2,22 +2,19 @@
     {
         "name": "Tim Leisman",
         "title": "Brigade Captain",
-        "handle": "@tim",
         "image": "TimLeisman.jpg",
         "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": "Jordan Robinson",
         "title": "Strategist",
-        "handle": "@J",
         "image": "JordanRobinson.jpg",
         "bio": "Jordan T. Robinson is the Administrative & Operations Strategist for Code for Greensboro. His passion for helping people and communities through Art, Design, and Socialpreneurship is what fueled him in being a creative aid to the community thought Administration, Illustration, and Design. He is a graduate of NC A&T State University as well as from SCAD. Currently, he works for RTriad Enterprises, which empowers people and organizations through Cloud Computing Solutions."
     },
     {
         "name": "Rob Martin",
         "title": "Developer",
-        "handle": "@rob martin",
         "image": "RobMartin.jpg",
         "bio": "Rob is a long time member of Code for Greensboro. He is relatively new to the web development world and always learning. He has had a long career in IT and is enjoying new experiences and learning that Code for Greensboro offers."
     }

static/sponsors.json

@@ -0,0 +1,21 @@
+[
+    {
+        "name": "IBM",
+        "url": "https://www.ibm.com",
+        "image": "IBM.png",
+        "description": "IBMers believe in progress — that the application of intelligence, reason and science can improve business, society and the human condition."
+    },
+
+    {
+        "name": "HQ Greensboro",
+        "url": "https://hqgreensboro.com",
+        "image": "HQGreensboro.png",
+        "description": "HQ Greensboro is a shared workspace designed to empower, foster, and cultivate businesses that produce long-term job growth and positive social impact. We address two challenges that entrepreneurs face: building a trusted support community and gaining access to flexible, affordable office space."
+    },
+    {
+        "name": "Allegacy",
+        "url":  "https://www.allegacy.org",
+        "image": "Allegacy.jpg",
+        "description": "As a credit union, Allegacy is member-owned and not-for-profit. We offer lower fees and higher earnings than you’d find at a bank. Allegacy has been helping members pursue wellness of mind, body and wallet since 1967."
+    }
+]

styles.scss

@@ -79,6 +79,19 @@ footer a:hover {
   }
 }
 
+.alignment-left {
+  margin: 0;
+}
+
+.about .content-heading {
+  color: #363636;
+  font-weight: 600;
+  line-height: 1.125;
+  font-size: 1.125em;
+  margin-bottom: 0.8888em;
+}
+
+/* join us page */
 .join-item {
   margin-top: 3rem;
 }
@@ -136,6 +149,7 @@ footer a:hover {
   }
 }
 
+/* logo */
 .logo {
   display: flex;
   align-items: center;
@@ -153,6 +167,17 @@ footer a:hover {
   font-size: 1em;
 }
 
+/* about us page */
+
+.about .content-heading {
+  color: #363636;
+  font-weight: 600;
+  line-height: 1.125;
+  font-size: 1.125em;
+  margin-bottom: 0.8888em;
+}
+
+/* hero image */
 .hero-image img {
   width: 100vw;
   height: 30vh;
@@ -163,17 +188,12 @@ footer a:hover {
   object-position: 100% 25%;
 }
 
-.content-heading {
-  color: #363636;
-  font-weight: 600;
-  line-height: 1.125;
-  font-size: 1.125em;
-  margin-bottom: 0.8888em;
-}
-
 .home .hero-image img {
   object-position: 0% 40%;
 }
+
+/* social media icons */
+
 .social-icons {
   text-align: center;
   margin-top: 25px;
@@ -184,9 +204,9 @@ footer a:hover {
   margin-right: 2.5em;
 }
 
-.alignment-left {
-  margin: 0;
-}
+
+
+/* leadership cards */
 .leadership {
   flex-wrap: wrap;
 }
@@ -196,6 +216,15 @@ footer a:hover {
   height: 100%;
 }
 
+/* sponsor cards */
+
+.sponsor-card {
+  margin-top: 2vh;
+  height: 100%;
+}
+
+/* projects page */
+
 .projects .card-equal-height {
   display: flex;
   flex-direction: column;