refactor (#1)

Reviewed-on: #1
This commit is contained in:
Dawid Wysokiński 2022-09-11 07:31:16 +00:00
parent 4d80f38e36
commit 9b19330df9
60 changed files with 270 additions and 324 deletions

View File

@ -10,7 +10,6 @@
"@config": "./src/config",
"@features": "./src/features",
"@images": "./src/images",
"@libs": "./src/libs",
"@utils": "./src/utils"
}
}
@ -19,32 +18,26 @@
"babel-plugin-transform-imports",
{
"@material-ui/core": {
// Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
"transform": "@material-ui/core/${member}",
"preventFullImport": true
},
"@material-ui/lab": {
// Use "transform: '@material-ui/lab/${member}'," if your bundler does not support ES modules
"transform": "@material-ui/lab/${member}",
"preventFullImport": true
},
"@material-ui/icons": {
// Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
"transform": "@material-ui/icons/${member}",
"preventFullImport": true
},
"lodash": {
// Use "transform: 'lodash/${member}'," if your bundler does not support ES modules
"transform": "lodash/${member}",
"preventFullImport": true
},
"date-fns": {
// Use "transform: 'date-fns/${member}'," if your bundler does not support ES modules
"transform": "date-fns/${member}",
"preventFullImport": true
},
"validator": {
// Use "transform: 'validator/${member}'," if your bundler does not support ES modules
"transform": "validator/lib/${member}",
"preventFullImport": true
}

View File

@ -1,9 +1,6 @@
FROM node:14.19.2-alpine as build-deps
ARG PLAUSIBLE_CUSTOM_DOMAIN=""
ENV PLAUSIBLE_CUSTOM_DOMAIN=$PLAUSIBLE_CUSTOM_DOMAIN \
NODE_ENV=production
ENV NODE_ENV=production
RUN apk --no-cache add shadow \
gcc \

View File

@ -1,23 +1,5 @@
# dwysokinski.me
![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
Distributed under the MIT License. See ``LICENSE`` for more information.

View File

@ -5,7 +5,6 @@ module.exports = {
siteMetadata: {
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`,
authorTwitter: `@Dawid56143781`,
authorFullName: 'Dawid Wysokiński',
siteUrl: SITE_URL,
email: 'contact@dwysokinski.me',
@ -66,12 +65,5 @@ module.exports = {
},
},
},
{
resolve: `@kichiyaki/gatsby-plugin-plausible`,
options: {
domain: DOMAIN,
customDomain: process.env.PLAUSIBLE_CUSTOM_DOMAIN,
},
},
],
};

View File

@ -7,7 +7,6 @@
"@config/*": ["src/config/*"],
"@features/*": ["src/features/*"],
"@images/*": ["src/images/*"],
"@libs/*": ["src/libs/*"],
"@utils/*": ["src/utils/*"]
}
},

View File

@ -3,9 +3,8 @@
"private": true,
"description": "Personal website",
"version": "0.1.0",
"author": "Dawid Wysokiński <xyztojajestem@gmail.com>",
"author": "Dawid Wysokiński <contact@dwysokinski.me>",
"dependencies": {
"@kichiyaki/gatsby-plugin-plausible": "^0.0.8",
"@kichiyaki/roboto": "^1.0.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
@ -47,9 +46,9 @@
},
"repository": {
"type": "git",
"url": "https://github.com/Kichiyaki/dwysokinski.me"
"url": "https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me"
},
"bugs": {
"url": "https://github.com/Kichiyaki/dwysokinski.me/issues"
"url": "https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me/issues"
}
}

View File

@ -1,9 +1,9 @@
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import classnames from 'classnames';
import { Route } from '@config/routing';
import useSmoothScroll from '@libs/useSmoothScroll';
import logo from '@images/logo.svg';
import { HEADER_ID } from '@features/IndexPage/components/Header';
import { ROUTE } from '@config/routing';
import smoothScroll from '@utils/smoothScroll';
import { HEADER_ID } from '@features/IndexPage/components/Header/Header';
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';
@ -13,7 +13,13 @@ import { Link as GatsbyLink } from 'gatsby-theme-material-ui';
function Navbar({ className, ...rest }) {
const classes = useStyles();
const handleClickLink = useSmoothScroll();
const data = useStaticQuery(graphql`
{
logo: file(base: { eq: "logo.svg" }) {
publicURL
}
}
`);
return (
<AppBar
@ -25,8 +31,16 @@ function Navbar({ className, ...rest }) {
<Container>
<Toolbar className={classes.toolbar} disableGutters>
<div className={classes.titleContainer}>
<GatsbyLink title="Strona główna" color="inherit" to={Route.IndexPage}>
<img className={classes.logo} src={logo} alt="logo" />
<GatsbyLink
title="Strona główna"
color="inherit"
to={ROUTE.INDEX_PAGE}
>
<img
className={classes.logo}
src={data.logo.publicURL}
alt="logo"
/>
</GatsbyLink>
</div>
<div className={classes.divider} />
@ -35,7 +49,7 @@ function Navbar({ className, ...rest }) {
title="Start"
color="inherit"
href={'#' + HEADER_ID}
onClick={handleClickLink(HEADER_ID)}
onClick={smoothScroll(HEADER_ID)}
>
Start
</Link>
@ -43,7 +57,7 @@ function Navbar({ className, ...rest }) {
title="Portfolio"
color="inherit"
href={'#' + PORTFOLIO_SECTION_ID}
onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
onClick={smoothScroll(PORTFOLIO_SECTION_ID)}
>
Portfolio
</Link>
@ -51,7 +65,7 @@ function Navbar({ className, ...rest }) {
title="Contact"
color="inherit"
href={'#' + CONTACT_SECTION_ID}
onClick={handleClickLink(CONTACT_SECTION_ID)}
onClick={smoothScroll(CONTACT_SECTION_ID)}
>
Contact
</Link>
@ -70,11 +84,11 @@ const useStyles = makeStyles(theme => ({
},
linkContainer: {
'& > *:not(:last-child)': {
marginRight: theme.spacing(1.5),
marginRight: theme.spacing(2),
},
[theme.breakpoints.down('xs')]: {
'& > *:not(:last-child)': {
marginRight: theme.spacing(0.75),
marginRight: theme.spacing(1),
},
},
},

View File

@ -4,25 +4,6 @@ import classnames from 'classnames';
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 = {
TRANSPARENT: 'transparent',
BLACK: 'black',
@ -61,4 +42,23 @@ Section.propTypes = {
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;

View File

@ -2,20 +2,21 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
import ogThumbnail from '@images/og_thumbnail.png';
function Seo({ description, lang, meta, title, pathname }) {
const { site } = useStaticQuery(
const { site, thumbnail } = useStaticQuery(
graphql`
query {
{
site {
siteMetadata {
title
description
siteUrl
authorTwitter
}
}
thumbnail: file(base: { eq: "thumbnail.png" }) {
publicURL
}
}
`
);
@ -52,7 +53,7 @@ function Seo({ description, lang, meta, title, pathname }) {
},
{
property: `og:image`,
content: `${site.siteMetadata.siteUrl}${ogThumbnail}`,
content: `${site.siteMetadata.siteUrl}${thumbnail.publicURL}`,
},
{
property: `og:image:width`,
@ -70,10 +71,6 @@ function Seo({ description, lang, meta, title, pathname }) {
property: `og:locale`,
content: `en`,
},
{
name: `twitter:creator`,
content: site.siteMetadata.authorTwitter,
},
{
name: `twitter:card`,
content: `summary_large_image`,
@ -92,7 +89,7 @@ function Seo({ description, lang, meta, title, pathname }) {
},
{
name: `twitter:image`,
content: `${site.siteMetadata.siteUrl}${ogThumbnail}`,
content: `${site.siteMetadata.siteUrl}${thumbnail.publicURL}`,
},
{
name: `twitter:image:alt`,

View File

@ -1,3 +1,3 @@
export const Route = {
IndexPage: '/',
}
export const ROUTE = {
INDEX_PAGE: '/',
};

View File

@ -4,18 +4,12 @@ import { makeStyles } from '@material-ui/core/styles';
import { Divider } from '@material-ui/core';
import Layout from '@components/Layout/Layout';
import Seo from '@components/Seo';
import Header from './components/Header';
import Header from './components/Header/Header';
import MyPriorities from './components/MyPriorities/MyPriorities';
import Technologies from './components/Technologies/Technologies';
import Portfolio from './components/Portfolio/Portfolio';
import Contact from './components/Contact';
const useStyles = makeStyles(theme => ({
layout: {
padding: 0,
},
}));
const IndexPage = ({ location }) => {
const classes = useStyles();
return (
@ -32,4 +26,10 @@ const IndexPage = ({ location }) => {
);
};
const useStyles = makeStyles(theme => ({
layout: {
padding: 0,
},
}));
export default IndexPage;

View File

@ -1,16 +1,23 @@
import React from 'react';
import useSmoothScroll from '@libs/useSmoothScroll';
import { SECTION_ID } from './Contact';
import { graphql, useStaticQuery } from 'gatsby';
import smoothScroll from '@utils/smoothScroll';
import { SECTION_ID } from '../Contact';
import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Button, Link } from '@material-ui/core';
import bg from './header-bg.jpg';
export const HEADER_ID = 'start';
function Header() {
const classes = useStyles();
const handleLinkClick = useSmoothScroll();
const data = useStaticQuery(graphql`
{
bg: file(base: { eq: "header-bg.jpg" }) {
publicURL
}
}
`);
const classes = useStyles({ bg: data.bg.publicURL });
return (
<header id={HEADER_ID} className={classes.header}>
<Container className={classes.container}>
@ -20,7 +27,7 @@ function Header() {
Full Stack Web Developer
</Typography>
<Typography variant="h3">
I create websites and web apps.
I develop websites and web apps.
</Typography>
<Typography gutterBottom variant="h3">
Do you have an idea, project or problem you would like to discuss?
@ -29,7 +36,7 @@ function Header() {
<Link
underline="none"
to={'#' + SECTION_ID}
onClick={handleLinkClick(SECTION_ID)}
onClick={smoothScroll(SECTION_ID)}
>
<Button variant="outlined" size="large">
<Typography variant="h4">Get in touch</Typography>
@ -44,7 +51,7 @@ function Header() {
const useStyles = makeStyles(theme => ({
header: {
minHeight: '100vh',
backgroundImage: `url(${bg})`,
backgroundImage: ({ bg }) => `url(${bg})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
clipPath: 'polygon(0 0,100% 0,100% 80vh,0 100%)',

View File

@ -1,15 +1,29 @@
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Grid } from '@material-ui/core';
import Section from '@components/Section';
import speedIcon from './speed.svg';
import responsiveIcon from './responsive.svg';
import securityIcon from './security.svg';
import intuitiveIcon from './intuitive.svg';
function MyPriorities() {
const classes = useStyles();
const 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 (
<Section>
<Container className={classes.container}>
@ -20,7 +34,7 @@ function MyPriorities() {
<Grid item xs={12} sm={6} md={3}>
<img
className={classes.icon}
src={responsiveIcon}
src={data.responsivenessIcon.publicURL}
alt="Responsiveness"
/>
<Typography variant="h4">Responsiveness</Typography>
@ -31,19 +45,27 @@ function MyPriorities() {
<Grid item xs={12} sm={6} md={3}>
<img
className={classes.icon}
src={intuitiveIcon}
src={data.intuitivenessIcon.publicURL}
alt="Intuitiveness"
/>
<Typography variant="h4">Intuitiveness</Typography>
<Typography>An easy-to-use & user-friendly interface.</Typography>
</Grid>
<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>Fast load times & lag free interaction.</Typography>
</Grid>
<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>
I use tried-and-tested tools and techniques that help me keep the

View File

@ -7,27 +7,6 @@ import { Typography, Container, Grid } from '@material-ui/core';
import Section, { BG_COLOR } from '@components/Section';
import Project from './Project';
const useStyles = makeStyles(theme => ({
section: {
transform: 'skewY(-7deg)',
padding: '8rem 0',
margin: '6rem 0',
'& > *': {
transform: 'skewY(7deg)',
},
[theme.breakpoints.down('sm')]: {
margin: '3rem 0',
},
},
gridItem: {
[theme.breakpoints.up(750)]: {
flexGrow: 0,
flexBasis: '50%',
maxWidth: '50%',
},
},
}));
export const SECTION_ID = 'portfolio';
function Portfolio() {
@ -35,7 +14,10 @@ function Portfolio() {
const data = useStaticQuery(graphql`
{
allCoverImages: allFile(
filter: { absolutePath: { regex: "/projects/" } }
filter: {
absolutePath: { regex: "/projects/" }
extension: { in: ["png", "jpeg", "jpg"] }
}
) {
edges {
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;

View File

@ -1,40 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import notFound from './not-found.jpg';
import { makeStyles } from '@material-ui/core/styles';
import {
Button,
Card,
CardContent,
CardMedia,
Chip,
Link,
Typography,
} from '@material-ui/core';
import BackgroundImage from 'gatsby-background-image';
function Project({
title,
description,
technologies,
github,
live,
img,
fluid,
}) {
function Project({ title, description, technologies, git, live, fluid }) {
const classes = useStyles();
return (
<Card className={classes.card}>
{fluid ? (
{
<BackgroundImage
fluid={fluid}
title={title}
className={classes.cover}
/>
) : (
<CardMedia image={img} title={title} className={classes.cover} />
)}
}
<CardContent className={classes.cardContent}>
<div className={classes.contentContainer}>
<Typography variant="h3" gutterBottom className={classes.title}>
@ -51,10 +39,10 @@ function Project({
})}
</div>
<div className={classes.buttons}>
{github && (
<Link underline="none" href={github}>
{git && (
<Link underline="none" href={git}>
<Button variant="contained" color="secondary">
GitHub
Git
</Button>
</Link>
)}
@ -131,7 +119,6 @@ Project.defaultProps = {
technologies: [],
github: '',
live: '',
img: notFound,
};
Project.propTypes = {
@ -140,7 +127,6 @@ Project.propTypes = {
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
github: PropTypes.string.isRequired,
live: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
};
export default Project;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

View File

@ -1,8 +1,7 @@
const projects = [
{
title: 'TWHelp',
description:
'A website with various stats and tools, scripts, a public GraphQL API and a Discord bot for the browser-based game Tribal Wars.',
description: 'Various tools for the browser-based game Tribal Wars.',
technologies: [
'GraphQL',
'Golang',
@ -22,13 +21,13 @@ const projects = [
'Docker',
'Traefik',
],
github: 'https://github.com/tribalwarshelp',
git: 'https://gitea.dwysokinski.me/twhelp',
fluid: 'projects/twhelp.png',
},
{
title: 'Zdam Egzamin Zawodowy',
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: [
'GraphQL',
'Golang',
@ -46,51 +45,16 @@ const projects = [
],
fluid: 'projects/zdam.png',
live: 'https://zdamegzaminzawodowy.pl/',
github: 'https://github.com/zdam-egzamin-zawodowy',
git: 'https://github.com/zdam-egzamin-zawodowy',
},
{
title: 'dwysokinski.me',
description: '',
technologies: ['React', 'Gatsby', 'Material-UI'],
github: 'https://github.com/Kichiyaki/dwysokinski.me',
git: 'https://gitea.dwysokinski.me/Kichiyaki/dwysokinski.me',
live: 'https://dwysokinski.me',
fluid: 'projects/dw.png',
},
{
title: 'OLX Crawler',
description: 'An app written in Go to observe olx.pl ads.',
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',
description: '',

View File

@ -10,7 +10,12 @@ function Technologies() {
const classes = useStyles();
const data = useStaticQuery(graphql`
{
allIcons: allFile(filter: { absolutePath: { regex: "/technologies/" } }) {
allIcons: allFile(
filter: {
absolutePath: { regex: "/technologies/" }
extension: { in: ["png", "jpeg", "jpg"] }
}
) {
edges {
node {
relativePath
@ -30,10 +35,7 @@ function Technologies() {
const edge = data.allIcons.edges.find(
img => img.node.relativePath === path
);
if (edge) {
return edge.node.childImageSharp.fixed;
}
return {};
return edge?.node?.childImageSharp?.fixed ?? {};
};
return (
@ -45,18 +47,7 @@ function Technologies() {
<div className={classes.grid}>
<div className={classes.hide} />
<div>
<Technology
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" />
<Technology fixed={findIcon('technologies/go.png')} name="Go" />
</div>
<div className={classes.hide} />
<div>
@ -75,58 +66,50 @@ function Technologies() {
<div className={classes.hide} />
<div>
<Technology
fixed={findIcon('technologies/react.png')}
name="React"
/>
</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"
fixed={findIcon('technologies/node.png')}
name="Node.js"
/>
</div>
<div className={classes.hide} />
<div>
<Technology
fixed={findIcon('technologies/nest.png')}
name="Nest.JS"
name="NestJS"
/>
</div>
<div className={classes.hide} />
<div>
<Technology
fixed={findIcon('technologies/strapi.png')}
name="Strapi"
fixed={findIcon('technologies/react.png')}
name="React"
/>
</div>
<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>
<Technology
@ -137,29 +120,8 @@ function Technologies() {
<div className={classes.hide} />
<div>
<Technology
fixed={findIcon('technologies/golang.png')}
name="Golang"
/>
</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"
fixed={findIcon('technologies/kubernetes.png')}
name="Kubernetes"
/>
</div>
<div className={classes.hide} />
@ -169,6 +131,49 @@ function Technologies() {
name="Docker"
/>
</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>
</Container>
</Section>

View File

@ -4,6 +4,16 @@ import { makeStyles } from '@material-ui/core/styles';
import { Typography, Paper } from '@material-ui/core';
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 => ({
paper: {
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;

View File

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 120 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 706 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

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

View File

@ -6,19 +6,6 @@ import { Link } from 'gatsby-theme-material-ui';
import Layout from '@components/Layout/Layout';
import Seo from '@components/Seo';
const useStyles = makeStyles(() => ({
container: {
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'center',
},
layout: {
padding: '0',
},
}));
const NotFoundPage = ({ location }) => {
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;

View File

@ -1,4 +0,0 @@
const isSmoothScrollSupported = () =>
'scrollBehavior' in document.documentElement.style;
export default isSmoothScrollSupported;

17
src/utils/smoothScroll.js Normal file
View File

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

View File

@ -1646,15 +1646,6 @@
"@babel/runtime" "^7.7.2"
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":
version "1.0.0"
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"
prop-types "^15.6.2"
react@^17.0.1, react@^17.0.2:
react@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==