|
|
|
@ -1,34 +1,34 @@
|
|
|
|
|
import React from "react"
|
|
|
|
|
import { useStaticQuery, graphql } from "gatsby"
|
|
|
|
|
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"
|
|
|
|
|
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)",
|
|
|
|
|
transform: 'skewY(-7deg)',
|
|
|
|
|
padding: '8rem 0',
|
|
|
|
|
margin: '6rem 0',
|
|
|
|
|
'& > *': {
|
|
|
|
|
transform: 'skewY(7deg)',
|
|
|
|
|
},
|
|
|
|
|
[theme.breakpoints.down("sm")]: {
|
|
|
|
|
margin: "3rem 0",
|
|
|
|
|
[theme.breakpoints.down('sm')]: {
|
|
|
|
|
margin: '3rem 0',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
projects: {
|
|
|
|
|
"& > *:not(:last-child)": {
|
|
|
|
|
'& > *:not(:last-child)': {
|
|
|
|
|
marginBottom: theme.spacing(2),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}))
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
export const SECTION_ID = "portfolio"
|
|
|
|
|
export const SECTION_ID = 'portfolio';
|
|
|
|
|
|
|
|
|
|
function Portfolio() {
|
|
|
|
|
const classes = useStyles()
|
|
|
|
|
const classes = useStyles();
|
|
|
|
|
const data = useStaticQuery(graphql`
|
|
|
|
|
{
|
|
|
|
|
allCoverImages: allFile(
|
|
|
|
@ -47,7 +47,7 @@ function Portfolio() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`)
|
|
|
|
|
`);
|
|
|
|
|
return (
|
|
|
|
|
<Section
|
|
|
|
|
id={SECTION_ID}
|
|
|
|
@ -60,13 +60,13 @@ function Portfolio() {
|
|
|
|
|
</Typography>
|
|
|
|
|
<div className={classes.projects}>
|
|
|
|
|
{projects.map((project, index) => {
|
|
|
|
|
let fluid = undefined
|
|
|
|
|
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
|
|
|
|
|
fluid = edge.node.childImageSharp.fluid;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -77,121 +77,121 @@ function Portfolio() {
|
|
|
|
|
fluid={fluid}
|
|
|
|
|
reverse={(index + 1) % 2 === 0}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
</Container>
|
|
|
|
|
</Section>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const projects = [
|
|
|
|
|
{
|
|
|
|
|
title: "TWHelp",
|
|
|
|
|
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.",
|
|
|
|
|
'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",
|
|
|
|
|
'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/",
|
|
|
|
|
github: 'https://github.com/tribalwarshelp',
|
|
|
|
|
fluid: 'projects/twhelp.png',
|
|
|
|
|
live: 'https://tribalwarshelp.com/',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Zdam Egzamin Zawodowy",
|
|
|
|
|
title: 'Zdam Egzamin Zawodowy',
|
|
|
|
|
description:
|
|
|
|
|
"A mobile and web app for practising the theoretical part of the vocational exam.",
|
|
|
|
|
'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",
|
|
|
|
|
'GraphQL',
|
|
|
|
|
'Golang',
|
|
|
|
|
'gqlgen',
|
|
|
|
|
'Echo',
|
|
|
|
|
'PostgreSQL',
|
|
|
|
|
'React',
|
|
|
|
|
'Next.JS',
|
|
|
|
|
'Material-UI',
|
|
|
|
|
'Apollo',
|
|
|
|
|
'React Native',
|
|
|
|
|
],
|
|
|
|
|
github: "",
|
|
|
|
|
fluid: "projects/zdam.png",
|
|
|
|
|
live: "https://zdamegzaminzawodowy.pl/",
|
|
|
|
|
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: '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: '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.",
|
|
|
|
|
title: 'OLX Crawler',
|
|
|
|
|
description: 'An app written in Go to observe olx.pl ads.',
|
|
|
|
|
technologies: [
|
|
|
|
|
"Golang",
|
|
|
|
|
"Colly",
|
|
|
|
|
"SQLite3",
|
|
|
|
|
"Echo",
|
|
|
|
|
"React",
|
|
|
|
|
"Material-UI",
|
|
|
|
|
'Golang',
|
|
|
|
|
'Colly',
|
|
|
|
|
'SQLite3',
|
|
|
|
|
'Echo',
|
|
|
|
|
'React',
|
|
|
|
|
'Material-UI',
|
|
|
|
|
],
|
|
|
|
|
fluid: "projects/olx.png",
|
|
|
|
|
github: "https://github.com/Kichiyaki/olx-crawler",
|
|
|
|
|
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: '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",
|
|
|
|
|
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",
|
|
|
|
|
'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: '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",
|
|
|
|
|
title: 'Freshline',
|
|
|
|
|
description: '',
|
|
|
|
|
technologies: ['Wordpress', 'CSS', 'Bootstrap'],
|
|
|
|
|
live: 'http://fresh-line.pl/',
|
|
|
|
|
fluid: 'projects/freshline.png',
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default Portfolio
|
|
|
|
|
export default Portfolio;
|
|
|
|
|