add basic home page

package.json

@@ -12,6 +12,7 @@
     "gatsby-plugin-transition-link": "^1.12.4",
     "gatsby-source-datocms": "^2.1.15",
     "gatsby-transformer-sharp": "^2.2.4",
+    "gsap": "^2.1.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-pose": "^4.0.8",

src/components/project-header.js

@@ -5,7 +5,7 @@ import Img from "gatsby-image";
 
 import AspectRatioBox from "./aspect-ratio-box";
 
-const Title = styled(Heading)`
+export const Title = styled(Heading)`
   color: ${props => props.theme.colors.black};
   font-family: ${props => props.theme.fonts.sans};
   font-weight: 600;
@@ -17,7 +17,7 @@ const Title = styled(Heading)`
   }
 `;
 
-const Description = styled(Text)`
+export const Description = styled(Text)`
   color: ${props => props.theme.colors.black};
   font-family: ${props => props.theme.fonts.sans};
   font-weight: 600;
@@ -30,7 +30,7 @@ const Description = styled(Text)`
   }
 `;
 
-const Category = styled(Text)`
+export const Category = styled(Text)`
   color: ${props => props.theme.colors.grey};
   font-family: ${props => props.theme.fonts.sans};
   font-size: ${props => props.theme.fontSizes[3]}px;

src/pages/index.js

@@ -1,5 +1,66 @@
 import React from "react";
+import { graphql } from "gatsby";
+import Img from "gatsby-image";
+import { Box } from "rebass";
+import styled from "styled-components";
+import AniLink from "gatsby-plugin-transition-link/AniLink";
 
-const Home = () => <div>Hello world</div>;
+import { Description } from "../components/project-header";
+import Layout from "../components/layout";
+
+const Grid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: ${props => props.theme.space[3]}px;
+`;
+
+const ProjectGridItem = ({ project }) => {
+  return (
+    <AniLink
+      style={{ textDecoration: "none" }}
+      fade
+      to={`/projects/${project.slug}`}
+      duration={0.2}
+    >
+      <Box>
+        <Img fluid={project.featuredPhoto.fluid} />
+        <Box mt={3}>
+          <Description>{project.title}</Description>
+        </Box>
+      </Box>
+    </AniLink>
+  );
+};
+
+const Home = ({ data }) => {
+  const projects = data.projects.edges;
+  return (
+    <Layout>
+      <Grid>
+        {projects.map(project => (
+          <ProjectGridItem key={project.node.title} project={project.node} />
+        ))}
+      </Grid>
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  {
+    projects: allDatoCmsProject {
+      edges {
+        node {
+          slug
+          title
+          featuredPhoto {
+            fluid {
+              ...GatsbyDatoCmsFluid
+            }
+          }
+        }
+      }
+    }
+  }
+`;
 
 export default Home;

yarn.lock

@@ -5910,6 +5910,11 @@ graphql@^14.1.1:
   dependencies:
     iterall "^1.2.2"
 
+gsap@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-2.1.3.tgz#c63ee3a50f0b7dc3b46ed0845bb0f09049feb944"
+  integrity sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==
+
 gud@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"