refactor (#1)

Reviewed-on: #1

.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
         }

Dockerfile

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

README.md

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

gatsby-config.js

@@ -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,
-      },
-    },
   ],
 };

jsconfig.json

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

package.json

@@ -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"
   }
 }

src/components/Layout/Navbar.js

@@ -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),
       },
     },
   },

src/components/Section.js

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

src/components/Seo.js

@@ -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`,

src/config/routing.js

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

src/features/IndexPage/IndexPage.js

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

src/features/IndexPage/components/Header/Header.js

@@ -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%)',

src/features/IndexPage/components/MyPriorities/MyPriorities.js

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

src/features/IndexPage/components/Portfolio/Portfolio.js

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

src/features/IndexPage/components/Portfolio/Project.js

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

src/features/IndexPage/components/Portfolio/projects.js

@@ -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: '',

src/features/IndexPage/components/Technologies/Technologies.js

@@ -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,31 +47,34 @@ function Technologies() {
         <div className={classes.grid}>
           <div className={classes.hide} />
           <div>
-            <Technology
-              fixed={findIcon('technologies/html5.png')}
-              name="HTML"
-            />
+            <Technology fixed={findIcon('technologies/go.png')} name="Go" />
           </div>
           <div className={classes.hide} />
           <div>
-            <Technology fixed={findIcon('technologies/css.png')} name="CSS" />
+            <Technology
+              fixed={findIcon('technologies/js.png')}
+              name="JavaScript"
+            />
           </div>
           <div className={classes.hide} />
           <div>
-            <Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
+            <Technology
+              fixed={findIcon('technologies/typescript.png')}
+              name="TypeScript"
+            />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/js.png')}
-              name="JavaScript"
+              fixed={findIcon('technologies/node.png')}
+              name="Node.js"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/typescript.png')}
-              name="TypeScript"
+              fixed={findIcon('technologies/nest.png')}
+              name="NestJS"
             />
           </div>
           <div className={classes.hide} />
@@ -79,94 +84,94 @@ function Technologies() {
               name="React"
             />
           </div>
-
           <div className={classes.hide} />
+
           <div>
             <Technology
-              fixed={findIcon('technologies/gatsby.png')}
-              name="Gatsby"
+              fixed={findIcon('technologies/postgresql.png')}
+              name="PostgreSQL"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/nextjs.png')}
-              name="Next.JS"
+              fixed={findIcon('technologies/redis.png')}
+              name="Redis"
             />
           </div>
           <div className={classes.hide} />
           <div>
-            <Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
+            <Technology
+              fixed={findIcon('technologies/rmq.png')}
+              name="RabbitMQ"
+            />
           </div>
           <div className={classes.hide} />
           <div>
-            <Technology
-              fixed={findIcon('technologies/express.png')}
-              name="Express"
-            />
+            <Technology fixed={findIcon('technologies/git.png')} name="Git" />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/nest.png')}
-              name="Nest.JS"
+              fixed={findIcon('technologies/graphql.png')}
+              name="GraphQL"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/strapi.png')}
-              name="Strapi"
+              fixed={findIcon('technologies/kubernetes.png')}
+              name="Kubernetes"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/ghost.png')}
-              name="Ghost"
+              fixed={findIcon('technologies/docker.png')}
+              name="Docker"
             />
           </div>
 
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/graphql.png')}
-              name="GraphQL"
+              fixed={findIcon('technologies/terraform.png')}
+              name="Terraform"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/golang.png')}
-              name="Golang"
+              fixed={findIcon('technologies/ansible.png')}
+              name="Ansible"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/gqlgen.png')}
-              name="gqlgen"
+              fixed={findIcon('technologies/prometheus.png')}
+              name="Prometheus"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/golang.png')}
-              name="Gin"
+              fixed={findIcon('technologies/grafana.jpg')}
+              name="Grafana"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/postgresql.png')}
-              name="PostgreSQL"
+              fixed={findIcon('technologies/jaeger.png')}
+              name="Jaeger"
             />
           </div>
           <div className={classes.hide} />
           <div>
             <Technology
-              fixed={findIcon('technologies/docker.png')}
-              name="Docker"
+              fixed={findIcon('technologies/sentry.png')}
+              name="Sentry"
             />
           </div>
         </div>

src/features/IndexPage/components/Technologies/Technology.js

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

src/libs/useSmoothScroll.js

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

src/pages/404.js

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

src/utils/isSmoothScrollSupported.js

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

src/utils/smoothScroll.js

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

yarn.lock

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