Rename content, make index page working

config/navigation.yaml

@@ -0,0 +1,6 @@
+- name: "Projects"
+  link: "/projects"
+- name: "Instagram"
+  link: "/instagram"
+- name: "About"
+  link: "/about"

config/theme.ts

@@ -0,0 +1,45 @@
+interface ThemeShape {
+  breakpoints: string[]
+  fontSizes: string[]
+  colors: {
+    primary: string
+    secondary: string
+  }
+  space: string[]
+  fontWeights: {
+    normal: number
+    bold: number
+  }
+  sidebarWidth: string
+}
+
+const theme: ThemeShape = {
+  breakpoints: ['600px', '900px', '1200px'],
+  fontSizes: ['1rem', '1.2rem', '1.44rem', '1.728rem', '2.074rem', '2.488rem'],
+  colors: {
+    primary: '#db7436',
+    secondary: '#343549',
+  },
+  space: [
+    '0',
+    '0.25rem',
+    '0.5rem',
+    '0.75rem',
+    '1rem',
+    '1.25rem',
+    '1.5rem',
+    '2rem',
+    '2.5rem',
+    '3rem',
+    '4rem',
+    '5rem',
+    '6rem',
+  ],
+  fontWeights: {
+    normal: 400,
+    bold: 700,
+  },
+  sidebarWidth: '350px',
+}
+
+export default theme

content/projects.yaml → content/projects/projects.yaml

@@ -1,21 +1,36 @@
 - title: "Color"
   title_detail: "Color - In all its glory"
+  slug: "/color-in-all-its-glory"
   category: "Street Art"
   color: "black"
-  images: "./color"
+  images: "color"
+  cover: "./color/projects-color-001.jpg"
   short_desc: "A phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects"
   desc: "Color (American English), or colour (Commonwealth English), is the characteristic of human visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of cone cells in the human eye by electromagnetic radiation in the visible spectrum. Color categories and physical specifications of color are associated with objects through the wavelength of the light that is reflected from them. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc."
 - title: "Extreme Neon"
   title_detail: "Extreme Neon - What is this trend about?"
+  slug: "extreme-neon-what-is-this-trend-about"
   category: "Trend"
   color: "#90BDDF"
-  images: "./neon"
+  images: "neon"
+  cover: "./neon/projects-neon-001.jpg"
   short_desc: "Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas."
   desc: "Neon gives a distinct reddish-orange glow when used in low-voltage neon glow lamps, high-voltage discharge tubes and neon advertising signs. The red emission line from neon also causes the well known red light of helium–neon lasers. Neon is used in some plasma tube and refrigerant applications but has few other commercial uses. It is commercially extracted by the fractional distillation of liquid air. Since air is the only source, it is considerably more expensive than helium."
 - title: "Black & White"
   title_detail: "Black & White - Superb art"
+  slug: "black-and-white-superb-art"
   category: "Still"
   color: "white"
-  images: "./bw"
+  images: "bw"
+  cover: "./bw/projects-bw-001.jpg"
   short_desc: "Art in its purest form"
-  desc: "Monochrome photography is photography where each position on an image can record and show a different amount of light, but not a different hue. It includes all forms of black-and-white photography, which produce images containing tones of neutral grey ranging from black to white."
+  desc: "Monochrome photography is photography where each position on an image can record and show a different amount of light, but not a different hue. It includes all forms of black-and-white photography, which produce images containing tones of neutral grey ranging from black to white."
+- title: "Breakfast"
+  title_detail: "Breakfast - The most important time of the day"
+  slug: "breakfast"
+  category: "Photography"
+  color: "#BFA89E"
+  images: "breakfast"
+  cover: "./breakfast/projects-breakfast-001.jpg"
+  short_desc: "So tasty. So good. I love pancakes."
+  desc: "The first meal of the day."

gatsby-config.js

@@ -15,8 +15,22 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'content',
-        path: `${__dirname}/content`,
+        name: 'projects',
+        path: `${__dirname}/content/projects`,
+      },
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'config',
+        path: `${__dirname}/config`,
+      },
+    },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'images',
+        path: `${__dirname}/src/images`,
       },
     },
     {

package.json

@@ -28,13 +28,14 @@
     "gatsby-plugin-styled-components": "^3.0.5",
     "gatsby-plugin-typescript": "^2.0.8",
     "gatsby-source-filesystem": "^2.0.20",
+    "gatsby-source-instagram": "^0.2.5",
     "gatsby-transformer-sharp": "^2.1.13",
     "gatsby-transformer-yaml": "^2.1.8",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "react-helmet": "^5.2.0",
+    "rebass": "^3.0.1",
     "styled-components": "^4.1.3",
-    "styled-system": "^3.2.1",
     "typeface-nunito-sans": "^0.0.54",
     "typescript": "^3.3.3"
   },
