update prettier config

This commit is contained in:
Dawid Wysokiński 2021-01-17 09:31:50 +01:00
parent fefa513f79
commit f0a701bc4c
23 changed files with 423 additions and 419 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,34 +1,34 @@
import React from "react" import React from 'react';
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from 'gatsby';
import { makeStyles } from "@material-ui/core/styles" import { makeStyles } from '@material-ui/core/styles';
import { Typography, Container } from "@material-ui/core" import { Typography, Container } from '@material-ui/core';
import Section, { BG_COLOR } from "@components/Section" import Section, { BG_COLOR } from '@components/Section';
import Project from "./Project" import Project from './Project';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
section: { section: {
transform: "skewY(-7deg)", transform: 'skewY(-7deg)',
padding: "8rem 0", padding: '8rem 0',
margin: "6rem 0", margin: '6rem 0',
"& > *": { '& > *': {
transform: "skewY(7deg)", transform: 'skewY(7deg)',
}, },
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down('sm')]: {
margin: "3rem 0", margin: '3rem 0',
}, },
}, },
projects: { projects: {
"& > *:not(:last-child)": { '& > *:not(:last-child)': {
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
}, },
}, },
})) }));
export const SECTION_ID = "portfolio" export const SECTION_ID = 'portfolio';
function Portfolio() { function Portfolio() {
const classes = useStyles() const classes = useStyles();
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
{ {
allCoverImages: allFile( allCoverImages: allFile(
@ -47,7 +47,7 @@ function Portfolio() {
} }
} }
} }
`) `);
return ( return (
<Section <Section
id={SECTION_ID} id={SECTION_ID}
@ -60,13 +60,13 @@ function Portfolio() {
</Typography> </Typography>
<div className={classes.projects}> <div className={classes.projects}>
{projects.map((project, index) => { {projects.map((project, index) => {
let fluid = undefined let fluid = undefined;
if (project.fluid) { if (project.fluid) {
const edge = data.allCoverImages.edges.find( const edge = data.allCoverImages.edges.find(
img => img.node.relativePath === project.fluid img => img.node.relativePath === project.fluid
) );
if (edge) { if (edge) {
fluid = edge.node.childImageSharp.fluid fluid = edge.node.childImageSharp.fluid;
} }
} }
@ -77,121 +77,121 @@ function Portfolio() {
fluid={fluid} fluid={fluid}
reverse={(index + 1) % 2 === 0} reverse={(index + 1) % 2 === 0}
/> />
) );
})} })}
</div> </div>
</Container> </Container>
</Section> </Section>
) );
} }
const projects = [ const projects = [
{ {
title: "TWHelp", title: 'TWHelp',
description: 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: [ technologies: [
"GraphQL", 'GraphQL',
"Golang", 'Golang',
"gqlgen", 'gqlgen',
"Gin", 'Gin',
"discordgo", 'discordgo',
"robfig/cron", 'robfig/cron',
"Redis", 'Redis',
"PostgreSQL", 'PostgreSQL',
"TypeScript", 'TypeScript',
"React", 'React',
"Gatsby", 'Gatsby',
"Material-UI", 'Material-UI',
"Create React App", 'Create React App',
"Apollo", 'Apollo',
"Parcel", 'Parcel',
"Docker", 'Docker',
"Traefik", 'Traefik',
], ],
github: "https://github.com/tribalwarshelp", github: 'https://github.com/tribalwarshelp',
fluid: "projects/twhelp.png", fluid: 'projects/twhelp.png',
live: "https://tribalwarshelp.com/", live: 'https://tribalwarshelp.com/',
}, },
{ {
title: "Zdam Egzamin Zawodowy", title: 'Zdam Egzamin Zawodowy',
description: 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: [ technologies: [
"GraphQL", 'GraphQL',
"Golang", 'Golang',
"gqlgen", 'gqlgen',
"Echo", 'Echo',
"PostgreSQL", 'PostgreSQL',
"React", 'React',
"Next.JS", 'Next.JS',
"Material-UI", 'Material-UI',
"Apollo", 'Apollo',
"React Native", 'React Native',
], ],
github: "", github: '',
fluid: "projects/zdam.png", fluid: 'projects/zdam.png',
live: "https://zdamegzaminzawodowy.pl/", live: 'https://zdamegzaminzawodowy.pl/',
}, },
{ {
title: "matura-z-informatyki.pl", title: 'matura-z-informatyki.pl',
description: "", description: '',
technologies: ["React", "Next.JS", "Bulma", "Ghost"], technologies: ['React', 'Next.JS', 'Bulma', 'Ghost'],
github: "https://github.com/Kichiyaki/matura-z-informatyki.pl", github: 'https://github.com/Kichiyaki/matura-z-informatyki.pl',
live: "https://matura-z-informatyki.pl/", live: 'https://matura-z-informatyki.pl/',
fluid: "projects/maturazinf.png", fluid: 'projects/maturazinf.png',
}, },
{ {
title: "dwysokinski.me", title: 'dwysokinski.me',
description: "", description: '',
technologies: ["React", "Gatsby", "Material-UI"], technologies: ['React', 'Gatsby', 'Material-UI'],
github: "https://github.com/Kichiyaki/dwysokinski.me", github: 'https://github.com/Kichiyaki/dwysokinski.me',
live: "https://dwysokinski.me", live: 'https://dwysokinski.me',
fluid: "projects/dw.png", fluid: 'projects/dw.png',
}, },
{ {
title: "OLX Crawler", title: 'OLX Crawler',
description: "An app written in Go to observe olx.pl ads.", description: 'An app written in Go to observe olx.pl ads.',
technologies: [ technologies: [
"Golang", 'Golang',
"Colly", 'Colly',
"SQLite3", 'SQLite3',
"Echo", 'Echo',
"React", 'React',
"Material-UI", 'Material-UI',
], ],
fluid: "projects/olx.png", fluid: 'projects/olx.png',
github: "https://github.com/Kichiyaki/olx-crawler", github: 'https://github.com/Kichiyaki/olx-crawler',
}, },
{ {
title: "Instaling.pl Bot", title: 'Instaling.pl Bot',
description: "A bot that solves the instaling.pl vocabulary test for you.", description: 'A bot that solves the instaling.pl vocabulary test for you.',
technologies: ["Golang", "Lorca"], technologies: ['Golang', 'Lorca'],
fluid: "projects/instaling.png", fluid: 'projects/instaling.png',
github: "https://github.com/Kichiyaki/Instaling-Bot", github: 'https://github.com/Kichiyaki/Instaling-Bot',
}, },
{ {
title: "Margonem Mini Bot", title: 'Margonem Mini Bot',
description: description:
"A bot for the mobile client of the browser-based MMORPG game Margonem.", 'A bot for the mobile client of the browser-based MMORPG game Margonem.',
technologies: ["Golang", "Colly"], technologies: ['Golang', 'Colly'],
fluid: "projects/margonem.png", fluid: 'projects/margonem.png',
github: "https://github.com/Kichiyaki/margonem-mini-bot", github: 'https://github.com/Kichiyaki/margonem-mini-bot',
}, },
{ {
title: "Akademia Młodego Inżyniera", title: 'Akademia Młodego Inżyniera',
description: "", description: '',
technologies: ["HTML", "CSS", "Bootstrap"], technologies: ['HTML', 'CSS', 'Bootstrap'],
live: "https://dwysokinski.me/preview/akademia/", live: 'https://dwysokinski.me/preview/akademia/',
fluid: "projects/amz.png", fluid: 'projects/amz.png',
}, },
{ {
title: "Freshline", title: 'Freshline',
description: "", description: '',
technologies: ["Wordpress", "CSS", "Bootstrap"], technologies: ['Wordpress', 'CSS', 'Bootstrap'],
live: "http://fresh-line.pl/", live: 'http://fresh-line.pl/',
fluid: "projects/freshline.png", fluid: 'projects/freshline.png',
}, },
] ];
export default Portfolio export default Portfolio;

