7
.babelrc
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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 \
|
||||
|
|
18
README.md
|
@ -1,23 +1,5 @@
|
|||
# dwysokinski.me
|
||||
|
||||
|
||||

|
||||
|
||||
## 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.
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
"@config/*": ["src/config/*"],
|
||||
"@features/*": ["src/features/*"],
|
||||
"@images/*": ["src/images/*"],
|
||||
"@libs/*": ["src/libs/*"],
|
||||
"@utils/*": ["src/utils/*"]
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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`,
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
export const Route = {
|
||||
IndexPage: '/',
|
||||
}
|
||||
export const ROUTE = {
|
||||
INDEX_PAGE: '/',
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%)',
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Before Width: | Height: | Size: 66 KiB |
|
@ -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: '',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
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 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(() =>< |