@@ -43,6 +44,7 @@
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.2",
     "@types/react-helmet": "^5.0.8",
+    "@types/rebass": "^3.0.3",
     "@types/styled-components": "^4.1.10",
     "prettier": "^1.16.4",
     "tslint": "^5.12.1",

src/components/Layout.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components'
+import { graphql, Link, useStaticQuery } from 'gatsby'
+import { Box, Flex, Image } from 'rebass'
+import 'typeface-nunito-sans'
+import theme from '../../config/theme'
+import logo from '../logo.svg'
+import reset from '../styles/reset'
+
+const GlobalStyles = createGlobalStyle`
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  ::selection {
+    color: white;
+    background-color: #f6993f;
+  }
+  html {
+    box-sizing: border-box;
+    border: 0;
+    margin: 0;
+    
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: ${theme.fontWeights.bold};
+    }
+    
+    h1 {
+      font-size: ${theme.fontSizes[5]};
+    }
+    h2 {
+      font-size: ${theme.fontSizes[4]};
+    }
+    h3 {
+      font-size: ${theme.fontSizes[3]};
+    }
+    h4 {
+      font-size: ${theme.fontSizes[2]};
+    }
+    h5 {
+      font-size: ${theme.fontSizes[1]};
+    }
+    h6 {
+      font-size: ${theme.fontSizes[0]};
+    }
+    
+    @media (max-width: 600px) {
+      font-size: 16px;
+      
+      h1 {
+        font-size: ${theme.fontSizes[4]};
+      }
+      h2 {
+        font-size: ${theme.fontSizes[3]};
+      }
+      h3 {
+        font-size: ${theme.fontSizes[2]};
+      }
+      h4 {
+        font-size: ${theme.fontSizes[1]};
+      }
+      h5 {
+        font-size: ${theme.fontSizes[0]};
+      }
+      h6 {
+        font-size: ${theme.fontSizes[0]};
+      }
+    }
+  }
+  body {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    color: black;
+    font-family: 'Nunito Sans', '-apple-system', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    background: white;
+    font-size: 18px;
+  }
+  a {
+    transition: all 0.3s ease-in-out;
+  }
+  
+  ${reset}
+`
+
+const isPartiallyActive = ({ isPartiallyCurrent }: { isPartiallyCurrent: boolean }) => {
+  return isPartiallyCurrent ? { className: 'navlink-active navlink' } : { className: 'navlink' }
+}
+
+const PartialNavLink = (props: any) => (
+  <Link getProps={isPartiallyActive} {...props}>
+    {props.children}
+  </Link>
+)
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: ${props => props.theme.sidebarWidth} 1fr;
+`
+
+const SideBarInner = styled(Box)`
+  position: fixed;
+  height: 100%;
+  width: ${props => props.theme.sidebarWidth};
+`
+
+const Nav = styled(Flex)`
+  a {
+    text-decoration: none;
+    font-weight: 700;
+    color: black;
+    font-size: ${props => props.theme.fontSizes[2]};
+    &:hover,
+    &:focus,
+    &.navlink-active {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+const Main = styled.main`
+  grid-column-start: 2;
+`
+
+interface QueryResult {
+  navigation: {
+    edges: {
+      node: {
+        name: string
+        link: string
+      }
+    }[]
+  }
+}
+
+const Layout: React.FunctionComponent = ({ children }) => {
+  const data: QueryResult = useStaticQuery(query)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <>
+        <GlobalStyles />
+        <Wrapper>
+          <SideBarInner as="aside" p={8}>
+            <Link to="/">
+              <Image width="6rem" src={logo} />
+            </Link>
+            <Nav mt={10} as="nav" flexWrap="nowrap" flexDirection="column" alignItems="flex-start">
+              {data.navigation.edges.map(({ node: item }) => (
+                <PartialNavLink to={item.link} key={item.name}>
+                  {item.name}
+                </PartialNavLink>
+              ))}
+            </Nav>
+          </SideBarInner>
+          <Main>{children}</Main>
+        </Wrapper>
+      </>
+    </ThemeProvider>
+  )
+}
+
+export default Layout
+
+const query = graphql`
+  query LayoutQuery {
+    navigation: allNavigationYaml {
+      edges {
+        node {
+          name
+          link
+        }
+      }
+    }
+  }
+`

src/pages/about.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Layout from '../components/Layout'
+
+const About = () => (
+  <Layout>
+    about page
+  </Layout>
+)
+
+export default About