dwysokinski.me/src/features/HomePage/components/Portfolio/Portfolio.js

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import { makeStyles } from '@material-ui/core/styles';
import { Typography, Container } from '@material-ui/core';
import Section, { BG_COLOR } from '@components/Section';
import Project from './Project';

const useStyles = makeStyles(theme => ({
  section: {
    transform: 'skewY(-7deg)',
    padding: '8rem 0',
    margin: '6rem 0',
    '& > *': {
      transform: 'skewY(7deg)',
    },
    [theme.breakpoints.down('sm')]: {
      margin: '3rem 0',
    },
  },
  projects: {
    '& > *:not(:last-child)': {
      marginBottom: theme.spacing(2),
    },
  },
}));

export const SECTION_ID = 'portfolio';

function Portfolio() {
  const classes = useStyles();
  const data = useStaticQuery(graphql`
    {
      allCoverImages: allFile(
        filter: { absolutePath: { regex: "/projects/" } }
      ) {
        edges {
          node {
            relativePath
            childImageSharp {
              id
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);
  return (
    <Section
      id={SECTION_ID}
      className={classes.section}
      bgColor={BG_COLOR.PRIMARY}
    >
      <Container>
        <Typography variant="h2" align="center" gutterBottom>
          My work
        </Typography>
        <div className={classes.projects}>
          {projects.map((project, index) => {
            let fluid = undefined;
            if (project.fluid) {
              const edge = data.allCoverImages.edges.find(
                img => img.node.relativePath === project.fluid
              );
              if (edge) {
                fluid = edge.node.childImageSharp.fluid;
              }
            }

            return (
              <Project
                key={project.title}
                {...project}
                fluid={fluid}
                reverse={(index + 1) % 2 === 0}
              />
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

const projects = [
  {
    title: 'TWHelp',
    description:
      'A stat tracking and tools website, scripts, a public GraphQL API and a Discord bot for the browser-based game Tribal Wars.',
    technologies: [
      'GraphQL',
      'Golang',
      'gqlgen',
      'Gin',
      'discordgo',
      'robfig/cron',
      'Redis',
      'PostgreSQL',
      'TypeScript',
      'React',
      'Gatsby',
      'Material-UI',
      'Create React App',
      'Apollo',
      'Parcel',
      'Docker',
      'Traefik',
    ],
    github: 'https://github.com/tribalwarshelp',
    fluid: 'projects/twhelp.png',
    live: 'https://tribalwarshelp.com/',
  },
  {
    title: 'Zdam Egzamin Zawodowy',
    description:
      'A mobile and web app for practising the theoretical part of the vocational exam.',
    technologies: [
      'GraphQL',
      'Golang',
      'gqlgen',
      'Echo',
      'PostgreSQL',
      'React',
      '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: '',
    technologies: ['React', 'Gatsby', 'Material-UI'],
    github: 'https://github.com/Kichiyaki/dwysokinski.me',
    live: 'https://dwysokinski.me',
    fluid: 'projects/dw.png',
  },
  {
    title: 'OLX Crawler',
    description: 'An app written in Go to observe olx.pl ads.',
    technologies: [
      'Golang',
      'Colly',
      'SQLite3',
      'Echo',
      'React',
      'Material-UI',
    ],
    fluid: 'projects/olx.png',
    github: 'https://github.com/Kichiyaki/olx-crawler',
  },
  {
    title: 'Instaling.pl Bot',
    description: 'A bot that solves the instaling.pl vocabulary test for you.',
    technologies: ['Golang', 'Lorca'],
    fluid: 'projects/instaling.png',
    github: 'https://github.com/Kichiyaki/Instaling-Bot',
  },
  {
    title: 'Margonem Mini Bot',
    description:
      'A bot for the mobile client of the browser-based MMORPG game Margonem.',
    technologies: ['Golang', 'Colly'],
    fluid: 'projects/margonem.png',
    github: 'https://github.com/Kichiyaki/margonem-mini-bot',
  },
  {
    title: 'Akademia Młodego Inżyniera',
    description: '',
    technologies: ['HTML', 'CSS', 'Bootstrap'],
    live: 'https://dwysokinski.me/preview/akademia/',
    fluid: 'projects/amz.png',
  },
  {
    title: 'Freshline',
    description: '',
    technologies: ['Wordpress', 'CSS', 'Bootstrap'],
    live: 'http://fresh-line.pl/',
    fluid: 'projects/freshline.png',
  },
];

export default Portfolio;