project navigation

gatsby-node.js

@@ -25,6 +25,16 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
                 description
                 techstack
               }
+              previous {
+                title
+                slug
+                img
+              }
+              next {
+                title
+                slug
+                img
+              }
             }
           }
         }
@@ -33,29 +43,33 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
           reject(result.errors)
         }
 
-        result.data.allProjectsJson.edges.forEach(({ node }) => {
+        result.data.allProjectsJson.edges.forEach(
-          const slug = node.slug
+          ({ node, previous, next }) => {
-          const title = node.title
+            const slug = node.slug
-          const img = node.img
+            const title = node.title
-          const img_more = node.img_more
+            const img = node.img
-          const description = node.description
+            const img_more = node.img_more
-          const links = node.links
+            const description = node.description
-          const techstack = node.techstack
+            const links = node.links
+            const techstack = node.techstack
 
-          createPage({
+            createPage({
-            path: slug,
+              path: slug,
-            component: template,
+              component: template,
-            context: {
+              context: {
-              title,
+                title,
-              slug,
+                slug,
-              img,
+                img,
-              img_more,
+                img_more,
-              description,
+                description,
-              techstack,
+                techstack,
-              links,
+                links,
-            },
+                previous,
-          })
+                next,
-        })
+              },
+            })
+          }
+        )
 
         resolve()
       }))

src/components/atoms/FullWidth.scss

@@ -8,7 +8,7 @@
     text-align: center;
 
     img {
-        max-height: 100vh;
+        max-height: 105vh;
         width: auto;
         display: block;
         margin-left: auto;

src/components/atoms/Icons.js

@@ -64,3 +64,12 @@ export const Email = props => (
     </g>
   </svg>
 )
+
+export const Index = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+      <rect width="9" height="5" />
+      <rect width="9" height="5" y="7" />
+      <rect width="9" height="5" y="14" />
+      <rect width="9" height="5" x="11" />
+      <rect width="9" height="5" x="11" y="7" />
+      <rect width="9" height="5" x="11" y="14" />
+  </svg>

src/components/molecules/Header.scss

@@ -50,7 +50,7 @@
 
     @media (min-width: 30rem) {
         margin-top: $spacer / 2;
-        margin-bottom: $spacer / 2;
+        margin-bottom: $spacer * 2;
     }
 
     .header__title,

src/components/molecules/ProjectTechstack.scss

@@ -5,7 +5,7 @@
         padding: 0;
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        justify-content: center;
     }
 
     li {
@@ -14,5 +14,7 @@
         flex: 0 0 (100% / 3);
         margin-bottom: $spacer;
         font-size: $font-size-small;
+        text-align: center;
+        background: rgba(#fff, .2);
     }
 }

src/components/organisms/Project.js

@@ -1,25 +1,30 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
+import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
 import Content from '../atoms/Content'
 import FullWidth from '../atoms/FullWidth'
 import ProjectTechstack from '../molecules/ProjectTechstack'
 import ProjectLinks from '../molecules/ProjectLinks'
+import { Index } from '../atoms/Icons'
 import images from '../../images'
 import './Project.scss'
 
-const Project = props => {
+const Project = ({ pathContext }) => {
-  const project = props.pathContext
+  const project = pathContext
-  const title = project.title
+  const {
-  const img = project.img
+    title,
-  const img_more = project.img_more
+    img,
-  const description = project.description
+    img_more,
-  const links = project.links
+    description,
-  const techstack = project.techstack
+    links,
+    techstack,
+    next,
+    previous,
+  } = project
 
-  return (
+  return <Fragment>
-    <Fragment>
       <Helmet>
         <title>{title}</title>
         <meta name="description" content={description} />
@@ -29,18 +34,13 @@ const Project = props => {
         <article className="project">
           <Content>
             <h1 className="project__title">{title}</h1>
-            <ReactMarkdown
+            <ReactMarkdown source={description} escapeHtml={false} className="project__description" />
-              source={description}
-              escapeHtml={false}
-              className="project__description"
-            />
 
             <FullWidth>
               <img className="project__image" src={images[img]} alt={title} />
             </FullWidth>
 
-            {!!img_more && (
+            {!!img_more && <FullWidth>
-              <FullWidth>
                 {img_more.map(key => (
                   <img
                     key={key}
@@ -49,8 +49,7 @@ const Project = props => {
                     alt={title}
                   />
                 ))}
-              </FullWidth>
+              </FullWidth>}
-            )}
 
             <footer className="project__meta">
               {!!techstack && <ProjectTechstack techstack={techstack} />}
@@ -58,9 +57,26 @@ const Project = props => {
             </footer>
           </Content>
         </article>
+
+        <nav className="project__nav full-width">
+          {previous && <div className="project__nav__item">
+              <Link className="project__nav__link prev" to={previous.slug}>
+                <img className="project__image project__nav__image" src={images[previous.img]} alt={previous.title} />
+                <h1 className="project__nav__title">{previous.title}</h1>
+              </Link>
+            </div>}
+          <Link className="project__nav__index" title="Back to projects" to={'/'}>
+            <Index />
+          </Link>
+          {next && <div className="project__nav__item">
+              <Link className="project__nav__link next" to={next.slug}>
+                <img className="project__image project__nav__image" src={images[next.img]} alt={next.title} />
+                <h1 className="project__nav__title">{next.title}</h1>
+              </Link>
+            </div>}
+        </nav>
       </main>
     </Fragment>
-  )
 }
 
 Project.propTypes = {

src/components/organisms/Project.scss

@@ -20,7 +20,8 @@
 }
 
 .project__meta {
-    margin-top: $spacer;
+    margin-top: $spacer * 4;
+    margin-bottom: $spacer * 4;
 
     @media (min-width: 40rem) {
         display: flex;
@@ -44,3 +45,83 @@
         color: $brand-grey-light;
     }
 }
+
+.project__nav {
+    display: flex;
+    justify-content: space-between;
+}
+
+.project__nav__image {
+    margin: 0;
+    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
+}
+
+.project__nav__item {
+    flex: 0 0 48%;
+    position: relative;
+
+    &:first-child {
+        text-align: left;
+    }
+
+    &:last-child {
+        text-align: right;
+    }
+
+    @media (min-width: 45rem) {
+        flex-basis: 33%;
+    }
+}
+
+.project__nav__link {
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background: transparent;
+        transition: background .2s ease-out;
+    }
+
+    &:hover,
+    &:focus {
+        &::after {
+            background: rgba($brand-cyan, .1);
+        }
+    }
+}
+
+.project__nav__title {
+    font-size: $font-size-small;
+    padding: $spacer / 2 $spacer / 4;
+    margin: 0;
+
+    @media (min-width: 45rem) {
+        font-size: $font-size-base;
+        padding: $spacer / 2 $spacer;
+    }
+}
+
+.project__nav__index {
+    height: 100%;
+    display: block;
+    align-self: center;
+    margin-top: -$spacer;
+
+    &:first-child {
+        margin-left: 48.5%;
+    }
+
+    &:last-child {
+        margin-right: auto;
+    }
+
+    .icon {
+        fill: $brand-grey-light;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}

src/components/organisms/Projects.scss

@@ -9,10 +9,11 @@
 .projects__project {
     position: relative;
     background-color: $brand-grey-light;
-    margin-bottom: $spacer * 4;
+    margin: 0 auto $spacer * 4 auto;
 
     @media (min-width: 85rem) {
         flex: 0 0 calc(50% - #{$spacer / 2});
+        margin: 0;
         margin-bottom: $spacer;
     }