View File

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

View File

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

View File

@ -1,31 +1,31 @@
import React from "react" import React from 'react';
import { makeStyles } from "@material-ui/core/styles" import { makeStyles } from '@material-ui/core/styles';
import { Typography, Paper } from "@material-ui/core" import { Typography, Paper } from '@material-ui/core';
import Image from "gatsby-image" import Image from 'gatsby-image';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
paper: { paper: {
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
textAlign: "center", textAlign: 'center',
height: "100%", height: '100%',
padding: theme.spacing(1), padding: theme.spacing(1),
}, },
image: { image: {
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
}, },
})) }));
function Technology({ fixed, name }) { function Technology({ fixed, name }) {
const classes = useStyles() const classes = useStyles();
return ( return (
<Paper className={classes.paper}> <Paper className={classes.paper}>
<Image className={classes.image} fixed={fixed} /> <Image className={classes.image} fixed={fixed} />
<Typography variant="body2">{name}</Typography> <Typography variant="body2">{name}</Typography>
</Paper> </Paper>
) );
} }
export default Technology export default Technology;

View File

@ -1,9 +1,9 @@
import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles" import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
const theme = createMuiTheme({ const theme = createMuiTheme({
palette: { palette: {
type: "dark", type: 'dark',
}, },
}) });
export default responsiveFontSizes(theme) export default responsiveFontSizes(theme);

