Kichiyaki
/
dwysokinski.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update prettier config

Browse Source
pull/3/head
Dawid Wysokiński 2 years ago
parent fefa513f79
commit f0a701bc4c
23 changed files with 423 additions and 419 deletions
Show Stats Download Patch File Download Diff File

1
.prettierignore
Unescape Escape View File

@ -2,3 +2,4 @@
package.json
package-lock.json
public
node_modules

3
.prettierrc
Unescape Escape View File

@ -1,4 +1,5 @@
{
"arrowParens": "avoid",
"semi": false
"semi": true,
"singleQuote": true
}

2
gatsby-browser.js
Unescape Escape View File

@ -1 +1 @@
import "@kichiyaki/roboto"
import '@kichiyaki/roboto';

14
gatsby-config.js
Unescape Escape View File

@ -1,11 +1,11 @@
const siteUrl = "https://dwysokinski.me"
const siteUrl = 'https://dwysokinski.me';
module.exports = {
siteMetadata: {
title: `Dawid Wysokiński | Full Stack Web Developer`,
description: `Dawid Wysokiński - Full Stack Web Developer | Back End Developer | Front End Developer`,
authorTwitter: `@Dawid56143781`,
authorFullName: "Dawid Wysokiński",
authorFullName: 'Dawid Wysokiński',
siteUrl,
},
plugins: [
@ -39,16 +39,16 @@ module.exports = {
},
`gatsby-plugin-sitemap`,
{
resolve: "gatsby-plugin-robots-txt",
resolve: 'gatsby-plugin-robots-txt',
options: {
host: siteUrl,
sitemap: siteUrl + "/sitemap.xml",
sitemap: siteUrl + '/sitemap.xml',
env: {
development: {
policy: [{ userAgent: "*", disallow: ["/"] }],
policy: [{ userAgent: '*', disallow: ['/'] }],
},
production: {
policy: [{ userAgent: "*", allow: "/" }],
policy: [{ userAgent: '*', allow: '/' }],
},
},
},
@ -57,4 +57,4 @@ module.exports = {
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
};

20
src/components/Layout/Footer.js
Unescape Escape View File

@ -1,26 +1,26 @@
import React from "react"
import React from 'react';
import { makeStyles } from "@material-ui/core/styles"
import { Typography } from "@material-ui/core"
import Section from "@components/Section"
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import Section from '@components/Section';
const useStyles = makeStyles(theme => {
return {
footer: {
padding: "1.5rem 0",
padding: '1.5rem 0',
},
}
})
};
});
function Footer() {
const classes = useStyles()
const classes = useStyles();
return (
<Section component="footer" className={classes.footer}>
<Typography align="center" variant="h6">
© {new Date().getFullYear()} Dawid Wysokiński
</Typography>
</Section>
)
);
}
export default Footer
export default Footer;

30
src/components/Layout/Layout.js
Unescape Escape View File

@ -1,19 +1,19 @@
import React, { Fragment } from "react"
import PropTypes from "prop-types"
import classnames from "classnames"
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { makeStyles } from "@material-ui/core/styles"
import { CssBaseline } from "@material-ui/core"
import Navbar from "./Navbar"
import Footer from "./Footer"
import { makeStyles } from '@material-ui/core/styles';
import { CssBaseline } from '@material-ui/core';
import Navbar from './Navbar';
import Footer from './Footer';
const useStyles = makeStyles(theme => ({
main: {
minHeight: "calc(100vh - 200px)",
minHeight: 'calc(100vh - 200px)',
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}))
}));
const Layout = ({
children,
@ -22,7 +22,7 @@ const Layout = ({
showNavbar,
showFooter,
}) => {
const classes = useStyles()
const classes = useStyles();
return (
<Fragment>
@ -31,19 +31,19 @@ const Layout = ({
{showFooter && <Footer />}
<CssBaseline />
</Fragment>
)
}
);
};
Layout.defaultProps = {
navbarProps: {},
showNavbar: true,
showFooter: true,
}
};
Layout.propTypes = {
children: PropTypes.node.isRequired,
showNavbar: PropTypes.bool.isRequired,
showFooter: PropTypes.bool.isRequired,
}
};
export default Layout
export default Layout;

68
src/components/Layout/Navbar.js
Unescape Escape View File

