diff --git a/src/components/Layout/Navbar.js b/src/components/Layout/Navbar.js index 75c90db..e0b1cc8 100644 --- a/src/components/Layout/Navbar.js +++ b/src/components/Layout/Navbar.js @@ -1,8 +1,8 @@ import React from 'react'; +import { graphql, useStaticQuery } from 'gatsby'; import classnames from 'classnames'; import { ROUTE } from '@config/routing'; import smoothScroll from '@utils/smoothScroll'; -import logo from '@images/logo.svg'; 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,6 +13,13 @@ import { Link as GatsbyLink } from 'gatsby-theme-material-ui'; function Navbar({ className, ...rest }) { const classes = useStyles(); + const data = useStaticQuery(graphql` + { + logo: file(base: { eq: "logo.svg" }) { + publicURL + } + } + `); return ( - logo + logo
diff --git a/src/features/IndexPage/components/Header/Header.js b/src/features/IndexPage/components/Header/Header.js index a9e415c..a6c371c 100644 --- a/src/features/IndexPage/components/Header/Header.js +++ b/src/features/IndexPage/components/Header/Header.js @@ -1,15 +1,22 @@ import React from 'react'; +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 data = useStaticQuery(graphql` + { + bg: file(base: { eq: "header-bg.jpg" }) { + publicURL + } + } + `); + const classes = useStyles({ bg: data.bg.publicURL }); return (
@@ -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%)', diff --git a/src/features/IndexPage/components/MyPriorities/MyPriorities.js b/src/features/IndexPage/components/MyPriorities/MyPriorities.js index e7392f7..8197bc1 100644 --- a/src/features/IndexPage/components/MyPriorities/MyPriorities.js +++ b/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 (
@@ -20,7 +34,7 @@ function MyPriorities() { Responsiveness Responsiveness @@ -31,19 +45,27 @@ function MyPriorities() { Intuitiveness Intuitiveness An easy-to-use & user-friendly interface. - Szybkość + Szybkość Performance Fast load times & lag free interaction. - Security + Security Security I use tried-and-tested tools and techniques that help me keep the diff --git a/src/features/IndexPage/components/Portfolio/Portfolio.js b/src/features/IndexPage/components/Portfolio/Portfolio.js index 0aab72d..ec7eafb 100644 --- a/src/features/IndexPage/components/Portfolio/Portfolio.js +++ b/src/features/IndexPage/components/Portfolio/Portfolio.js @@ -14,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 { diff --git a/src/features/IndexPage/components/Portfolio/Project.js b/src/features/IndexPage/components/Portfolio/Project.js index 41158cd..d1a2f74 100644 --- a/src/features/IndexPage/components/Portfolio/Project.js +++ b/src/features/IndexPage/components/Portfolio/Project.js @@ -1,32 +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, git, live, img, fluid }) { +function Project({ title, description, technologies, git, live, fluid }) { const classes = useStyles(); return ( - {fluid ? ( + { - ) : ( - - )} + }
@@ -123,7 +119,6 @@ Project.defaultProps = { technologies: [], github: '', live: '', - img: notFound, }; Project.propTypes = { @@ -132,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; diff --git a/src/features/IndexPage/components/Portfolio/not-found.jpg b/src/features/IndexPage/components/Portfolio/not-found.jpg deleted file mode 100644 index ff9e0e2..0000000 Binary files a/src/features/IndexPage/components/Portfolio/not-found.jpg and /dev/null differ diff --git a/src/features/IndexPage/components/Technologies/Technologies.js b/src/features/IndexPage/components/Technologies/Technologies.js index 2de908a..71023a5 100644 --- a/src/features/IndexPage/components/Technologies/Technologies.js +++ b/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 ( diff --git a/src/features/IndexPage/components/Header/header-bg.jpg b/src/images/header-bg.jpg similarity index 100% rename from src/features/IndexPage/components/Header/header-bg.jpg rename to src/images/header-bg.jpg diff --git a/src/features/IndexPage/components/MyPriorities/intuitive.svg b/src/images/intuitiveness.svg similarity index 100% rename from src/features/IndexPage/components/MyPriorities/intuitive.svg rename to src/images/intuitiveness.svg diff --git a/src/features/IndexPage/components/MyPriorities/responsive.svg b/src/images/responsiveness.svg similarity index 100% rename from src/features/IndexPage/components/MyPriorities/responsive.svg rename to src/images/responsiveness.svg diff --git a/src/features/IndexPage/components/MyPriorities/security.svg b/src/images/security.svg similarity index 100% rename from src/features/IndexPage/components/MyPriorities/security.svg rename to src/images/security.svg diff --git a/src/features/IndexPage/components/MyPriorities/speed.svg b/src/images/speed.svg similarity index 100% rename from src/features/IndexPage/components/MyPriorities/speed.svg rename to src/images/speed.svg diff --git a/src/images/technologies/jaeger.svg b/src/images/technologies/jaeger.svg deleted file mode 100644 index 86fb00e..0000000 --- a/src/images/technologies/jaeger.svg +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -