Skip to content

Commit 99bebe6

Browse files
Tr3yb0Tr3yb0
authored
Merge pull request #30 from codeforgso/feature/about
Mobile styling implemented and about page added
2 parents 7fb1018 + 7e942a1 commit 99bebe6

37 files changed

+340
-241
lines changed

‎gatsby-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ module.exports = {
2626
background_color: `#663399`,
2727
theme_color: `#663399`,
2828
display: `minimal-ui`,
29-
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
29+
icon: `src/images/icons/cfgsologoicon.png`, // This path is relative to the root of the site.
3030
},
3131
},
3232
// this (optional) plugin enables Progressive Web App + Offline functionality

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"prop-types": "^15.7.2",
2020
"react": "^16.12.0",
2121
"react-dom": "^16.12.0",
22-
"react-helmet": "^6.0.0"
22+
"react-helmet": "^6.0.0",
23+
"react-hot-loader": "^4.12.21"
2324
},
2425
"devDependencies": {
2526
"gh-pages": "^2.2.0",

‎public/favicon-32x32.png

-176 Bytes
Loading

‎public/icons/icon-144x144.png

-3.45 KB
Loading

‎public/icons/icon-192x192.png

-3.04 KB
Loading

‎public/icons/icon-256x256.png

-1.06 KB
Loading

‎public/icons/icon-384x384.png

3.95 KB
Loading

‎public/icons/icon-48x48.png

-1000 Bytes
Loading

‎public/icons/icon-512x512.png

33.4 KB
Loading

‎public/icons/icon-72x72.png

-1.76 KB
Loading

‎public/icons/icon-96x96.png

-2.21 KB
Loading

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><title data-react-helmet="true"></title><link rel="icon" href="/favicon-32x32.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=edf3d310d67f8284a562bc3a58c3e761"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=edf3d310d67f8284a562bc3a58c3e761"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/commons.js"></script></body></html>
1+
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><title data-react-helmet="true"></title><link rel="icon" href="/favicon-32x32.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=248f9201483749ceb6d07cf5f798f8a2"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=248f9201483749ceb6d07cf5f798f8a2"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/commons.js"></script></body></html>

‎public/manifest.webmanifest

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"name":"gatsby-starter-default","short_name":"starter","start_url":"/","background_color":"#663399","theme_color":"#663399","display":"minimal-ui","cacheDigest":"edf3d310d67f8284a562bc3a58c3e761","icons":[{"src":"icons/icon-48x48.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"48x48","type":"image/png"},{"src":"icons/icon-72x72.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"72x72","type":"image/png"},{"src":"icons/icon-96x96.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"96x96","type":"image/png"},{"src":"icons/icon-144x144.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"144x144","type":"image/png"},{"src":"icons/icon-192x192.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"192x192","type":"image/png"},{"src":"icons/icon-256x256.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"256x256","type":"image/png"},{"src":"icons/icon-384x384.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"384x384","type":"image/png"},{"src":"icons/icon-512x512.png?v=edf3d310d67f8284a562bc3a58c3e761","sizes":"512x512","type":"image/png"}]}
1+
{"name":"gatsby-starter-default","short_name":"starter","start_url":"/","background_color":"#663399","theme_color":"#663399","display":"minimal-ui","cacheDigest":"248f9201483749ceb6d07cf5f798f8a2","icons":[{"src":"icons/icon-48x48.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"48x48","type":"image/png"},{"src":"icons/icon-72x72.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"72x72","type":"image/png"},{"src":"icons/icon-96x96.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"96x96","type":"image/png"},{"src":"icons/icon-144x144.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"144x144","type":"image/png"},{"src":"icons/icon-192x192.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"192x192","type":"image/png"},{"src":"icons/icon-256x256.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"256x256","type":"image/png"},{"src":"icons/icon-384x384.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"384x384","type":"image/png"},{"src":"icons/icon-512x512.png?v=248f9201483749ceb6d07cf5f798f8a2","sizes":"512x512","type":"image/png"}]}

‎public/page-data/dev-404-page/page-data.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/about/"},{"path":"/conduct/"},{"path":"/"},{"path":"/join/"},{"path":"/ourprojects/"},{"path":"/resources/"},{"path":"/404.html"}]}},"pageContext":{}}}
1+
{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/about/"},{"path":"/"},{"path":"/join/"},{"path":"/ourprojects/"},{"path":"/resources/"},{"path":"/sponsor/"},{"path":"/404.html"}]}},"pageContext":{}}}

‎src/components/footer.js

+15-19
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,37 @@ import { Link } from "gatsby"
55
const Footer = () => {
66
return (
77
<footer className="footer">
8+
<FooterNav />
89
<div className="content has-text-centered">
9-
<div className="logowrap">
10-
<img src={logo} alt="Logo" className="logo" />
11-
</div>
1210
<p>&copy; 2020 Code for Greensboro</p>
1311
</div>
14-
<FooterNav />
1512
</footer>
1613
)
1714
}
1815

1916
const FooterNav = () => (
2017
<nav className="footer-nav is-flex-tablet">
21-
<Link to="/" className="navbar-item">
22-
HOME
23-
</Link>
2418
<Link to="/join" className="navbar-item">
25-
JOIN US
26-
</Link>
27-
<a href="mailto:[email protected]" className="navbar-item">
28-
E-MAIL US
29-
</a>
30-
<Link to="/conduct" className="navbar-item">
31-
CODE OF CONDUCT
32-
</Link>
33-
<Link to="/resources" className="navbar-item">
34-
RESOURCES
19+
Join
3520
</Link>
3621
<a
37-
href="https://www.codeforamerica.org/"
22+
href="https://www.codeforamerica.org/donate-to-a-brigade?utm_campaign=Code%20for%20Greensboro&utm_source=CodeforGreensboroSite"
23+
className="navbar-item"
3824
target="_blank"
3925
rel="noreferrer"
26+
>
27+
Donate
28+
</a>
29+
<a
30+
href="https://github.com/codeforamerica/codeofconduct"
4031
className="navbar-item"
32+
target="_blank"
33+
rel="noreferrer"
4134
>
42-
CODE FOR AMERICA
35+
Code of Conduct
36+
</a>
37+
<a href="mailto:[email protected]" className="navbar-item">
38+
Email us
4339
</a>
4440
</nav>
4541
)

‎src/components/joinplatforms.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* WORK IN PROGRESS - SECTION OF SOCIAL PLATFORMS CURRENTLY REMOVED FROM HOMEPAGE< STORED FOR FUTURE USE */
2+
import React from "react"
3+
import styles from "joinplatforms.module.scss"
4+
import slackico from "../images/social/slack_icon.svg"
5+
import githubico from "../images/social/github_icon.svg"
6+
import meetupico from "../images/social/meetup_icon.svg"
7+
function JoinPlatforms() {
8+
return (
9+
<section>
10+
<div className={styles.join - platforms}>
11+
<div className="container">
12+
<h1 className="has-text-centered">JOIN THE GROUP</h1>
13+
<p>
14+
If you want to improve the well-being of Greensboro, these platforms
15+
are the best way to meet us and volunteer for our many current
16+
projects.
17+
</p>
18+
</div>
19+
<div className="columns">
20+
<div className="column">
21+
<img src={slackico} alt="Slack Logo" />
22+
<OvalButton
23+
text="Join Us"
24+
to="https://bit.ly/cfgso-slack"
25+
external="true"
26+
/>
27+
</div>
28+
<div className="column">
29+
<img src={githubico} alt="GitHub Logo" />
30+
<OvalButton
31+
text="Join Us"
32+
to="https://github.com/codeforgso"
33+
external="true"
34+
/>
35+
</div>
36+
<div className="column">
37+
<img src={meetupico} alt="Meetup Logo" />
38+
<OvalButton
39+
text="Join Us"
40+
to="https://www.meetup.com/Code-for-Greensboro/"
41+
external="true"
42+
/>
43+
</div>
44+
</div>
45+
</div>
46+
</section>
47+
)
48+
}
49+
50+
export default JoinPlatforms

‎src/components/joinplatforms.module.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.join-platforms {
2+
background-color: $tan;
3+
padding: 20px 40px;
4+
}
5+
6+
.join-platforms .icons-wrapper {
7+
width: 100%;
8+
justify-content: space-around;
9+
}
10+
11+
.join-platforms .join-button {
12+
background-color: $green;
13+
}
14+
15+
.join-platforms .columns {
16+
margin-top: 0;
17+
align-items: stretch;
18+
}
19+
20+
.join-platforms .column {
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: flex-end;
25+
}

‎src/components/oval_button.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Link } from "gatsby"
44

55
function OvalButton(props) {
66
let link = ""
7-
if (props.external) {
7+
if (props.external === "true") {
88
link = (
99
<a
1010
className={styles.link}
@@ -26,7 +26,7 @@ function OvalButton(props) {
2626
<div className={styles.btn}>
2727
{link}
2828
<div className={styles.arrow}>
29-
<i class="fas fa-arrow-right fa-2x"></i>
29+
<i className="fas fa-arrow-right fa-2x"></i>
3030
</div>
3131
</div>
3232
)

‎src/components/oval_button.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
.link {
1919
background-color: $red;
2020
color: $tan;
21-
font-size: 2.5em;
21+
font-size: 28px;
2222
padding: 0 10px;
2323
flex: 4 0;
2424
text-align: center;

‎src/images/homepage/flags-on-homes1.jpg

-90.4 KB
Binary file not shown.

‎src/images/homepage/flags-on-homes2.jpg

-103 KB
Binary file not shown.

‎src/images/icons/cfgsologoicon.png

1.54 KB
Loading

‎src/images/leaders/erich.jpg

64 KB
Loading

‎src/images/leaders/ethan.jpg

202 KB
Loading

‎src/images/leaders/heather.jpg

181 KB
Loading

‎src/images/leaders/jordan.jpg

190 KB
Loading

‎src/images/leaders/rob.jpg

232 KB
Loading

‎src/images/leaders/schaffer.jpg

192 KB
Loading

‎src/images/leaders/tim.jpg

209 KB
Loading

‎src/images/leaders/trey.jpg

85.7 KB
Loading

‎src/pages/about.js

+77-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,85 @@
11
import React from "react"
22
import Layout from "../components/layout"
3+
import ethan from "../images/leaders/ethan.jpg"
4+
import heather from "../images/leaders/heather.jpg"
5+
import jordan from "../images/leaders/jordan.jpg"
6+
import rob from "../images/leaders/rob.jpg"
7+
import schaffer from "../images/leaders/schaffer.jpg"
8+
import erich from "../images/leaders/erich.jpg"
9+
import trey from "../images/leaders/trey.jpg"
10+
import tim from "../images/leaders/tim.jpg"
311

412
const About = () => (
513
<Layout>
6-
<h1>About Page</h1>
14+
<section className="blurb">
15+
<h1>Who we are</h1>
16+
<p>
17+
Code for Greensboro, also known as Code for GSO for short, is an
18+
organization extending from Code for America our 501(c)3 fiscal sponsor.
19+
We serve the local communities in Greensboro, North Carolina through
20+
Civic Tech to solve community needs.
21+
</p>
22+
</section>
23+
<section className="blurb">
24+
<h1>What is Civic Tech?</h1>
25+
<p>
26+
“There is no one ‘industry standard’ definition of civic tech...” -Stacy
27+
Donohue
28+
</p>
29+
<p>
30+
There are a few expamles that demonstrate what civic tech is, but the
31+
common traits to civic tech would be focused on engaging in processes to
32+
help resolve community and social problems through technology. The
33+
Omidyar Network defines their meaning of Civic Tech as “technologies
34+
that are deployed to enhance the relationship between people and
35+
government, by giving people more of a voice to participate in public
36+
decision making and/or to improve the delivery of services (usually by
37+
gov’t) to people.” (Huffington Post). Technologies can be developed by
38+
non-profit, for-profit, and non-government organizations. For Code for
39+
GSO, we develope technologies and resources that we give away to the
40+
local non-profits, governments, and other brigades of Code for America
41+
at no charge.
42+
</p>
43+
</section>
44+
<section className="leaders">
45+
<div className="container">
46+
<h1>Leaders</h1>
47+
</div>
48+
<div className="icons-wrapper">
49+
<figure className="image is-96x96 captioned-ico">
50+
<img className="is-rounded sponsor-ico" src={ethan} alt="" />
51+
<figcaption>Ethan McElvaney</figcaption>
52+
</figure>
53+
<figure className="image is-96x96 captioned-ico">
54+
<img className="is-rounded sponsor-ico" src={heather} alt="" />
55+
<figcaption>Heather Gallop</figcaption>
56+
</figure>
57+
<figure className="image is-96x96 captioned-ico">
58+
<img className="is-rounded sponsor-ico" src={jordan} alt="" />
59+
<figcaption>Jordan Robinson</figcaption>
60+
</figure>
61+
<figure className="image is-96x96 captioned-ico">
62+
<img className="is-rounded sponsor-ico" src={rob} alt="" />
63+
<figcaption>Rob Martin</figcaption>
64+
</figure>
65+
<figure className="image is-96x96 captioned-ico">
66+
<img className="is-rounded sponsor-ico" src={schaffer} alt="" />
67+
<figcaption>Schaffer Stewart</figcaption>
68+
</figure>
69+
<figure className="image is-96x96 captioned-ico">
70+
<img className="is-rounded sponsor-ico" src={erich} alt="" />
71+
<figcaption>Erich Keil</figcaption>
72+
</figure>
73+
<figure className="image is-96x96 captioned-ico">
74+
<img className="is-rounded sponsor-ico" src={trey} alt="" />
75+
<figcaption>Trey Botard</figcaption>
76+
</figure>
77+
<figure className="image is-96x96 captioned-ico">
78+
<img className="is-rounded sponsor-ico" src={tim} alt="" />
79+
<figcaption>Tim Leisman</figcaption>
80+
</figure>
81+
</div>
82+
</section>
783
</Layout>
884
)
985

0 commit comments

Comments
 (0)