update prettier config
This commit is contained in:
parent
fefa513f79
commit
f0a701bc4c
|
@ -2,3 +2,4 @@
|
||||||
package.json
|
package.json
|
||||||
package-lock.json
|
package-lock.json
|
||||||
public
|
public
|
||||||
|
node_modules
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
"arrowParens": "avoid",
|
"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 = {
|
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`,
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 { 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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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',
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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