m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

gatsby-image is fully operational

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-05-04 14:00:21 +02:00
parent c0e333dd43
commit d4a0f74e8c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 103 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
gatsby-node.js
View File

@ -30,10 +30,44 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
previous {
title
slug
img {
id
childImageSharp {
sizes(maxWidth: 500) {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
originalImg
originalName
}
}
}
}
next {
title
slug
img {
id
childImageSharp {
sizes(maxWidth: 500) {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
originalImg
originalName
}
}
}
}
}
}

8
src/components/atoms/ProjectImage.jsx
View File

@ -19,4 +19,12 @@ ProjectImage.propTypes = {
alt: PropTypes.string,
}
export const projectImage = graphql`
fragment ProjectImageSizes on ImageSharp {
sizes(maxWidth: 1200) {
...GatsbyImageSharpSizes
}
}
`
export default ProjectImage

6
src/components/atoms/ProjectImage.scss
View File

@ -7,8 +7,10 @@
display: block;
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
@media (min-width: 1440px) {
max-width: 1440px;
@media (min-width: $projectImageMaxWidth) {
max-width: $projectImageMaxWidth;
border-radius: .25rem;
overflow: hidden;
}
}

4
src/components/molecules/ProjectNav.jsx
View File

@ -11,7 +11,7 @@ const ProjectNav = ({ previous, next }) => (
<nav className="project__nav full-width">
{previous && (
<div className="project__nav__item">
<Link className="project__nav__link prev" to={`/${previous.slug}`}>
<Link className="project__nav__link prev" to={previous.slug}>
<Img
className="project__nav__image"
sizes={previous.img.childImageSharp.sizes}
@ -30,7 +30,7 @@ const ProjectNav = ({ previous, next }) => (
</Link>
{next && (
<div className="project__nav__item">
<Link className="project__nav__link next" to={`/${next.slug}`}>
<Link className="project__nav__link next" to={next.slug}>
<Img
className="project__nav__image"
sizes={next.img.childImageSharp.sizes}

1
src/components/molecules/ProjectNav.scss
View File

@ -14,6 +14,7 @@
flex: 0 0 48%;
position: relative;
transition: .2s ease-out;
max-width: 500px;
&:first-child {
text-align: left;

23
src/pages/index.jsx
View File

@ -2,28 +2,27 @@ import React from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import ProjectImage from '../components/atoms/ProjectImage'
import FullWidth from '../components/atoms/FullWidth'
import './index.scss'
const Home = ({ data }) => {
const projects = data.allProjectsJson.edges
return (
<div className="projects full-width" id="projects">
<FullWidth id="projects" className="projects">
{projects.map(({ node }) => {
const { slug, title, img } = node
return (
<Link
key={slug}
to={slug}
className="projects__project"
>
<h1 className="projects__project__title">{title}</h1>
<ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
</Link>
<article className="projects__project" key={slug}>
<Link to={slug}>
<h1 className="projects__project__title">{title}</h1>
<ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
</Link>
</article>
)
})}
</div>
</FullWidth>
)
}
@ -42,9 +41,7 @@ export const IndexQuery = graphql`
slug
img {
childImageSharp {
sizes(maxWidth: 1440) {
...GatsbyImageSharpSizes
}
...ProjectImageSizes
}
}
}

51
src/pages/index.scss
View File

@ -1,38 +1,39 @@
@import 'variables';
.projects {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.projects__project {
width: 100%;
display: block;
position: relative;
background-color: $brand-grey-light;
margin: 0 auto $spacer * 4 auto;
text-align: center;
margin-bottom: $spacer * 4;
@media (min-width: 30rem) {
margin-bottom: $spacer * 8;
}
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
background: transparent;
transition: background .2s ease-out;
}
a {
display: block;
position: relative;
margin: 0 auto;
@media (min-width: $projectImageMaxWidth) {
max-width: $projectImageMaxWidth;
}
&:hover,
&:focus {
&::after {
background: rgba($brand-cyan, .05);
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
background: transparent;
transition: background .2s ease-out;
}
&:hover,
&:focus {
&::after {
background: rgba($brand-cyan, .05);
}
}
}
}

1
src/styles/_variables.scss
View File

@ -1,4 +1,5 @@
$typekit: 'dtg3zui';
$projectImageMaxWidth: 1200px;
// Colors
/////////////////////////////////////

40
src/templates/Project.jsx
View File

@ -7,7 +7,7 @@ import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/atoms/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks'
// import ProjectNav from '../components/molecules/ProjectNav'
import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import './Project.scss'
@ -17,12 +17,12 @@ class Project extends Component {
}
render() {
const project = this.props.data.allProjectsJson.edges[0]
const project = this.props.data.projectsJson
const projectImages = this.props.data.projectImages.edges
// const pathContext = this.props.pathContext
const pathContext = this.props.pathContext
const { title, description, links, techstack } = project.node
// const { next, previous } = pathContext
const { title, description, links, techstack } = project
const { next, previous } = pathContext
return (
<Fragment>
@ -30,7 +30,7 @@ class Project extends Component {
<title>{title}</title>
</Helmet>
<SEO postMeta={project.node} />
<SEO postMeta={project} />
<article className="project">
<Content>
@ -58,7 +58,7 @@ class Project extends Component {
</Content>
</article>
{/* <ProjectNav previous={previous} next={next} /> */}
<ProjectNav previous={previous} next={next} />
</Fragment>
)
}
@ -66,34 +66,28 @@ class Project extends Component {
Project.propTypes = {
data: PropTypes.object.isRequired,
// pathContext: PropTypes.object.isRequired,
pathContext: PropTypes.object.isRequired,
}
export default Project
export const projectQuery = graphql`
query ProjectBySlug($slug: String!) {
allProjectsJson(filter: { slug: { eq: $slug } }) {
edges {
node {
title
slug
description
links {
title
url
}
techstack
}
projectsJson(slug: { eq: $slug }) {
title
slug
description
links {
title
url
}
techstack
}
projectImages: allImageSharp(filter: { id: { regex: $slug } }, sort: { fields: [id], order: ASC }) {
edges {
node {
id
sizes(maxWidth: 1440) {
...GatsbyImageSharpSizes
}
...ProjectImageSizes
}
}
}