7
.babelrc
|
@ -10,7 +10,6 @@
|
||||||
"@config": "./src/config",
|
"@config": "./src/config",
|
||||||
"@features": "./src/features",
|
"@features": "./src/features",
|
||||||
"@images": "./src/images",
|
"@images": "./src/images",
|
||||||
"@libs": "./src/libs",
|
|
||||||
"@utils": "./src/utils"
|
"@utils": "./src/utils"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -19,32 +18,26 @@
|
||||||
"babel-plugin-transform-imports",
|
"babel-plugin-transform-imports",
|
||||||
{
|
{
|
||||||
"@material-ui/core": {
|
"@material-ui/core": {
|
||||||
// Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "@material-ui/core/${member}",
|
"transform": "@material-ui/core/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
},
|
},
|
||||||
"@material-ui/lab": {
|
"@material-ui/lab": {
|
||||||
// Use "transform: '@material-ui/lab/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "@material-ui/lab/${member}",
|
"transform": "@material-ui/lab/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
},
|
},
|
||||||
"@material-ui/icons": {
|
"@material-ui/icons": {
|
||||||
// Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "@material-ui/icons/${member}",
|
"transform": "@material-ui/icons/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
},
|
},
|
||||||
"lodash": {
|
"lodash": {
|
||||||
// Use "transform: 'lodash/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "lodash/${member}",
|
"transform": "lodash/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
},
|
},
|
||||||
"date-fns": {
|
"date-fns": {
|
||||||
// Use "transform: 'date-fns/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "date-fns/${member}",
|
"transform": "date-fns/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
},
|
},
|
||||||
"validator": {
|
"validator": {
|
||||||
// Use "transform: 'validator/${member}'," if your bundler does not support ES modules
|
|
||||||
"transform": "validator/lib/${member}",
|
"transform": "validator/lib/${member}",
|
||||||
"preventFullImport": true
|
"preventFullImport": true
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
FROM node:14.19.2-alpine as build-deps
|
FROM node:14.19.2-alpine as build-deps
|
||||||
|
|
||||||
ARG PLAUSIBLE_CUSTOM_DOMAIN=""
|
ENV NODE_ENV=production
|
||||||
|
|
||||||
ENV PLAUSIBLE_CUSTOM_DOMAIN=$PLAUSIBLE_CUSTOM_DOMAIN \
|
|
||||||
NODE_ENV=production
|
|
||||||
|
|
||||||
RUN apk --no-cache add shadow \
|
RUN apk --no-cache add shadow \
|
||||||
gcc \
|
gcc \
|
||||||
|
|
18
README.md
|
@ -1,23 +1,5 @@
|
||||||
# dwysokinski.me
|
|
||||||
|
|
||||||
|
|
||||||
![Screenshot](/src/images/projects/dw.png?raw=true)
|
![Screenshot](/src/images/projects/dw.png?raw=true)
|
||||||
|
|
||||||
## Development
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
1. Node.JS
|
|
||||||
2. yarn/npm
|
|
||||||
3. gatsby-cli
|
|
||||||
|
|
||||||
### Installation
|
|
||||||
|
|
||||||
1. Clone this repo
|
|
||||||
2. Open the folder with this project in a terminal.
|
|
||||||
3. ``yarn install``
|
|
||||||
4. ``yarn run develop``
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Distributed under the MIT License. See ``LICENSE`` for more information.
|
Distributed under the MIT License. See ``LICENSE`` for more information.
|
||||||
|
|
|
@ -5,7 +5,6 @@ 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 | Backend Developer | Frontend Developer | Go Developer | React Developer | Node.js Developer`,
|
description: `Dawid Wysokiński - Full Stack Web Developer | Backend Developer | Frontend Developer | Go Developer | React Developer | Node.js Developer`,
|
||||||
authorTwitter: `@Dawid56143781`,
|
|
||||||
authorFullName: 'Dawid Wysokiński',
|
authorFullName: 'Dawid Wysokiński',
|
||||||
siteUrl: SITE_URL,
|
siteUrl: SITE_URL,
|
||||||
email: 'contact@dwysokinski.me',
|
email: 'contact@dwysokinski.me',
|
||||||
|
@ -66,12 +65,5 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
resolve: `@kichiyaki/gatsby-plugin-plausible`,
|
|
||||||
options: {
|
|
||||||
domain: DOMAIN,
|
|
||||||
customDomain: process.env.PLAUSIBLE_CUSTOM_DOMAIN,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
"@config/*": ["src/config/*"],
|
"@config/*": ["src/config/*"],
|
||||||
"@features/*": ["src/features/*"],
|
"@features/*": ["src/features/*"],
|
||||||
"@images/*": ["src/images/*"],
|
"@images/*": ["src/images/*"],
|
||||||
"@libs/*": ["src/libs/*"],
|
|
||||||
"@utils/*": ["src/utils/*"]
|
"@utils/*": ["src/utils/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -3,9 +3,8 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "Personal website",
|
"description": "Personal website",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"author": "Dawid Wysokiński <xyztojajestem@gmail.com>",
|
"author": "Dawid Wysokiński <contact@dwysokinski.me>",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kichiyaki/gatsby-plugin-plausible": "^0.0.8",
|
|
||||||
"@kichiyaki/roboto": "^1.0.0",
|
"@kichiyaki/roboto": "^1.0.0",
|
||||||
"@material-ui/core": "^4.11.0",
|
"@material-ui/core": "^4.11.0",
|
||||||
"@material-ui/icons": "^4.9.1",
|
"@material-ui/icons": "^4.9.1",
|
||||||
|
@ -47,9 +46,9 @@
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/Kichiyaki/dwysokinski.me"
|
"url": "https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/Kichiyaki/dwysokinski.me/issues"
|
"url": "https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me/issues"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { graphql, useStaticQuery } from 'gatsby';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { Route } from '@config/routing';
|
import { ROUTE } from '@config/routing';
|
||||||
import useSmoothScroll from '@libs/useSmoothScroll';
|
import smoothScroll from '@utils/smoothScroll';
|
||||||
import logo from '@images/logo.svg';
|
import { HEADER_ID } from '@features/IndexPage/components/Header/Header';
|
||||||
import { HEADER_ID } from '@features/IndexPage/components/Header';
|
|
||||||
import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/IndexPage/components/Portfolio/Portfolio';
|
import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/IndexPage/components/Portfolio/Portfolio';
|
||||||
import { SECTION_ID as CONTACT_SECTION_ID } from '@features/IndexPage/components/Contact';
|
import { SECTION_ID as CONTACT_SECTION_ID } from '@features/IndexPage/components/Contact';
|
||||||
|
|
||||||
|
@ -13,7 +13,13 @@ 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 data = useStaticQuery(graphql`
|
||||||
|
{
|
||||||
|
logo: file(base: { eq: "logo.svg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBar
|
<AppBar
|
||||||
|
@ -25,8 +31,16 @@ function Navbar({ className, ...rest }) {
|
||||||
<Container>
|
<Container>
|
||||||
<Toolbar className={classes.toolbar} disableGutters>
|
<Toolbar className={classes.toolbar} disableGutters>
|
||||||
<div className={classes.titleContainer}>
|
<div className={classes.titleContainer}>
|
||||||
<GatsbyLink title="Strona główna" color="inherit" to={Route.IndexPage}>
|
<GatsbyLink
|
||||||
<img className={classes.logo} src={logo} alt="logo" />
|
title="Strona główna"
|
||||||
|
color="inherit"
|
||||||
|
to={ROUTE.INDEX_PAGE}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className={classes.logo}
|
||||||
|
src={data.logo.publicURL}
|
||||||
|
alt="logo"
|
||||||
|
/>
|
||||||
</GatsbyLink>
|
</GatsbyLink>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.divider} />
|
<div className={classes.divider} />
|
||||||
|
@ -35,7 +49,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Start"
|
title="Start"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + HEADER_ID}
|
href={'#' + HEADER_ID}
|
||||||
onClick={handleClickLink(HEADER_ID)}
|
onClick={smoothScroll(HEADER_ID)}
|
||||||
>
|
>
|
||||||
Start
|
Start
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -43,7 +57,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Portfolio"
|
title="Portfolio"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + PORTFOLIO_SECTION_ID}
|
href={'#' + PORTFOLIO_SECTION_ID}
|
||||||
onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
|
onClick={smoothScroll(PORTFOLIO_SECTION_ID)}
|
||||||
>
|
>
|
||||||
Portfolio
|
Portfolio
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -51,7 +65,7 @@ function Navbar({ className, ...rest }) {
|
||||||
title="Contact"
|
title="Contact"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
href={'#' + CONTACT_SECTION_ID}
|
href={'#' + CONTACT_SECTION_ID}
|
||||||
onClick={handleClickLink(CONTACT_SECTION_ID)}
|
onClick={smoothScroll(CONTACT_SECTION_ID)}
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -70,11 +84,11 @@ const useStyles = makeStyles(theme => ({
|
||||||
},
|
},
|
||||||
linkContainer: {
|
linkContainer: {
|
||||||
'& > *:not(:last-child)': {
|
'& > *:not(:last-child)': {
|
||||||
marginRight: theme.spacing(1.5),
|
marginRight: theme.spacing(2),
|
||||||
},
|
},
|
||||||
[theme.breakpoints.down('xs')]: {
|
[theme.breakpoints.down('xs')]: {
|
||||||
'& > *:not(:last-child)': {
|
'& > *:not(:last-child)': {
|
||||||
marginRight: theme.spacing(0.75),
|
marginRight: theme.spacing(1),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -4,25 +4,6 @@ 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': {
|
|
||||||
backgroundColor: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
'&.is-black': {
|
|
||||||
backgroundColor: '#000',
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
padding: '6rem 0',
|
|
||||||
},
|
|
||||||
'&.is-small': {
|
|
||||||
padding: '3rem 0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const BG_COLOR = {
|
export const BG_COLOR = {
|
||||||
TRANSPARENT: 'transparent',
|
TRANSPARENT: 'transparent',
|
||||||
BLACK: 'black',
|
BLACK: 'black',
|
||||||
|
@ -61,4 +42,23 @@ Section.propTypes = {
|
||||||
size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
|
size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
section: {
|
||||||
|
padding: '3rem 0',
|
||||||
|
'&.is-primary': {
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
'&.is-black': {
|
||||||
|
backgroundColor: '#000',
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
padding: '6rem 0',
|
||||||
|
},
|
||||||
|
'&.is-small': {
|
||||||
|
padding: '3rem 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default Section;
|
export default Section;
|
||||||
|
|
|
@ -2,20 +2,21 @@ 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';
|
|
||||||
|
|
||||||
function Seo({ description, lang, meta, title, pathname }) {
|
function Seo({ description, lang, meta, title, pathname }) {
|
||||||
const { site } = useStaticQuery(
|
const { site, thumbnail } = useStaticQuery(
|
||||||
graphql`
|
graphql`
|
||||||
query {
|
{
|
||||||
site {
|
site {
|
||||||
siteMetadata {
|
siteMetadata {
|
||||||
title
|
title
|
||||||
description
|
description
|
||||||
siteUrl
|
siteUrl
|
||||||
authorTwitter
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
thumbnail: file(base: { eq: "thumbnail.png" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
|
@ -52,7 +53,7 @@ function Seo({ description, lang, meta, title, pathname }) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:image`,
|
property: `og:image`,
|
||||||
content: `${site.siteMetadata.siteUrl}${ogThumbnail}`,
|
content: `${site.siteMetadata.siteUrl}${thumbnail.publicURL}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:image:width`,
|
property: `og:image:width`,
|
||||||
|
@ -70,10 +71,6 @@ function Seo({ description, lang, meta, title, pathname }) {
|
||||||
property: `og:locale`,
|
property: `og:locale`,
|
||||||
content: `en`,
|
content: `en`,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: `twitter:creator`,
|
|
||||||
content: site.siteMetadata.authorTwitter,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: `twitter:card`,
|
name: `twitter:card`,
|
||||||
content: `summary_large_image`,
|
content: `summary_large_image`,
|
||||||
|
@ -92,7 +89,7 @@ function Seo({ description, lang, meta, title, pathname }) {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:image`,
|
name: `twitter:image`,
|
||||||
content: `${site.siteMetadata.siteUrl}${ogThumbnail}`,
|
content: `${site.siteMetadata.siteUrl}${thumbnail.publicURL}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:image:alt`,
|
name: `twitter:image:alt`,
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
export const Route = {
|
export const ROUTE = {
|
||||||
IndexPage: '/',
|
INDEX_PAGE: '/',
|
||||||
}
|
};
|
||||||
|
|
|
@ -4,18 +4,12 @@ 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/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 => ({
|
|
||||||
layout: {
|
|
||||||
padding: 0,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const IndexPage = ({ location }) => {
|
const IndexPage = ({ location }) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return (
|
||||||
|
@ -32,4 +26,10 @@ const IndexPage = ({ location }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
layout: {
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default IndexPage;
|
export default IndexPage;
|
||||||
|
|
|
@ -1,16 +1,23 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import useSmoothScroll from '@libs/useSmoothScroll';
|
import { graphql, useStaticQuery } from 'gatsby';
|
||||||
import { SECTION_ID } from './Contact';
|
import smoothScroll from '@utils/smoothScroll';
|
||||||
|
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';
|
|
||||||
|
|
||||||
export const HEADER_ID = 'start';
|
export const HEADER_ID = 'start';
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
const classes = useStyles();
|
const data = useStaticQuery(graphql`
|
||||||
const handleLinkClick = useSmoothScroll();
|
{
|
||||||
|
bg: file(base: { eq: "header-bg.jpg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
const classes = useStyles({ bg: data.bg.publicURL });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header id={HEADER_ID} className={classes.header}>
|
<header id={HEADER_ID} className={classes.header}>
|
||||||
<Container className={classes.container}>
|
<Container className={classes.container}>
|
||||||
|
@ -20,7 +27,7 @@ function Header() {
|
||||||
Full Stack Web Developer
|
Full Stack Web Developer
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="h3">
|
<Typography variant="h3">
|
||||||
I create websites and web apps.
|
I develop websites and web apps.
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography gutterBottom variant="h3">
|
<Typography gutterBottom variant="h3">
|
||||||
Do you have an idea, project or problem you would like to discuss?
|
Do you have an idea, project or problem you would like to discuss?
|
||||||
|
@ -29,7 +36,7 @@ function Header() {
|
||||||
<Link
|
<Link
|
||||||
underline="none"
|
underline="none"
|
||||||
to={'#' + SECTION_ID}
|
to={'#' + SECTION_ID}
|
||||||
onClick={handleLinkClick(SECTION_ID)}
|
onClick={smoothScroll(SECTION_ID)}
|
||||||
>
|
>
|
||||||
<Button variant="outlined" size="large">
|
<Button variant="outlined" size="large">
|
||||||
<Typography variant="h4">Get in touch</Typography>
|
<Typography variant="h4">Get in touch</Typography>
|
||||||
|
@ -44,7 +51,7 @@ function Header() {
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
header: {
|
header: {
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
backgroundImage: `url(${bg})`,
|
backgroundImage: ({ bg }) => `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%)',
|
|
@ -1,15 +1,29 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { graphql, useStaticQuery } 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 speedIcon from './speed.svg';
|
|
||||||
import responsiveIcon from './responsive.svg';
|
|
||||||
import securityIcon from './security.svg';
|
|
||||||
import intuitiveIcon from './intuitive.svg';
|
|
||||||
|
|
||||||
function MyPriorities() {
|
function MyPriorities() {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const data = useStaticQuery(graphql`
|
||||||
|
{
|
||||||
|
responsivenessIcon: file(base: { eq: "responsiveness.svg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
securityIcon: file(base: { eq: "security.svg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
speedIcon: file(base: { eq: "speed.svg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
intuitivenessIcon: file(base: { eq: "intuitiveness.svg" }) {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Section>
|
<Section>
|
||||||
<Container className={classes.container}>
|
<Container className={classes.container}>
|
||||||
|
@ -20,7 +34,7 @@ function MyPriorities() {
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
<img
|
<img
|
||||||
className={classes.icon}
|
className={classes.icon}
|
||||||
src={responsiveIcon}
|
src={data.responsivenessIcon.publicURL}
|
||||||
alt="Responsiveness"
|
alt="Responsiveness"
|
||||||
/>
|
/>
|
||||||
<Typography variant="h4">Responsiveness</Typography>
|
<Typography variant="h4">Responsiveness</Typography>
|
||||||
|
@ -31,19 +45,27 @@ function MyPriorities() {
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
<img
|
<img
|
||||||
className={classes.icon}
|
className={classes.icon}
|
||||||
src={intuitiveIcon}
|
src={data.intuitivenessIcon.publicURL}
|
||||||
alt="Intuitiveness"
|
alt="Intuitiveness"
|
||||||
/>
|
/>
|
||||||
<Typography variant="h4">Intuitiveness</Typography>
|
<Typography variant="h4">Intuitiveness</Typography>
|
||||||
<Typography>An easy-to-use & user-friendly interface.</Typography>
|
<Typography>An easy-to-use & user-friendly interface.</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
<img className={classes.icon} src={speedIcon} alt="Szybkość" />
|
<img
|
||||||
|
className={classes.icon}
|
||||||
|
src={data.speedIcon.publicURL}
|
||||||
|
alt="Szybkość"
|
||||||
|
/>
|
||||||
<Typography variant="h4">Performance</Typography>
|
<Typography variant="h4">Performance</Typography>
|
||||||
<Typography>Fast load times & lag free interaction.</Typography>
|
<Typography>Fast load times & lag free interaction.</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
<Grid item xs={12} sm={6} md={3}>
|
||||||
<img className={classes.icon} src={securityIcon} alt="Security" />
|
<img
|
||||||
|
className={classes.icon}
|
||||||
|
src={data.securityIcon.publicURL}
|
||||||
|
alt="Security"
|
||||||
|
/>
|
||||||
<Typography variant="h4">Security</Typography>
|
<Typography variant="h4">Security</Typography>
|
||||||
<Typography>
|
<Typography>
|
||||||
I use tried-and-tested tools and techniques that help me keep the
|
I use tried-and-tested tools and techniques that help me keep the
|
||||||
|
|
|
@ -7,27 +7,6 @@ import { Typography, Container, Grid } 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 => ({
|
|
||||||
section: {
|
|
||||||
transform: 'skewY(-7deg)',
|
|
||||||
padding: '8rem 0',
|
|
||||||
margin: '6rem 0',
|
|
||||||
'& > *': {
|
|
||||||
transform: 'skewY(7deg)',
|
|
||||||
},
|
|
||||||
[theme.breakpoints.down('sm')]: {
|
|
||||||
margin: '3rem 0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
gridItem: {
|
|
||||||
[theme.breakpoints.up(750)]: {
|
|
||||||
flexGrow: 0,
|
|
||||||
flexBasis: '50%',
|
|
||||||
maxWidth: '50%',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const SECTION_ID = 'portfolio';
|
export const SECTION_ID = 'portfolio';
|
||||||
|
|
||||||
function Portfolio() {
|
function Portfolio() {
|
||||||
|
@ -35,7 +14,10 @@ function Portfolio() {
|
||||||
const data = useStaticQuery(graphql`
|
const data = useStaticQuery(graphql`
|
||||||
{
|
{
|
||||||
allCoverImages: allFile(
|
allCoverImages: allFile(
|
||||||
filter: { absolutePath: { regex: "/projects/" } }
|
filter: {
|
||||||
|
absolutePath: { regex: "/projects/" }
|
||||||
|
extension: { in: ["png", "jpeg", "jpg"] }
|
||||||
|
}
|
||||||
) {
|
) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
|
@ -90,4 +72,25 @@ function Portfolio() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
section: {
|
||||||
|
transform: 'skewY(-7deg)',
|
||||||
|
padding: '8rem 0',
|
||||||
|
margin: '6rem 0',
|
||||||
|
'& > *': {
|
||||||
|
transform: 'skewY(7deg)',
|
||||||
|
},
|
||||||
|
[theme.breakpoints.down('sm')]: {
|
||||||
|
margin: '3rem 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
gridItem: {
|
||||||
|
[theme.breakpoints.up(750)]: {
|
||||||
|
flexGrow: 0,
|
||||||
|
flexBasis: '50%',
|
||||||
|
maxWidth: '50%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default Portfolio;
|
export default Portfolio;
|
||||||
|
|
|
@ -1,40 +1,28 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import notFound from './not-found.jpg';
|
|
||||||
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
CardMedia,
|
|
||||||
Chip,
|
Chip,
|
||||||
Link,
|
Link,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import BackgroundImage from 'gatsby-background-image';
|
import BackgroundImage from 'gatsby-background-image';
|
||||||
|
|
||||||
function Project({
|
function Project({ title, description, technologies, git, live, fluid }) {
|
||||||
title,
|
|
||||||
description,
|
|
||||||
technologies,
|
|
||||||
github,
|
|
||||||
live,
|
|
||||||
img,
|
|
||||||
fluid,
|
|
||||||
}) {
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return (
|
||||||
<Card className={classes.card}>
|
<Card className={classes.card}>
|
||||||
{fluid ? (
|
{
|
||||||
<BackgroundImage
|
<BackgroundImage
|
||||||
fluid={fluid}
|
fluid={fluid}
|
||||||
title={title}
|
title={title}
|
||||||
className={classes.cover}
|
className={classes.cover}
|
||||||
/>
|
/>
|
||||||
) : (
|
}
|
||||||
<CardMedia image={img} title={title} className={classes.cover} />
|
|
||||||
)}
|
|
||||||
<CardContent className={classes.cardContent}>
|
<CardContent className={classes.cardContent}>
|
||||||
<div className={classes.contentContainer}>
|
<div className={classes.contentContainer}>
|
||||||
<Typography variant="h3" gutterBottom className={classes.title}>
|
<Typography variant="h3" gutterBottom className={classes.title}>
|
||||||
|
@ -51,10 +39,10 @@ function Project({
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.buttons}>
|
<div className={classes.buttons}>
|
||||||
{github && (
|
{git && (
|
||||||
<Link underline="none" href={github}>
|
<Link underline="none" href={git}>
|
||||||
<Button variant="contained" color="secondary">
|
<Button variant="contained" color="secondary">
|
||||||
GitHub
|
Git
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
@ -131,7 +119,6 @@ Project.defaultProps = {
|
||||||
technologies: [],
|
technologies: [],
|
||||||
github: '',
|
github: '',
|
||||||
live: '',
|
live: '',
|
||||||
img: notFound,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Project.propTypes = {
|
Project.propTypes = {
|
||||||
|
@ -140,7 +127,6 @@ Project.propTypes = {
|
||||||
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
|
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||||
github: PropTypes.string.isRequired,
|
github: PropTypes.string.isRequired,
|
||||||
live: PropTypes.string.isRequired,
|
live: PropTypes.string.isRequired,
|
||||||
img: PropTypes.string.isRequired,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Project;
|
export default Project;
|
||||||
|
|
Before Width: | Height: | Size: 66 KiB |
|
@ -1,8 +1,7 @@
|
||||||
const projects = [
|
const projects = [
|
||||||
{
|
{
|
||||||
title: 'TWHelp',
|
title: 'TWHelp',
|
||||||
description:
|
description: 'Various tools for the browser-based game Tribal Wars.',
|
||||||
'A website with various stats and tools, scripts, a public GraphQL API and a Discord bot for the browser-based game Tribal Wars.',
|
|
||||||
technologies: [
|
technologies: [
|
||||||
'GraphQL',
|
'GraphQL',
|
||||||
'Golang',
|
'Golang',
|
||||||
|
@ -22,13 +21,13 @@ const projects = [
|
||||||
'Docker',
|
'Docker',
|
||||||
'Traefik',
|
'Traefik',
|
||||||
],
|
],
|
||||||
github: 'https://github.com/tribalwarshelp',
|
git: 'https://gitea.dwysokinski.me/twhelp',
|
||||||
fluid: 'projects/twhelp.png',
|
fluid: 'projects/twhelp.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Zdam Egzamin Zawodowy',
|
title: 'Zdam Egzamin Zawodowy',
|
||||||
description:
|
description:
|
||||||
'A mobile and web app for practising the theoretical part of the vocational exam.',
|
'Mobile & web app for practising the theoretical part of the vocational exam.',
|
||||||
technologies: [
|
technologies: [
|
||||||
'GraphQL',
|
'GraphQL',
|
||||||
'Golang',
|
'Golang',
|
||||||
|
@ -46,51 +45,16 @@ const projects = [
|
||||||
],
|
],
|
||||||
fluid: 'projects/zdam.png',
|
fluid: 'projects/zdam.png',
|
||||||
live: 'https://zdamegzaminzawodowy.pl/',
|
live: 'https://zdamegzaminzawodowy.pl/',
|
||||||
github: 'https://github.com/zdam-egzamin-zawodowy',
|
git: 'https://github.com/zdam-egzamin-zawodowy',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
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',
|
git: 'https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me',
|
||||||
live: 'https://dwysokinski.me',
|
live: 'https://dwysokinski.me',
|
||||||
fluid: 'projects/dw.png',
|
fluid: 'projects/dw.png',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'OLX Crawler',
|
|
||||||
description: 'An app written in Go to observe olx.pl ads.',
|
|
||||||
technologies: [
|
|
||||||
'Golang',
|
|
||||||
'Colly',
|
|
||||||
'SQLite3',
|
|
||||||
'Echo',
|
|
||||||
'React',
|
|
||||||
'Material-UI',
|
|
||||||
],
|
|
||||||
fluid: 'projects/olx.png',
|
|
||||||
github: 'https://github.com/Kichiyaki/olx-crawler',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Instaling.pl Bot',
|
|
||||||
description: 'A bot that solves the instaling.pl vocabulary tests for you.',
|
|
||||||
technologies: ['Golang', 'Lorca'],
|
|
||||||
fluid: 'projects/instaling.png',
|
|
||||||
github: 'https://github.com/Kichiyaki/Instaling-Bot',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Margonem Mini Bot',
|
|
||||||
description: 'A bot for the mobile client of the 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: 'Freshline',
|
title: 'Freshline',
|
||||||
description: '',
|
description: '',
|
||||||
|
|
|
@ -10,7 +10,12 @@ 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/" }
|
||||||
|
extension: { in: ["png", "jpeg", "jpg"] }
|
||||||
|
}
|
||||||
|
) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
relativePath
|
relativePath
|
||||||
|
@ -30,10 +35,7 @@ function Technologies() {
|
||||||
const edge = data.allIcons.edges.find(
|
const edge = data.allIcons.edges.find(
|
||||||
img => img.node.relativePath === path
|
img => img.node.relativePath === path
|
||||||
);
|
);
|
||||||
if (edge) {
|
return edge?.node?.childImageSharp?.fixed ?? {};
|
||||||
return edge.node.childImageSharp.fixed;
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -45,18 +47,7 @@ function Technologies() {
|
||||||
<div className={classes.grid}>
|
<div className={classes.grid}>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology fixed={findIcon('technologies/go.png')} name="Go" />
|
||||||
fixed={findIcon('technologies/html5.png')}
|
|
||||||
name="HTML"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology fixed={findIcon('technologies/css.png')} name="CSS" />
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
|
@ -75,58 +66,50 @@ function Technologies() {
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology
|
||||||
fixed={findIcon('technologies/react.png')}
|
fixed={findIcon('technologies/node.png')}
|
||||||
name="React"
|
name="Node.js"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/gatsby.png')}
|
|
||||||
name="Gatsby"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/nextjs.png')}
|
|
||||||
name="Next.JS"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/express.png')}
|
|
||||||
name="Express"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology
|
||||||
fixed={findIcon('technologies/nest.png')}
|
fixed={findIcon('technologies/nest.png')}
|
||||||
name="Nest.JS"
|
name="NestJS"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology
|
||||||
fixed={findIcon('technologies/strapi.png')}
|
fixed={findIcon('technologies/react.png')}
|
||||||
name="Strapi"
|
name="React"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/ghost.png')}
|
|
||||||
name="Ghost"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/postgresql.png')}
|
||||||
|
name="PostgreSQL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/redis.png')}
|
||||||
|
name="Redis"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/rmq.png')}
|
||||||
|
name="RabbitMQ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology fixed={findIcon('technologies/git.png')} name="Git" />
|
||||||
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology
|
||||||
|
@ -137,29 +120,8 @@ function Technologies() {
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
<div>
|
<div>
|
||||||
<Technology
|
<Technology
|
||||||
fixed={findIcon('technologies/golang.png')}
|
fixed={findIcon('technologies/kubernetes.png')}
|
||||||
name="Golang"
|
name="Kubernetes"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/gqlgen.png')}
|
|
||||||
name="gqlgen"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/golang.png')}
|
|
||||||
name="Gin"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.hide} />
|
|
||||||
<div>
|
|
||||||
<Technology
|
|
||||||
fixed={findIcon('technologies/postgresql.png')}
|
|
||||||
name="PostgreSQL"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.hide} />
|
<div className={classes.hide} />
|
||||||
|
@ -169,6 +131,49 @@ function Technologies() {
|
||||||
name="Docker"
|
name="Docker"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/terraform.png')}
|
||||||
|
name="Terraform"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/ansible.png')}
|
||||||
|
name="Ansible"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/prometheus.png')}
|
||||||
|
name="Prometheus"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/grafana.jpg')}
|
||||||
|
name="Grafana"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/jaeger.png')}
|
||||||
|
name="Jaeger"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classes.hide} />
|
||||||
|
<div>
|
||||||
|
<Technology
|
||||||
|
fixed={findIcon('technologies/sentry.png')}
|
||||||
|
name="Sentry"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
|
@ -4,6 +4,16 @@ 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';
|
||||||
|
|
||||||
|
function Technology({ fixed, name }) {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<Paper className={classes.paper}>
|
||||||
|
<Image className={classes.image} fixed={fixed} />
|
||||||
|
<Typography variant="body2">{name}</Typography>
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
paper: {
|
paper: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -18,14 +28,4 @@ const useStyles = makeStyles(theme => ({
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function Technology({ fixed, name }) {
|
|
||||||
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;
|
||||||
|
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 360 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 238 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 163 KiB |
Before Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 706 B |
Before Width: | Height: | Size: 281 KiB |
After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
@ -1,18 +0,0 @@
|
||||||
import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
|
|
||||||
|
|
||||||
const useSmoothScroll = () => {
|
|
||||||
return id => e => {
|
|
||||||
if (!isSmoothScrollSupported()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
document.querySelector('#' + id).scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'start',
|
|
||||||
inline: 'nearest',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useSmoothScroll;
|
|
|
@ -6,19 +6,6 @@ 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(() => ({
|
|
||||||
container: {
|
|
||||||
minHeight: '100vh',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
padding: '0',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const NotFoundPage = ({ location }) => {
|
const NotFoundPage = ({ location }) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
|
@ -47,4 +34,17 @@ const NotFoundPage = ({ location }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles(() => ({
|
||||||
|
container: {
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
padding: '0',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default NotFoundPage;
|
export default NotFoundPage;
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
const isSmoothScrollSupported = () =>
|
|
||||||
'scrollBehavior' in document.documentElement.style;
|
|
||||||
|
|
||||||
export default isSmoothScrollSupported;
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
const isSmoothScrollSupported = () =>
|
||||||
|
'scrollBehavior' in document.documentElement.style;
|
||||||
|
|
||||||
|
const smoothScroll = id => e => {
|
||||||
|
if (!isSmoothScrollSupported()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector('#' + id).scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start',
|
||||||
|
inline: 'nearest',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default smoothScroll;
|
11
yarn.lock
|
@ -1646,15 +1646,6 @@
|
||||||
"@babel/runtime" "^7.7.2"
|
"@babel/runtime" "^7.7.2"
|
||||||
regenerator-runtime "^0.13.3"
|
regenerator-runtime "^0.13.3"
|
||||||
|
|
||||||
"@kichiyaki/gatsby-plugin-plausible@^0.0.8":
|
|
||||||
version "0.0.8"
|
|
||||||
resolved "https://registry.yarnpkg.com/@kichiyaki/gatsby-plugin-plausible/-/gatsby-plugin-plausible-0.0.8.tgz#94f53c5a8f768b934228e4f43c5493c38885152b"
|
|
||||||
integrity sha512-DO03Z6NHRiwh8XHJtBJcLxMZ1a8cDjYM0inuGmNI33ea7fV4wdGVF5uHidlbdlls2hLfYPDkjOc0y2Yz3Ff/nw==
|
|
||||||
dependencies:
|
|
||||||
"@babel/runtime" "^7.9.2"
|
|
||||||
minimatch "3.0.4"
|
|
||||||
react "^17.0.2"
|
|
||||||
|
|
||||||
"@kichiyaki/roboto@^1.0.0":
|
"@kichiyaki/roboto@^1.0.0":
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@kichiyaki/roboto/-/roboto-1.0.0.tgz#6f5dfb40e2423940588946c952490b123ca8088b"
|
resolved "https://registry.yarnpkg.com/@kichiyaki/roboto/-/roboto-1.0.0.tgz#6f5dfb40e2423940588946c952490b123ca8088b"
|
||||||
|
@ -10278,7 +10269,7 @@ react-transition-group@^4.4.0:
|
||||||
loose-envify "^1.4.0"
|
loose-envify "^1.4.0"
|
||||||
prop-types "^15.6.2"
|
prop-types "^15.6.2"
|
||||||
|
|
||||||
react@^17.0.1, react@^17.0.2:
|
react@^17.0.1:
|
||||||
version "17.0.2"
|
version "17.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
||||||
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
|
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
|
||||||
|
|