diff --git a/gatsby-node.js b/gatsby-node.js
index 6e2f32f..ec572f0 100644
--- a/gatsby-node.js
+++ b/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 }) => {
- const slug = node.slug
- const title = node.title
- const img = node.img
- const img_more = node.img_more
- const description = node.description
- const links = node.links
- const techstack = node.techstack
+ result.data.allProjectsJson.edges.forEach(
+ ({ node, previous, next }) => {
+ const slug = node.slug
+ const title = node.title
+ const img = node.img
+ const img_more = node.img_more
+ const description = node.description
+ const links = node.links
+ const techstack = node.techstack
- createPage({
- path: slug,
- component: template,
- context: {
- title,
- slug,
- img,
- img_more,
- description,
- techstack,
- links,
- },
- })
- })
+ createPage({
+ path: slug,
+ component: template,
+ context: {
+ title,
+ slug,
+ img,
+ img_more,
+ description,
+ techstack,
+ links,
+ previous,
+ next,
+ },
+ })
+ }
+ )
resolve()
}))
diff --git a/src/components/atoms/FullWidth.scss b/src/components/atoms/FullWidth.scss
index 75eea3d..86bdd78 100644
--- a/src/components/atoms/FullWidth.scss
+++ b/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;
diff --git a/src/components/atoms/Icons.js b/src/components/atoms/Icons.js
index fbfa09c..d64cd38 100644
--- a/src/components/atoms/Icons.js
+++ b/src/components/atoms/Icons.js
@@ -64,3 +64,12 @@ export const Email = props => (
)
+
+export const Index = props =>
diff --git a/src/components/molecules/Header.scss b/src/components/molecules/Header.scss
index 8ec69b1..9cfaeb0 100644
--- a/src/components/molecules/Header.scss
+++ b/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,
diff --git a/src/components/molecules/ProjectTechstack.scss b/src/components/molecules/ProjectTechstack.scss
index 5364dfc..ca24098 100644
--- a/src/components/molecules/ProjectTechstack.scss
+++ b/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);
}
}
diff --git a/src/components/organisms/Project.js b/src/components/organisms/Project.js
index 03bd733..f5089fe 100644
--- a/src/components/organisms/Project.js
+++ b/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 = props.pathContext
- const title = project.title
- const img = project.img
- const img_more = project.img_more
- const description = project.description
- const links = project.links
- const techstack = project.techstack
+const Project = ({ pathContext }) => {
+ const project = pathContext
+ const {
+ title,
+ img,
+ img_more,
+ description,
+ links,
+ techstack,
+ next,
+ previous,
+ } = project
- return (
-
+ return
{title}
@@ -29,18 +34,13 @@ const Project = props => {
{title}
-
+
- {!!img_more && (
-
+ {!!img_more &&
{img_more.map(key => (
{
alt={title}
/>
))}
-
- )}
+ }
+
+
- )
}
Project.propTypes = {
diff --git a/src/components/organisms/Project.scss b/src/components/organisms/Project.scss
index b11bf31..b0e01bd 100644
--- a/src/components/organisms/Project.scss
+++ b/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;
+ }
+}
diff --git a/src/components/organisms/Projects.scss b/src/components/organisms/Projects.scss
index a4e1426..54a17f8 100644
--- a/src/components/organisms/Projects.scss
+++ b/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;
}