Replace portrait with Gatsby Image version

This commit is contained in:
Kevin Kandlbinder 2021-09-24 12:38:08 +00:00
parent 949a856d88
commit 5bbd13e648
5 changed files with 42 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

View file

@ -22,6 +22,7 @@ module.exports = {
{
resolve: "gatsby-plugin-asset-path",
},
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-transformer-json`,

View file

@ -26,6 +26,7 @@
"gatsby": "3.14.0",
"gatsby-cli": "3.14.0",
"gatsby-plugin-asset-path": "3.0.4",
"gatsby-plugin-image": "^1.14.0",
"gatsby-plugin-manifest": "3.14.0",
"gatsby-plugin-mdx": "2.14.0",
"gatsby-plugin-offline": "4.14.0",
@ -33,11 +34,11 @@
"gatsby-plugin-react-i18next": "1.1.1",
"gatsby-plugin-robots-txt": "1.6.10",
"gatsby-plugin-sass": "4.14.0",
"gatsby-plugin-sharp": "3.14.0",
"gatsby-plugin-sharp": "^3.14.0",
"gatsby-plugin-sitemap": "4.10.0",
"gatsby-source-filesystem": "3.14.0",
"gatsby-source-filesystem": "^3.14.0",
"gatsby-transformer-json": "3.14.0",
"gatsby-transformer-sharp": "3.14.0",
"gatsby-transformer-sharp": "^3.14.0",
"i18next": "21.0.2",
"locale": "0.1.0",
"prop-types": "15.7.2",

View file

@ -8,6 +8,7 @@ import * as projectStyles from "./projects.module.scss";
import { Trans, Link } from "gatsby-plugin-react-i18next";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { StaticImage } from "gatsby-plugin-image";
import anime from "animejs";
import { tsParticles } from "tsparticles";
@ -122,13 +123,10 @@ const IndexPage = (props) => {
<div className={styles.heroSectionBgOver}></div>
<div className={styles.profile + " profile"}>
<div
data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-04.jpg)"
style={{
backgroundImage:
"url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-04.jpg)",
}}
className={styles.profileImage + " lazy"}
></div>
className={styles.profileImage}
>
<StaticImage src={"../../content/images/kevin-kandlbinder-04.jpg"} width={250} height={350} placeholder="blurred"></StaticImage>
</div>
<div className={styles.profileImageDummy}></div>
<div className={styles.profileCard}>
<span className={styles.hello}>

View file

@ -2770,6 +2770,11 @@ babel-extract-comments@^1.0.0:
dependencies:
babylon "^6.18.0"
babel-jsx-utils@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz#304ce4fce0c86cbeee849551a45eb4ed1036381a"
integrity sha512-Mh1j/rw4xM9T3YICkw22aBQ78FhsHdsmlb9NEk4uVAFBOg+Ez9ZgXXHugoBPCZui3XLomk/7/JBBH4daJqTkQQ==
babel-loader@^8.2.2:
version "8.2.2"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@ -5623,6 +5628,25 @@ gatsby-plugin-eslint@4.0.0:
dependencies:
webpack-merge "^5.8.0"
gatsby-plugin-image@^1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-1.14.0.tgz#b6d3c14b280b150ad32b3975e90e685b50365bf4"
integrity sha512-o5D4k4OQDdzXQu1VUWM4TLmi86D2fnGNxLKc/SgvGiqCr8e/opNJcWHELU52XQ11zqSU0jzOkDRQGu9tWesRlg==
dependencies:
"@babel/code-frame" "^7.14.0"
"@babel/parser" "^7.15.5"
"@babel/runtime" "^7.15.4"
"@babel/traverse" "^7.15.4"
babel-jsx-utils "^1.1.0"
babel-plugin-remove-graphql-queries "^3.14.0"
camelcase "^5.3.1"
chokidar "^3.5.2"
common-tags "^1.8.0"
fs-extra "^10.0.0"
gatsby-core-utils "^2.14.0"
objectFitPolyfill "^2.3.5"
prop-types "^15.7.2"
gatsby-plugin-manifest@3.14.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-3.14.0.tgz#1f17e35f2e51b86f627d74a6fd6ccfefc4968ddd"
@ -5743,7 +5767,7 @@ gatsby-plugin-sass@4.14.0:
resolve-url-loader "^3.1.2"
sass-loader "^10.1.1"
gatsby-plugin-sharp@3.14.0:
gatsby-plugin-sharp@^3.14.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-3.14.0.tgz#e087b37d03704e019803439adfb7696339b2262d"
integrity sha512-i4jrmOElr0mB2tWlpfxzX72zimiheGny0GF+jPPYY77Uoie43AH7GGZm6wyhdtqKlphYDhgatOMU7xeiWQar6g==
@ -5870,7 +5894,7 @@ gatsby-recipes@^0.25.0:
xstate "^4.9.1"
yoga-layout-prebuilt "^1.9.6"
gatsby-source-filesystem@3.14.0:
gatsby-source-filesystem@^3.14.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-3.14.0.tgz#ae2b930091a932b33270cb9cc2d9caaf0abc1742"
integrity sha512-Gg5GGxiWXhjapWMYdXOGk7zp+ajYowS+xNmaDUkL1gH+IQLvE18XbvKh00B/HiFaHm4azJfS2QRrRI/mPTZX+w==
@ -5917,7 +5941,7 @@ gatsby-transformer-json@3.14.0:
"@babel/runtime" "^7.15.4"
bluebird "^3.7.2"
gatsby-transformer-sharp@3.14.0:
gatsby-transformer-sharp@^3.14.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-3.14.0.tgz#c4c28de17f9970be701249ad0ba6ceeeed6ba79c"
integrity sha512-p0bBu4Sheo4MrrrTRXEu+jcOvsvKmzr1Wc/CQ9VD1U7vTPj74a8JiMJ9GrXrkei5qcXXeXACjBTu5F0Hyg6qMQ==
@ -8823,6 +8847,11 @@ object.values@^1.1.0, object.values@^1.1.4:
define-properties "^1.1.3"
es-abstract "^1.18.2"
objectFitPolyfill@^2.3.5:
version "2.3.5"
resolved "https://registry.yarnpkg.com/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz#be8c83064aabfa4e88780f776c2013c48ce1f745"
integrity sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA==
omggif@^1.0.10, omggif@^1.0.9:
version "1.0.10"
resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"