update preview images, render projects using material-ui's grid
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { Typography, Container } from '@material-ui/core';
|
||||
import { Typography, Container, Grid } from '@material-ui/core';
|
||||
import Section, { BG_COLOR } from '@components/Section';
|
||||
import Project from './Project';
|
||||
|
||||
|
@ -18,9 +18,11 @@ const useStyles = makeStyles(theme => ({
|
|||
margin: '3rem 0',
|
||||
},
|
||||
},
|
||||
projects: {
|
||||
'& > *:not(:last-child)': {
|
||||
marginBottom: theme.spacing(2),
|
||||
gridItem: {
|
||||
[theme.breakpoints.up(750)]: {
|
||||
flexGrow: 0,
|
||||
flexBasis: '50%',
|
||||
maxWidth: '50%',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
@ -39,7 +41,7 @@ function Portfolio() {
|
|||
relativePath
|
||||
childImageSharp {
|
||||
id
|
||||
fluid(maxWidth: 1000) {
|
||||
fluid(maxWidth: 1280) {
|
||||
...GatsbyImageSharpFluid
|
||||
}
|
||||
}
|
||||
|
@ -58,8 +60,8 @@ function Portfolio() {
|
|||
<Typography variant="h2" align="center" gutterBottom>
|
||||
My work
|
||||
</Typography>
|
||||
<div className={classes.projects}>
|
||||
{projects.map((project, index) => {
|
||||
<Grid container spacing={3}>
|
||||
{projects.map(project => {
|
||||
let fluid = undefined;
|
||||
if (project.fluid) {
|
||||
const edge = data.allCoverImages.edges.find(
|
||||
|
@ -71,15 +73,17 @@ function Portfolio() {
|
|||
}
|
||||
|
||||
return (
|
||||
<Project
|
||||
<Grid
|
||||
key={project.title}
|
||||
{...project}
|
||||
fluid={fluid}
|
||||
reverse={(index + 1) % 2 === 0}
|
||||
/>
|
||||
item
|
||||
xs={12}
|
||||
className={classes.gridItem}
|
||||
>
|
||||
<Project {...project} fluid={fluid} />
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
|
@ -121,26 +125,19 @@ const projects = [
|
|||
'GraphQL',
|
||||
'Golang',
|
||||
'gqlgen',
|
||||
'Echo',
|
||||
'Gin',
|
||||
'PostgreSQL',
|
||||
'TypeScript',
|
||||
'React',
|
||||
'React Native',
|
||||
'Next.JS',
|
||||
'Material-UI',
|
||||
'Apollo',
|
||||
'React Native',
|
||||
],
|
||||
github: '',
|
||||
fluid: 'projects/zdam.png',
|
||||
live: 'https://zdamegzaminzawodowy.pl/',
|
||||
},
|
||||
{
|
||||
title: 'matura-z-informatyki.pl',
|
||||
description: '',
|
||||
technologies: ['React', 'Next.JS', 'Bulma', 'Ghost'],
|
||||
github: 'https://github.com/Kichiyaki/matura-z-informatyki.pl',
|
||||
live: 'https://matura-z-informatyki.pl/',
|
||||
fluid: 'projects/maturazinf.png',
|
||||
},
|
||||
{
|
||||
title: 'dwysokinski.me',
|
||||
description: '',
|
||||
|
|
|
@ -1,22 +1,20 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import notFound from './not-found.jpg';
|
||||
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
Typography,
|
||||
Button,
|
||||
Chip,
|
||||
Link,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
import BackgroundImage from 'gatsby-background-image';
|
||||
|
||||
function Project({
|
||||
reverse,
|
||||
title,
|
||||
description,
|
||||
technologies,
|
||||
|
@ -27,11 +25,7 @@ function Project({
|
|||
}) {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Card
|
||||
className={classnames(classes.card, {
|
||||
reverse,
|
||||
})}
|
||||
>
|
||||
<Card className={classes.card}>
|
||||
{fluid ? (
|
||||
<BackgroundImage
|
||||
fluid={fluid}
|
||||
|
@ -43,12 +37,12 @@ function Project({
|
|||
)}
|
||||
<CardContent className={classes.cardContent}>
|
||||
<div className={classes.contentContainer}>
|
||||
<Typography variant="h3" gutterBottom>
|
||||
<Typography variant="h3" gutterBottom className={classes.title}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography>{description}</Typography>
|
||||
</div>
|
||||
<div className={classes.divider}></div>
|
||||
<div className={classes.divider} />
|
||||
<div className={classes.technologies}>
|
||||
{technologies.map(technology => {
|
||||
return (
|
||||
|
@ -81,27 +75,27 @@ const useStyles = makeStyles(theme => ({
|
|||
card: {
|
||||
display: 'flex',
|
||||
minHeight: '400px',
|
||||
'&.reverse': {
|
||||
flexDirection: 'row-reverse',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
},
|
||||
cardContent: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '45%',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '100%',
|
||||
},
|
||||
height: '100%',
|
||||
},
|
||||
divider: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
'-ms-word-break': 'break-all',
|
||||
wordBreak: 'break-word',
|
||||
'-ms-hyphens': 'auto',
|
||||
'-moz-hyphens': 'auto',
|
||||
'-webkit-hyphens': 'auto',
|
||||
hyphens: 'auto',
|
||||
},
|
||||
contentContainer: {
|
||||
marginBottom: theme.spacing(8),
|
||||
},
|
||||
|
@ -126,16 +120,12 @@ const useStyles = makeStyles(theme => ({
|
|||
},
|
||||
},
|
||||
cover: {
|
||||
width: '55%',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '100%',
|
||||
paddingTop: '56.25%',
|
||||
},
|
||||
width: '100%',
|
||||
paddingTop: '66.6666%',
|
||||
},
|
||||
}));
|
||||
|
||||
Project.defaultProps = {
|
||||
reverse: false,
|
||||
title: '',
|
||||
description: '',
|
||||
technologies: [],
|
||||
|
@ -145,7 +135,6 @@ Project.defaultProps = {
|
|||
};
|
||||
|
||||
Project.propTypes = {
|
||||
reverse: PropTypes.bool.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
|
|
Before Width: | Height: | Size: 454 KiB After Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 409 KiB After Width: | Height: | Size: 751 KiB |
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 2.2 MiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 413 KiB |