m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01:00
Code Releases Activity

project navigation

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-04-15 21:08:59 +02:00
parent f52fec3560
commit 79923b5378
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 170 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
gatsby-node.js
View File

@ -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()
}))

2
src/components/atoms/FullWidth.scss
View File

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

9
src/components/atoms/Icons.js
View File

@ -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>

2
src/components/molecules/Header.scss
View File

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

4
src/components/molecules/ProjectTechstack.scss
View File

@ -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);
}
}

56
src/components/organisms/Project.js
View File

@ -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 (
<Fragment>
return <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
source={description}
escapeHtml={false}
className="project__description"
/>
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
<FullWidth>
<img className="project__image" src={images[img]} alt={title} />
</FullWidth>
{!!img_more && (
<FullWidth>
{!!img_more && <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 = {

83
src/components/organisms/Project.scss
View File

@ -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;
}
}

3
src/components/organisms/Projects.scss
View File

@ -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;
}