text: import React, { Component } from "react"
  import styled from "styled-components"
  import Nav from "../components/Nav"
  import { colourObj } from "../assets/styles/StyledExports"
  import StandardText from "../assets/styles/StandardText"
  import NCNews from "../assets/images/NC_News.png"
  import ProjectCard from "../components/ProjectCard"
  import Helmet from "react-helmet"
  
  const ProjObjArr = [{
  title: "NC News",
  imageUrl: NCNews,
  projectUrl: "https://github.com/Oddiesea/fe-nc-news/",
  description: "Small resposive news-site, built on react and a node JS back-end running express."
  }]
  
  const Body = styled.main`
    background-color: ${colourObj[/work/]};
    height: 100vh;
  `
  
  const BottomBlock = styled.div`
    background-color: ${colourObj["/contact/"]};
    bottom: 0;
    display: block;
    height: 15%;
    left: 0;
    position: absolute;
    right: 0;
  `
  const WorkWrapper = styled.div`
    display: grid;
    padding-top: 10vh;
    padding-right: 5vw;
    padding-left: 5vw;
    justify-content: center;
    align-items: center;
    text-align: center;
  `
  
  class index extends Component {
    render() {
      return (
        <>
        <Body>
          <Nav location={this.props.location} />
          <WorkWrapper>
            <StandardText>
              Here's a list of recent projects I've been working on:
            </StandardText>
            {ProjObjArr.map(project=> {
              return <ProjectCard project={project}/>
            })}
          </WorkWrapper>
          <BottomBlock />
        </Body>
        </>
      )
    }
  }
  
  export default index
  