kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-13 08:57:04 +02:00
Code Issues Projects Releases Wiki Activity

Migrate all images to Gatsby Image

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-09-24 15:13:11 +02:00
parent 5bbd13e648
commit 4fb0aae042
11 changed files with 100 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/pages/friends.js
View file

@ -5,6 +5,7 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types";
import * as styles from "./friends.module.scss";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export const query = graphql`
query AllFriendsQuery($language: String!) {
@ -13,7 +14,11 @@ export const query = graphql`
name
profession
url
imageURL
localImage {
childImageSharp {
gatsbyImageData(height: 300, width: 300, placeholder: BLURRED)
}
}
}
}
locales: allLocale(filter: { language: { eq: $language } }) {
@ -62,12 +67,6 @@ const FriendsPage = ({ data }) => {
>
<div
className={styles.friendImage}
style={{
backgroundImage:
"url(" +
friend.imageURL +
")",
}}
key={
friend.url +
"#" +
@ -75,6 +74,9 @@ const FriendsPage = ({ data }) => {
"#image"
}
>
<div className={styles.friendBg}>
<GatsbyImage image={getImage(friend.localImage)}></GatsbyImage>
</div>
<span
className={
styles.friendName
@ -85,7 +87,7 @@ const FriendsPage = ({ data }) => {
friend.name +
"#name"
}
>
>
{friend.name}
</span>
<span

12
src/pages/friends.module.scss
View file

@ -21,14 +21,26 @@
flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white;
position: relative;
.friendBg {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.friendName {
font-size: 2em;
margin-top: -5px;
z-index: 100;
}
.friendTitle {
margin-top: auto;
z-index: 100;
}
}

18
src/pages/index.js
View file

@ -8,7 +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 { StaticImage, GatsbyImage } from "gatsby-plugin-image";
import anime from "animejs";
import { tsParticles } from "tsparticles";
@ -45,9 +45,7 @@ export const query = graphql`
name
image {
childImageSharp {
resize(width: 400, quality: 90) {
src
}
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
}
shortDescription
@ -262,14 +260,12 @@ const IndexPage = (props) => {
className={
projectStyles.projectCardImage
}
style={{
backgroundImage:
"url(" +
project.image.childImageSharp
.resize.src +
")",
}}
>
<div className={
projectStyles.projectCardBg
}>
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
</div>
<div
className={
projectStyles.projectCardMeta

17
src/pages/projects.js
View file

@ -5,6 +5,7 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types";
import * as styles from "./projects.module.scss";
import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql`
query GetProjects($language: String) {
@ -18,9 +19,7 @@ export const query = graphql`
name
image {
childImageSharp {
resize(width: 400, quality: 90) {
src
}
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
}
shortDescription
@ -62,14 +61,12 @@ const ProjectsPage = ({ data }) => {
>
<div
className={styles.projectCardImage}
style={{
backgroundImage:
"url(" +
project.image.childImageSharp
.resize.src +
")",
}}
>
<div className={
styles.projectCardBg
}>
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
</div>
<div className={styles.projectCardMeta}>
<span
className={

11
src/pages/projects.module.scss
View file

@ -13,6 +13,7 @@
flex-grow: 1;
width: 300px;
flex-shrink: 0;
position: relative;
.projectCardActivityIndicator {
position: absolute;
@ -46,6 +47,13 @@
color: white;
}
.projectCardBg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.projectCardMeta {
padding: 10px;
flex-grow: 1;
@ -54,6 +62,9 @@
padding: 10px;
height: 100%;
background: linear-gradient(to bottom, transparent, black);
position: absolute;
z-index: 2;
width: 100%;
}
.projectCardTitle {

14
src/pages/social.js
View file

@ -5,15 +5,20 @@ import { graphql } from "gatsby";
import PropTypes from "prop-types";
import * as styles from "./social.module.scss";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export const query = graphql`
query AllSocialsQuery($language: String!) {
allSocialsJson {
nodes {
image
platformHandle
platformName
url
localImage {
childImageSharp {
gatsbyImageData(height: 300, width: 300)
}
}
}
}
locales: allLocale(filter: { language: { eq: $language } }) {
@ -56,11 +61,10 @@ const SocialPage = ({ data }) => {
>
<div
className={styles.socialImage}
style={{
backgroundImage:
"url(" + social.image + ")",
}}
>
<div className={styles.socialBg}>
<GatsbyImage image={getImage(social.localImage)}></GatsbyImage>
</div>
<span className={styles.socialName}>
{social.platformName}
</span>

13
src/pages/social.module.scss
View file

@ -8,6 +8,7 @@
@include cardGeneric;
display: flex;
flex-direction: column;
position: relative;
.socialImage {
width: 300px;
@ -19,14 +20,26 @@
flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
color: white;
position: relative;
.socialBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.socialName {
font-size: 2em;
margin-top: -5px;
z-index: 100;
}
.socialUsername {
margin-top: auto;
z-index: 100;
}
}
}

13
src/templates/project.js
View file

@ -6,6 +6,7 @@ import PropTypes from "prop-types";
import * as styles from "./project.module.scss";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) {
@ -21,7 +22,9 @@ export const query = graphql`
website
}
image {
publicURL
childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
}
shortDescription
}
@ -65,11 +68,9 @@ const ProjectTemplate = ({ data }) => {
<div style={{ paddingTop: 0 }}>
<div
className={styles.headerBackground}
style={{
backgroundImage:
"url(" + project.image.publicURL + ")",
}}
></div>
>
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage>
</div>
<header>
<div className={styles.headerInner}>
<h1>