@ -1,19 +1,19 @@
import React from "react"
import classnames from "classnames"
import * as routes from "@config/routes"
import useSmoothScroll from "@libs/useSmoothScroll"
import logo from "@images/logo.svg"
import { HEADER_ID } from "@features/HomePage/components/Header"
import { SECTION_ID as PORTFOLIO_SECTION_ID } from "@features/HomePage/components/Portfolio/Portfolio"
import { SECTION_ID as CONTACT_SECTION_ID } from "@features/HomePage/components/Contact"
import React from 'react';
import classnames from 'classnames';
import * as routes from '@config/routes';
import useSmoothScroll from '@libs/useSmoothScroll';
import logo from '@images/logo.svg';
import { HEADER_ID } from '@features/HomePage/components/Header';
import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/HomePage/components/Portfolio/Portfolio';
import { SECTION_ID as CONTACT_SECTION_ID } from '@features/HomePage/components/Contact';
import { makeStyles } from "@material-ui/core/styles"
import { AppBar, Toolbar, Container, Link } from "@material-ui/core"
import { Link as GatsbyLink } from "gatsby-theme-material-ui"
import { makeStyles } from '@material-ui/core/styles';
import { AppBar, Toolbar, Container, Link } from '@material-ui/core';
import { Link as GatsbyLink } from 'gatsby-theme-material-ui';
function Navbar({ className, ...rest }) {
const classes = useStyles()
const handleClickLink = useSmoothScroll()
const classes = useStyles();
const handleClickLink = useSmoothScroll();
return (
<AppBar
@ -34,7 +34,7 @@ function Navbar({ className, ...rest }) {
<Link
title="Start"
color="inherit"
href={"#" + HEADER_ID}
href={'#' + HEADER_ID}
onClick={handleClickLink(HEADER_ID)}
>
Start
@ -42,7 +42,7 @@ function Navbar({ className, ...rest }) {
<Link
title="Portfolio"
color="inherit"
href={"#" + PORTFOLIO_SECTION_ID}
href={'#' + PORTFOLIO_SECTION_ID}
onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
>
Portfolio
@ -50,7 +50,7 @@ function Navbar({ className, ...rest }) {
<Link
title="Contact"
color="inherit"
href={"#" + CONTACT_SECTION_ID}
href={'#' + CONTACT_SECTION_ID}
onClick={handleClickLink(CONTACT_SECTION_ID)}
>
Contact
@ -59,49 +59,49 @@ function Navbar({ className, ...rest }) {
</Toolbar>
</Container>
</AppBar>
)
);
}
const useStyles = makeStyles(theme => ({
appBar: {
backgroundColor: "transparent",
color: "#fff",
boxShadow: "none",
backgroundColor: 'transparent',
color: '#fff',
boxShadow: 'none',
},
linkContainer: {
"& > *:not(:last-child)": {
'& > *:not(:last-child)': {
marginRight: theme.spacing(1.5),
},
[theme.breakpoints.down("xs")]: {
"& > *:not(:last-child)": {
[theme.breakpoints.down('xs')]: {
'& > *:not(:last-child)': {
marginRight: theme.spacing(0.75),
},
},
},
logo: {
width: "56px",
height: "auto",
[theme.breakpoints.down("xs")]: {
width: "48px",
width: '56px',
height: 'auto',
[theme.breakpoints.down('xs')]: {
width: '48px',
},
},
divider: {
flexGrow: 1,
},
link: {
width: "100%",
width: '100%',
},
titleContainer: {
display: "flex",
alignItems: "center",
"& > *:not(:last-child)": {
display: 'flex',
alignItems: 'center',
'& > *:not(:last-child)': {
marginRight: theme.spacing(1),
},
},
toolbar: {
padding: theme.spacing(2, 0),
fontSize: "1.25rem",
fontSize: '1.25rem',
},
}))
}));
export default Navbar
export default Navbar;

24
src/components/SEO.js
Unescape Escape View File

@ -1,8 +1,8 @@
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
import ogThumbnail from "@images/og_thumbnail.png"
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
import ogThumbnail from '@images/og_thumbnail.png';
function SEO({ description, lang, meta, title, pathname }) {
const { site } = useStaticQuery(
@ -18,9 +18,9 @@ function SEO({ description, lang, meta, title, pathname }) {
}
}
`
)
);
const metaDescription = description || site.siteMetadata.description
const metaDescription = description || site.siteMetadata.description;
return (
<Helmet
@ -28,7 +28,7 @@ function SEO({ description, lang, meta, title, pathname }) {
lang,
}}
title={title ?? site.siteMetadata.title}
titleTemplate={title ? `%s | ${site.siteMetadata.title}` : "%s"}
titleTemplate={title ? `%s | ${site.siteMetadata.title}` : '%s'}
meta={[
{
name: `description`,
@ -105,20 +105,20 @@ function SEO({ description, lang, meta, title, pathname }) {
content={`${site.siteMetadata.siteUrl}${pathname}`}
></link>
</Helmet>
)
);
}
SEO.defaultProps = {
lang: `pl`,
meta: [],
description: ``,
}
};
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
};
export default SEO
export default SEO;

60
src/components/Section.js
Unescape Escape View File

@ -1,64 +1,64 @@
import React from "react"
import PropTypes from "prop-types"
import classnames from "classnames"
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { makeStyles } from "@material-ui/core/styles"
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
section: {
padding: "3rem 0",
"&.is-primary": {
padding: '3rem 0',
'&.is-primary': {
backgroundColor: theme.palette.primary.main,
},
"&.is-black": {
backgroundColor: "#000",
color: "#fff",
'&.is-black': {
backgroundColor: '#000',
color: '#fff',
},
[theme.breakpoints.up("md")]: {
padding: "6rem 0",
[theme.breakpoints.up('md')]: {
padding: '6rem 0',
},
"&.is-small": {
padding: "3rem 0",
'&.is-small': {
padding: '3rem 0',
},
},
}))
}));
export const BG_COLOR = {
TRANSPARENT: "transparent",
BLACK: "black",
PRIMARY: "primary",
}
TRANSPARENT: 'transparent',
BLACK: 'black',
PRIMARY: 'primary',
};
export const SIZE = {
SMALL: "small",
MEDIUM: "medium",
}
SMALL: 'small',
MEDIUM: 'medium',
};
function Section({ children, className, bgColor, component, size, ...rest }) {
const classes = useStyles()
const Component = component || "section"
const classes = useStyles();
const Component = component || 'section';
return (
<Component
className={classnames(classes.section, className, {
"is-primary": bgColor === BG_COLOR.PRIMARY,
"is-black": bgColor === BG_COLOR.BLACK,
"is-small": size === SIZE.SMALL,
'is-primary': bgColor === BG_COLOR.PRIMARY,
'is-black': bgColor === BG_COLOR.BLACK,
'is-small': size === SIZE.SMALL,
})}
{...rest}
>
{children}
</Component>
)
);
}
Section.defaultProps = {
bgColor: BG_COLOR.TRANSPARENT,
size: SIZE.MEDIUM,
}
};
Section.propTypes = {
bgColor: PropTypes.oneOf(Object.values(BG_COLOR)).isRequired,
size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
}
};
export default Section
export default Section;

2
src/config/routes.js
Unescape Escape View File

@ -1 +1 @@
export const HOME = "/"
export const HOME = '/';

32
src/features/HomePage/HomePage.js
Unescape Escape View File

@ -1,25 +1,25 @@
import React from "react"
import React from 'react';
import { makeStyles } from "@material-ui/core/styles"
import { Divider } from "@material-ui/core"
import Layout from "@components/Layout/Layout"
import SEO from "@components/SEO"
import Header from "./components/Header"
import MyPriorities from "./components/MyPriorities/MyPriorities"
import Technologies from "./components/Technologies/Technologies"
import Portfolio from "./components/Portfolio/Portfolio"
import Contact from "./components/Contact"
import { makeStyles } from '@material-ui/core/styles';
import { Divider } from '@material-ui/core';
import Layout from '@components/Layout/Layout';
import SEO from '@components/SEO';
import Header from './components/Header';
import MyPriorities from './components/MyPriorities/MyPriorities';
import Technologies from './components/Technologies/Technologies';
import Portfolio from './components/Portfolio/Portfolio';
import Contact from './components/Contact';
const useStyles = makeStyles(theme => ({
layout: {
padding: 0,
},
}))
}));
const HomePage = ({ location }) => {
const classes = useStyles()
const classes = useStyles();
return (
<Layout className={classes.layout} navbarProps={{ position: "absolute" }}>
<Layout className={classes.layout} navbarProps={{ position: 'absolute' }}>
<SEO pathname={location.pathname} />
<Header />
<MyPriorities />
@ -29,7 +29,7 @@ const HomePage = ({ location }) => {
<Contact />
<Divider />
</Layout>
)
}
);
};
export default HomePage
export default HomePage;

46
src/features/HomePage/components/Contact.js
Unescape Escape View File

@ -1,23 +1,23 @@
import React from "react"
import React from 'react';
import { makeStyles } from "@material-ui/core/styles"
import { Typography, Container, Link } from "@material-ui/core"
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Container, Link } from '@material-ui/core';
import {
Email as EmailIcon,
GitHub as GitHubIcon,
Facebook as FacebookIcon,
} from "@material-ui/icons"
import Section from "@components/Section"
} from '@material-ui/icons';
import Section from '@components/Section';
export const SECTION_ID = "contact"
export const SECTION_ID = 'contact';
function Contact() {
const classes = useStyles()
const classes = useStyles();
const linkProps = {
underline: "hover",
color: "secondary",
}
underline: 'hover',
color: 'secondary',
};
return (
<Section size="small" id={SECTION_ID}>
@ -47,30 +47,30 @@ function Contact() {
</div>
</Container>
</Section>
)
);
}
const useStyles = makeStyles(theme => {
return {
container: {
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
urlContainer: {
"& > *:not(:last-child)": {
'& > *:not(:last-child)': {
marginBottom: theme.spacing(0.5),
},
"& > *": {
display: "flex",
alignItems: "center",
wordBreak: "break-all",
"& > *:not(:last-child)": {
'& > *': {
display: 'flex',
alignItems: 'center',
wordBreak: 'break-all',
'& > *:not(:last-child)': {
marginRight: theme.spacing(1),
},
},
},
}
})
};
});
export default Contact
export default Contact;

52
src/features/HomePage/components/Header.js
Unescape Escape View File

@ -1,16 +1,16 @@
import React from "react"
import useSmoothScroll from "@libs/useSmoothScroll"
import { SECTION_ID } from "./Contact"
import React from 'react';
import useSmoothScroll from '@libs/useSmoothScroll';
import { SECTION_ID } from './Contact';
import { makeStyles } from "@material-ui/core/styles"
import { Container, Typography, Button, Link } from "@material-ui/core"
import bg from "./header-bg.jpg"
import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Button, Link } from '@material-ui/core';
import bg from './header-bg.jpg';
export const HEADER_ID = "start"
export const HEADER_ID = 'start';
function Header() {
const classes = useStyles()
const handleLinkClick = useSmoothScroll()
const classes = useStyles();
const handleLinkClick = useSmoothScroll();
return (
<header id={HEADER_ID} className={classes.header}>
<Container className={classes.container}>
@ -28,7 +28,7 @@ function Header() {
</div>
<Link
underline="none"
to={"#" + SECTION_ID}
to={'#' + SECTION_ID}
onClick={handleLinkClick(SECTION_ID)}
>
<Button variant="outlined" size="large">
@ -38,31 +38,31 @@ function Header() {
</div>
</Container>
</header>
)
);
}
const useStyles = makeStyles(theme => ({
header: {
minHeight: "100vh",
minHeight: '100vh',
backgroundImage: `url(${bg})`,
backgroundSize: "cover",
backgroundPosition: "center",
clipPath: "polygon(0 0,100% 0,100% 80vh,0 100%)",
backgroundSize: 'cover',
backgroundPosition: 'center',
clipPath: 'polygon(0 0,100% 0,100% 80vh,0 100%)',
height: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
[theme.breakpoints.down("sm")]: {
height: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
[theme.breakpoints.down('sm')]: {
margin: 0,
clipPath: "none",
clipPath: 'none',
},
},
container: {
textAlign: "center",
height: "100%",
textAlign: 'center',
height: '100%',
paddingBottom: theme.spacing(8),
[theme.breakpoints.down("sm")]: {
[theme.breakpoints.down('sm')]: {
paddingBottom: theme.spacing(1),
},
},
@ -70,6 +70,6 @@ const useStyles = makeStyles(theme => ({
paddingTop: theme.spacing(12),
paddingBottom: theme.spacing(5),
},
}))
}));
export default Header
export default Header;

28
src/features/HomePage/components/MyPriorities/MyPriorities.js
Unescape Escape View File

@ -1,15 +1,15 @@
import React from "react"
import React from 'react';
import { makeStyles } from "@material-ui/core/styles"
import { Container, Typography, Grid } from "@material-ui/core"
import Section from "@components/Section"
import speedIcon from "./speed.svg"
import responsiveIcon from "./responsive.svg"
import securityIcon from "./security.svg"
import intuitiveIcon from "./intuitive.svg"
import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Grid } from '@material-ui/core';
import Section from '@components/Section';
import speedIcon from './speed.svg';
import responsiveIcon from './responsive.svg';
import securityIcon from './security.svg';
import intuitiveIcon from './intuitive.svg';
function MyPriorities() {
const classes = useStyles()
const classes = useStyles();
return (
<Section>
<Container className={classes.container}>
@ -53,21 +53,21 @@ function MyPriorities() {
</Grid>
</Container>
</Section>
)
);
}
const useStyles = makeStyles(theme => ({
icon: {
width: 128,
height: 128,
[theme.breakpoints.down("md")]: {
[theme.breakpoints.down('md')]: {
width: 96,
height: 96,
},
},
container: {
textAlign: "center",
textAlign: 'center',
},
}))
}));
export default MyPriorities
export default MyPriorities;

208
src/features/HomePage/components/Portfolio/Portfolio.js
Unescape Escape View File

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

82
src/features/HomePage/components/Portfolio/Project.js
Unescape Escape View File

@ -1,9 +1,9 @@
import React from "react"
import PropTypes from "prop-types"
import classnames from "classnames"
import notFound from "./not-found.jpg"
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 { makeStyles } from '@material-ui/core/styles';
import {
Card,
CardContent,
@ -12,8 +12,8 @@ import {
Button,
Chip,
Link,
} from "@material-ui/core"
import BackgroundImage from "gatsby-background-image"
} from '@material-ui/core';
import BackgroundImage from 'gatsby-background-image';
function Project({
reverse,
@ -25,7 +25,7 @@ function Project({
img,
fluid,
}) {
const classes = useStyles()
const classes = useStyles();
return (
<Card
className={classnames(classes.card, {
@ -53,7 +53,7 @@ function Project({
{technologies.map(technology => {
return (
<Chip key={technology} label={technology} color="secondary" />
)
);
})}
</div>
<div className={classes.buttons}>
@ -74,29 +74,29 @@ function Project({
</div>
</CardContent>
</Card>
)
);
}
const useStyles = makeStyles(theme => ({
card: {
display: "flex",
minHeight: "400px",
"&.reverse": {
flexDirection: "row-reverse",
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
display: 'flex',
minHeight: '400px',
'&.reverse': {
flexDirection: 'row-reverse',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
},
cardContent: {
display: "flex",
flexDirection: "column",
width: "45%",
[theme.breakpoints.down("sm")]: {
width: "100%",
display: 'flex',
flexDirection: 'column',
width: '45%',
[theme.breakpoints.down('sm')]: {
width: '100%',
},
},
divider: {
@ -107,42 +107,42 @@ const useStyles = makeStyles(theme => ({
},
technologies: {
marginBottom: theme.spacing(2),
"& > *:not(:last-child)": {
'& > *:not(:last-child)': {
marginRight: theme.spacing(1),
},
"& > *": {
'& > *': {
marginBottom: theme.spacing(1),
},
},
buttons: {
"& > *:not(:last-child)": {
'& > *:not(:last-child)': {
marginRight: theme.spacing(1),
},
"& > *": {
'& > *': {
marginBottom: theme.spacing(1),
[theme.breakpoints.down("xs")]: {
width: "100%",
[theme.breakpoints.down('xs')]: {
width: '100%',
},
},
},
cover: {
width: "55%",
[theme.breakpoints.down("sm")]: {
width: "100%",
paddingTop: "56.25%",
width: '55%',
[theme.breakpoints.down('sm')]: {
width: '100%',
paddingTop: '56.25%',
},
},
}))
}));
Project.defaultProps = {
reverse: false,
title: "",
description: "",
title: '',
description: '',
technologies: [],
github: "",
live: "",
github: '',
live: '',
img: notFound,
}
};
Project.propTypes = {
reverse: PropTypes.bool.isRequired,
@ -152,6 +152,6 @@ Project.propTypes = {
github: PropTypes.string.isRequired,
live: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
}
};
export default Project
export default Project;

74
src/features/HomePage/components/Technologies/Technologies.js
Unescape Escape View File

@ -1,21 +1,21 @@
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 { Container, Typography, Grid } from "@material-ui/core"
import Section from "@components/Section"
import Technology from "./Technology"
import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Grid } from '@material-ui/core';
import Section from '@components/Section';
import Technology from './Technology';
const useStyles = makeStyles(theme => ({
hide: {
[theme.breakpoints.down("md")]: {
display: "none",
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
}))
}));
function AboutMe() {
const classes = useStyles()
function Technologies() {
const classes = useStyles();
const data = useStaticQuery(graphql`
{
allIcons: allFile(filter: { absolutePath: { regex: "/technologies/" } }) {
@ -32,15 +32,17 @@ function AboutMe() {
}
}
}
`)
`);
const findIcon = path => {
const edge = data.allIcons.edges.find(img => img.node.relativePath === path)
const edge = data.allIcons.edges.find(
img => img.node.relativePath === path
);
if (edge) {
return edge.node.childImageSharp.fixed
return edge.node.childImageSharp.fixed;
}
return {}
}
return {};
};
return (
<Section>
@ -52,75 +54,75 @@ function AboutMe() {
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/html5.png")}
fixed={findIcon('technologies/html5.png')}
name="HTML"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology fixed={findIcon("technologies/css.png")} name="CSS" />
<Technology fixed={findIcon('technologies/css.png')} name="CSS" />
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology fixed={findIcon("technologies/scss.png")} name="SCSS" />
<Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/js.png")}
fixed={findIcon('technologies/js.png')}
name="JavaScript"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/typescript.png")}
fixed={findIcon('technologies/typescript.png')}
name="TypeScript"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/react.png")}
fixed={findIcon('technologies/react.png')}
name="React"
/>
</Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/gatsby.png")}
fixed={findIcon('technologies/gatsby.png')}
name="Gatsby"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/nextjs.png")}
fixed={findIcon('technologies/nextjs.png')}
name="Next.JS"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology fixed={findIcon("technologies/jest.png")} name="Jest" />
<Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/express.png")}
fixed={findIcon('technologies/express.png')}
name="Express"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/strapi.png")}
fixed={findIcon('technologies/strapi.png')}
name="Strapi"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/ghost.png")}
fixed={findIcon('technologies/ghost.png')}
name="Ghost"
/>
</Grid>
@ -129,49 +131,49 @@ function AboutMe() {
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/graphql.png")}
fixed={findIcon('technologies/graphql.png')}
name="GraphQL"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/golang.png")}
fixed={findIcon('technologies/golang.png')}
name="Golang"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/gqlgen.png")}
fixed={findIcon('technologies/gqlgen.png')}
name="gqlgen"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/golang.png")}
fixed={findIcon('technologies/golang.png')}
name="Gin"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/postgresql.png")}
fixed={findIcon('technologies/postgresql.png')}
name="PostgreSQL"
/>
</Grid>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item xs={6} sm={4} md={2} lg={1}>
<Technology
fixed={findIcon("technologies/docker.png")}
fixed={findIcon('technologies/docker.png')}
name="Docker"
/>
</Grid>
</Grid>
</Container>
</Section>
)
);
}
export default AboutMe
export default Technologies;

26
src/features/HomePage/components/Technologies/Technology.js
Unescape Escape View File

@ -1,31 +1,31 @@
import React from "react"
import React from 'react';
import { makeStyles } from "@material-ui/core/styles"
import { Typography, Paper } from "@material-ui/core"
import Image from "gatsby-image"
import { makeStyles } from '@material-ui/core/styles';
import { Typography, Paper } from '@material-ui/core';
import Image from 'gatsby-image';
const useStyles = makeStyles(theme => ({
paper: {
display: "flex",
alignItems: "center",
flexDirection: "column",
textAlign: "center",
height: "100%",
display: 'flex',
alignItems: 'center',