update prettier config
This commit is contained in:
parent
fefa513f79
commit
f0a701bc4c
|
|
@ -2,3 +2,4 @@
|
|||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
node_modules
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"arrowParens": "avoid",
|
||||
"semi": false
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import "@kichiyaki/roboto"
|
||||
import '@kichiyaki/roboto';
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export const HOME = "/"
|
||||
export const HOME = '/';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
height: '100%',
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
image: {
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
}))
|
||||
}));
|
||||
|
||||
function Technology({ fixed, name }) {
|
||||
const classes = useStyles()
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.paper}>
|
||||
<Image className={classes.image} fixed={fixed} />
|
||||
<Typography variant="body2">{name}</Typography>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Technology
|
||||
export default Technology;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles"
|
||||
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
type: "dark",
|
||||
type: 'dark',
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
export default responsiveFontSizes(theme)
|
||||
export default responsiveFontSizes(theme);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import isSmoothScrollSupported from "@utils/isSmoothScrollSupported"
|
||||
import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
|
||||
|
||||
export default () => {
|
||||
return id => e => {
|
||||
if (isSmoothScrollSupported()) {
|
||||
e.preventDefault()
|
||||
document.querySelector("#" + id).scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
})
|
||||
e.preventDefault();
|
||||
document.querySelector('#' + id).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import React from "react"
|
||||
import React from 'react';
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles"
|
||||
import { Container, Typography } from "@material-ui/core"
|
||||
import { Link } from "gatsby-theme-material-ui"
|
||||
import Layout from "@components/Layout/Layout"
|
||||
import SEO from "@components/SEO"
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { Container, Typography } from '@material-ui/core';
|
||||
import { Link } from 'gatsby-theme-material-ui';
|
||||
import Layout from '@components/Layout/Layout';
|
||||
import SEO from '@components/SEO';
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
container: {
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
},
|
||||
layout: {
|
||||
padding: "0",
|
||||
padding: '0',
|
||||
},
|
||||
}))
|
||||
}));
|
||||
|
||||
const NotFoundPage = ({ location }) => {
|
||||
const classes = useStyles()
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Layout className={classes.layout} showNavbar={false} showFooter={false}>
|
||||
|
|
@ -44,7 +44,7 @@ const NotFoundPage = ({ location }) => {
|
|||
</Typography>
|
||||
</Container>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundPage
|
||||
export default NotFoundPage;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export default () => "scrollBehavior" in document.documentElement.style
|
||||
export default () => 'scrollBehavior' in document.documentElement.style;
|
||||
|
|
|
|||
Loading…
Reference in New Issue