View File

@ -1,14 +1,14 @@
import isSmoothScrollSupported from "@utils/isSmoothScrollSupported" import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
export default () => { export default () => {
return id => e => { return id => e => {
if (isSmoothScrollSupported()) { if (isSmoothScrollSupported()) {
e.preventDefault() e.preventDefault();
document.querySelector("#" + id).scrollIntoView({ document.querySelector('#' + id).scrollIntoView({
behavior: "smooth", behavior: 'smooth',
block: "start", block: 'start',
inline: "nearest", inline: 'nearest',
}) });
} }
} };
} };

View File

@ -1,26 +1,26 @@
import React from "react" import React from 'react';
import { makeStyles } from "@material-ui/core/styles" import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography } from "@material-ui/core" import { Container, Typography } from '@material-ui/core';
import { Link } from "gatsby-theme-material-ui" import { Link } from 'gatsby-theme-material-ui';
import Layout from "@components/Layout/Layout" import Layout from '@components/Layout/Layout';
import SEO from "@components/SEO" import SEO from '@components/SEO';
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
container: { container: {
minHeight: "100vh", minHeight: '100vh',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "center", justifyContent: 'center',
textAlign: "center", textAlign: 'center',
}, },
layout: { layout: {
padding: "0", padding: '0',
}, },
})) }));
const NotFoundPage = ({ location }) => { const NotFoundPage = ({ location }) => {
const classes = useStyles() const classes = useStyles();
return ( return (
<Layout className={classes.layout} showNavbar={false} showFooter={false}> <Layout className={classes.layout} showNavbar={false} showFooter={false}>
@ -44,7 +44,7 @@ const NotFoundPage = ({ location }) => {
</Typography> </Typography>
</Container> </Container>
</Layout> </Layout>
) );
} };
export default NotFoundPage export default NotFoundPage;

View File

@ -1,7 +1,7 @@
import React from "react" import React from 'react';
import HomePage from "@features/HomePage/HomePage" import HomePage from '@features/HomePage/HomePage';
const IndexPage = props => <HomePage {...props} /> const IndexPage = props => <HomePage {...props} />;
export default IndexPage export default IndexPage;

View File

@ -1 +1 @@
export default () => "scrollBehavior" in document.documentElement.style export default () => 'scrollBehavior' in document.documentElement.style;