Initial commit

anthony-zhou · anthony-zhou · commit a8d5a345c584 · 2020-06-04T13:28:44.000-05:00
diff --git a/.env.development.template b/.env.development.template
diff --git a/src/assets/images/Code for Dallas-26.png b/src/assets/images/Code for Dallas-26.png
diff --git a/src/assets/images/dallas_skyline.jpg b/src/assets/images/dallas_skyline.jpg
diff --git a/src/assets/images/jgonzales_from_unsplash.jpg b/src/assets/images/jgonzales_from_unsplash.jpg
diff --git a/src/components/common/Layout/fonts.css b/src/components/common/Layout/fonts.css
@@ -26,3 +26,5 @@
     url('./fonts/roboto-v18-latin-700.ttf') format('truetype'),
     url('./fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
 }
+
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
diff --git a/src/components/common/Layout/styles.js b/src/components/common/Layout/styles.js
@@ -207,6 +207,9 @@ export const Global = createGlobalStyle`
       padding-top: 0;
       margin-bottom: 1.45rem;
     }
+    h1, h2, h3 {
+      font-family: 'Archivo Black', 'Roboto', Helvetica, sans-serif;
+    }
     h1 {
       margin-left: 0;
       margin-right: 0;
diff --git a/src/components/common/index.js b/src/components/common/index.js
@@ -3,4 +3,4 @@ export * from './Container';
 export * from './Button';
 export * from './Card';
 export * from './Input';
-export * from './SEO';
+export * from './SEO';
diff --git a/src/components/landing/About/index.jsx b/src/components/landing/About/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { Container, Button } from 'components/common';
+import dev from 'assets/illustrations/skills.svg';
+import { Wrapper, SkillsWrapper, Details, Thumbnail } from './styles';
+
+export const About = () => (
+  <Wrapper id="about">
+    <SkillsWrapper as={Container}>
+      <Details>
+        <h1>Who We Are</h1>
+        <p>
+        Our mission is to harness the digital era to make government work for the people, by the people! Our focus is on making the biggest impact on the needs of our community and advocating for open government and open data.
+        </p>
+        {/* <Button as={AnchorLink} href="#contact">
+          Hire me
+        </Button> */}
+      </Details>
+    </SkillsWrapper>
+  </Wrapper>
+);
diff --git a/src/components/landing/About/styles.js b/src/components/landing/About/styles.js
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import detailsIllustration from 'assets/illustrations/details.svg';
+
+export const Wrapper = styled.div`
+  background-size: contain;
+  background-position: left top;
+  background-repeat: no-repeat;
+  background-color: #6FACD5;
+`;
+
+export const SkillsWrapper = styled.div`
+  padding: 4rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 960px) {
+    flex-direction: column;
+  }
+`;
+
+export const Details = styled.div`
+  flex: 1;
+  text-align: center;
+
+  @media (max-width: 960px) {
+    padding-left: unset;
+    width: 100%;
+  }
+
+  h1 {
+    margin-bottom: 2rem;
+    font-size: 35pt;
+    color: white;
+  }
+
+  p {
+    margin-bottom: 2.5rem;
+    font-size: 20pt;
+    font-weight: normal;
+    line-height: 1.3;
+    color: white;
+  }
+`;
+
+export const Thumbnail = styled.div`
+  flex: 1;
+
+  @media (max-width: 960px) {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  img {
+    width: 100%;
+  }
+`;
diff --git a/src/components/landing/Contact/ContactForm/index.jsx b/src/components/landing/Contact/ContactForm/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Formik, Form, FastField, ErrorMessage } from 'formik';
-import Recaptcha from 'react-google-recaptcha';
+// import Recaptcha from 'react-google-recaptcha';
 import * as Yup from 'yup';
 import { Button, Input } from 'components/common';
 import { Error, Center, InputField } from './styles';
@@ -21,7 +21,7 @@ export default () => (
         .email('Invalid email')
         .required('Email field is required'),
       message: Yup.string().required('Message field is required'),
-      recaptcha: Yup.string().required('Robots are not welcome yet!'),
+      // recaptcha: Yup.string().required('Robots are not welcome yet!'),
     })}
     onSubmit={async ({ name, email, message }, { setSubmitting, resetForm, setFieldValue }) => {
       try {
@@ -88,7 +88,7 @@ export default () => (
           />
           <ErrorMessage component={Error} name="message" />
         </InputField>
-        {values.name && values.email && values.message && (
+        {/* {values.name && values.email && values.message && (
           <InputField>
             <FastField
               component={Recaptcha}
@@ -98,7 +98,7 @@ export default () => (
             />
             <ErrorMessage component={Error} name="recaptcha" />
           </InputField>
-        )}
+        )} */}
         {values.success && (
           <InputField>
             <Center>
diff --git a/src/components/landing/Intro/index.jsx b/src/components/landing/Intro/index.jsx
@@ -3,21 +3,22 @@ import AnchorLink from 'react-anchor-link-smooth-scroll';
 import { Header } from 'components/theme';
 import { Container, Button } from 'components/common';
 import dev from 'assets/illustrations/dev.svg';
+import skyline from 'assets/images/dallas_skyline.jpg'
 import { Wrapper, IntroWrapper, Details, Thumbnail } from './styles';
 
 export const Intro = () => (
   <Wrapper>
     <Header />
     <IntroWrapper as={Container}>
       <Details>
-        <h1>Hi There!</h1>
-        <h4>I’m John and I’m a JAMStack engineer!</h4>
-        <Button as={AnchorLink} href="#contact">
-          Hire me
+        <h1>We are Code for Dallas</h1>
+        <h4>A volunteer-led civic technology organization that brings together developers, designers, data enthusiasts and city staff.</h4>
+        <Button as={AnchorLink} href="#about">
+          Learn more
         </Button>
       </Details>
       <Thumbnail>
-        <img src={dev} alt="I’m John and I’m a JAMStack engineer!" />
+        <img src={skyline} alt="City of Dallas SVG" />
       </Thumbnail>
     </IntroWrapper>
   </Wrapper>
diff --git a/src/components/landing/Intro/styles.js b/src/components/landing/Intro/styles.js
@@ -3,7 +3,7 @@ import overlayIllustration from 'assets/illustrations/overlay.svg';
 
 export const Wrapper = styled.div`
   padding-bottom: 4rem;
-  background-image: url(${overlayIllustration});
+  // background-image: url(${overlayIllustration});
   background-size: contain;
   background-position: right top;
   background-repeat: no-repeat;
@@ -30,14 +30,25 @@ export const Details = styled.div`
 
   h1 {
     margin-bottom: 2rem;
-    font-size: 36pt;
+    font-size: 40pt;
     color: #212121;
+    position: relative;
+    
 
     @media (max-width: 680px) {
       font-size: 30pt;
     }
   }
 
+  // h1::after {
+  //   content: '';
+  //   position: absolute;
+  //   background-color: #659C41;
+  //   height: 10px;
+  //   width: 50%;
+  //   display: block;
+  // }
+
   h4 {
     margin-bottom: 2.5rem;
     font-size: 32pt;
diff --git a/src/components/landing/Skills/index.jsx b/src/components/landing/Skills/index.jsx
@@ -11,13 +11,15 @@ export const Skills = () => (
         <img src={dev} alt="I’m John and I’m a Backend & Devops engineer!" />
       </Thumbnail>
       <Details>
-        <h1>Hi There!</h1>
+        <h1>Join Us!</h1>
         <p>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
-          standard dummy.
+          Want to get involved with Code for Dallas?
         </p>
         <Button as={AnchorLink} href="#contact">
-          Hire me
+          Slack
+        </Button>
+        <Button as={AnchorLink} href="#contact">
+          Meetup
         </Button>
       </Details>
     </SkillsWrapper>
diff --git a/src/components/landing/Skills/styles.js b/src/components/landing/Skills/styles.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import detailsIllustration from 'assets/illustrations/details.svg';
 
 export const Wrapper = styled.div`
-  background-image: url(${detailsIllustration});
+  // background-image: url(${detailsIllustration});
   background-size: contain;
   background-position: left top;
   background-repeat: no-repeat;
diff --git a/src/components/landing/Team/index.jsx b/src/components/landing/Team/index.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { Container, Card } from 'components/common';
+import { Wrapper, Grid, Item, Content } from './styles';
+import jg from 'assets/images/jgonzales_from_unsplash.jpg';
+import { Thumbnail } from '../Intro/styles';
+
+export const Team = () => (
+  <Wrapper as={Container} id="team">
+    <h1>Team</h1>
+    {/* TODO: modify this part to get team info dynamically */}
+    <Grid>
+      <PersonCard
+        thumbnail= {jg}
+        name="John Wayne"
+        position="Founder"
+        description="Marion Michael Morrison, known professionally as John Wayne and nicknamed Duke, was an American actor, director, producer and Presidential Medal of Freedom recipient. He was among the top box office draws for three decades, famous for his roles in Western films." />
+      <PersonCard
+      thumbnail={jg}
+        name="John Wayne"
+        position="Founder"
+        description="Marion Michael Morrison, known professionally as John Wayne and nicknamed Duke, was an American actor, director, producer and Presidential Medal of Freedom recipient. He was among the top box office draws for three decades, famous for his roles in Western films." />
+      <PersonCard
+      thumbnail={jg}
+        name="John Wayne"
+        position="Founder"
+        description="Marion Michael Morrison, known professionally as John Wayne and nicknamed Duke, was an American actor, director, producer and Presidential Medal of Freedom recipient. He was among the top box office draws for three decades, famous for his roles in Western films." />
+    </Grid>
+  </Wrapper>
+);
+
+function PersonCard(props) {
+  return (
+    <Item as="a" target="_blank" rel="noopener noreferrer">
+
+      <Card>
+        <img style={{borderRadius: "50%", width: "50%"}} src={props.thumbnail} alt={"Picture of " + props.name} />
+        <h3>{props.name}</h3>
+        <p>{props.position}</p>
+        <p>{props.description}</p>
+      </Card>
+    </Item>
+
+  )
+}
diff --git a/src/components/landing/Team/styles.js b/src/components/landing/Team/styles.js
@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 2rem 0;
+`;
+
+export const Grid = styled.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 8fr;
+  gap: 1.2rem 1.2rem;
+
+  @media (max-width: 960px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 680px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const Item = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
+
+  h4 {
+    color: #212121;
+  }
+
+  p {
+    color: #707070;
+  }
+`;
+
+export const Content = styled.div`
+  padding: 1rem 0;
+`;
+
+export const Stats = styled.div`
+  display: flex;
+  align-items: center;
+
+  div {
+    display: flex;
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    img {
+      margin: 0;
+    }
+
+    span {
+      color: #000;
+      margin-left: 0.5rem;
+    }
+  }
+`;
diff --git a/src/components/landing/index.js b/src/components/landing/index.js
@@ -2,3 +2,5 @@ export * from './Intro';
 export * from './Skills';
 export * from './Contact';
 export * from './Projects';
+export * from './About';
+export * from './Team';
diff --git a/src/components/theme/Footer/index.jsx b/src/components/theme/Footer/index.jsx
@@ -7,16 +7,9 @@ export const Footer = () => (
   <Wrapper>
     <Flex as={Container}>
       <Details>
-        <h2>John Doe</h2>
+        <h2>Let's put a slogan here.</h2>
         <span>
-          © All rights are reserved | {new Date().getFullYear()} | Made with{' '}
-          <span aria-label="love" role="img">
-            💖
-          </span>{' '}
-          by{' '}
-          <a href="https://smakosh.com/?ref=portfolio-dev" rel="noopener noreferrer" target="_blank">
-            Smakosh
-          </a>
+          © {new Date().getFullYear()} Code for Dallas. All rights reserved
         </span>
       </Details>
       <Links>
diff --git a/src/components/theme/Header/Navbar/index.jsx b/src/components/theme/Header/Navbar/index.jsx
@@ -3,10 +3,12 @@ import { Link } from 'gatsby';
 import { Container } from 'components/common';
 import NavbarLinks from '../NavbarLinks';
 import { Wrapper } from './styles';
+import logo from "assets/images/Code for Dallas-26.png";
 
 const Navbar = () => (
   <Wrapper as={Container}>
-    <Link to="/">John Doe</Link>
+    {/* <img style={{height: "3em"}} src={logo} alt="Code for Dallas Logo" /> */}
+    <Link to="/"><span style={{fontWeight: "bold", fontSize: "2em"}}>Code for Dallas</span></Link>
     <NavbarLinks desktop />
   </Wrapper>
 );
diff --git a/src/components/theme/Header/NavbarLinks/index.jsx b/src/components/theme/Header/NavbarLinks/index.jsx
@@ -5,7 +5,9 @@ import { Wrapper } from './styles';
 const NavbarLinks = ({ desktop }) => (
   <Wrapper desktop={desktop}>
     <AnchorLink href="#about">About</AnchorLink>
+    <AnchorLink href="#team">Team</AnchorLink>
     <AnchorLink href="#projects">Projects</AnchorLink>
+    <AnchorLink href="#events">Events</AnchorLink>
     <AnchorLink href="#contact">Contact</AnchorLink>
   </Wrapper>
 );
diff --git a/src/components/theme/Header/index.jsx b/src/components/theme/Header/index.jsx
diff --git a/src/data/config.js b/src/data/config.js
diff --git a/src/pages/index.js b/src/pages/index.js

Original file line number	Diff line number	Diff line change
`@@ -26,3 +26,5 @@`
`26`	`26`	`url('./fonts/roboto-v18-latin-700.ttf') format('truetype'),`
`27`	`27`	`url('./fonts/roboto-v18-latin-700.svg#Roboto') format('svg');`
`28`	`28`	`}`
	`29`	`+`
	`30`	`+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');`