kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-16 09:32:03 +02:00
Code Issues Projects Releases Wiki Activity

Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-10-18 16:57:20 +02:00
parent b50b7d83c3
commit 0b5a905ae6
20 changed files with 452 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

8
config.js
View file

@ -23,5 +23,11 @@ module.exports = {
height: "168 cm", height: "168 cm",
nationality: "Germany", nationality: "Germany",
personImage: "./content/images/kevin-kandlbinder-04.jpg", personImage: "./content/images/kevin-kandlbinder-04.jpg",
sameAs: ["https://mastodon.1in1.net/@kevin", "https://github.com/Unkn0wnCat", "https://unkn0wncat.net/", "https://twitter.com/@Unkn0wnKevin", "https://unsplash.com/@unkn0wncat"] sameAs: [
"https://mastodon.1in1.net/@kevin",
"https://github.com/Unkn0wnCat",
"https://unkn0wncat.net/",
"https://twitter.com/@Unkn0wnKevin",
"https://unsplash.com/@unkn0wncat",
],
}; };

10
gatsby-config.js
View file

@ -23,7 +23,7 @@ module.exports = {
height: extConfig.height, height: extConfig.height,
nationality: extConfig.nationality, nationality: extConfig.nationality,
personImage: extConfig.personImage, personImage: extConfig.personImage,
sameAs: extConfig.sameAs sameAs: extConfig.sameAs,
}, },
plugins: [ plugins: [
`gatsby-plugin-eslint`, `gatsby-plugin-eslint`,
@ -34,15 +34,15 @@ module.exports = {
{ {
resolve: `gatsby-plugin-remote-images`, resolve: `gatsby-plugin-remote-images`,
options: { options: {
nodeType: 'SocialsJson', nodeType: "SocialsJson",
imagePath: 'image', imagePath: "image",
}, },
}, },
{ {
resolve: `gatsby-plugin-remote-images`, resolve: `gatsby-plugin-remote-images`,
options: { options: {
nodeType: 'FriendsJson', nodeType: "FriendsJson",
imagePath: 'imageURL', imagePath: "imageURL",
}, },
}, },
{ {

2
src/_mixins.scss
View file

@ -54,7 +54,7 @@
justify-content: center; justify-content: center;
text-shadow: 0 0 10px black; text-shadow: 0 0 10px black;
@media(prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
background-color: $accentColor; background-color: $accentColor;
} }

6
src/components/languageSwitcher.js
View file

@ -7,7 +7,11 @@ export default function LanguageSwitcher() {
const { languages, originalPath } = useI18next(); const { languages, originalPath } = useI18next();
return ( return (
<div className={styles.languageModal} id="languageChooser" role="dialog"> <div
className={styles.languageModal}
id="languageChooser"
role="dialog"
>
<div className={styles.languageModalInner}> <div className={styles.languageModalInner}>
<h2> <h2>
Languages ( Languages (

47
src/components/navigation.js
View file

@ -7,17 +7,26 @@ import { createPortal } from "react-dom";
import * as styles from "./navigation.module.scss"; import * as styles from "./navigation.module.scss";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { Fade as Hamburger } from 'hamburger-react'; import { Fade as Hamburger } from "hamburger-react";
const OffScreenNav = ({active, close}) => { const OffScreenNav = ({ active, close }) => {
if(typeof window === "undefined") { if (typeof window === "undefined") {
return null; return null;
} }
return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}> return createPortal(
<div
className={
styles.offscreenNav + " " + (active ? styles.active : "")
}
>
<div className={styles.inner}> <div className={styles.inner}>
<button className={styles.close} onClick={close}><X/></button> <button className={styles.close} onClick={close}>
<span><Trans>menu</Trans></span> <X />
</button>
<span>
<Trans>menu</Trans>
</span>
<Link to="/" activeClassName={styles.active}> <Link to="/" activeClassName={styles.active}>
<Trans>home</Trans> <Trans>home</Trans>
</Link> </Link>
@ -43,8 +52,10 @@ const OffScreenNav = ({active, close}) => {
<Trans>social</Trans> <Trans>social</Trans>
</Link> </Link>
</div> </div>
</div>, window.document.body) </div>,
} window.document.body
);
};
const Navigation = ({ isHome }) => { const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false); let [atTop, setAtTop] = useState(false);
@ -96,7 +107,10 @@ const Navigation = ({ isHome }) => {
} }
> >
<nav className={styles.topBarInner}> <nav className={styles.topBarInner}>
<OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} /> <OffScreenNav
active={offscreenNavActive}
close={closeOffscreenNav}
/>
<StaticQuery <StaticQuery
query={graphql` query={graphql`
query { query {
@ -108,7 +122,11 @@ const Navigation = ({ isHome }) => {
} }
`} `}
render={(data) => ( render={(data) => (
<Link to="/" activeClassName={styles.active} className={styles.logo}> <Link
to="/"
activeClassName={styles.active}
className={styles.logo}
>
{data.site.siteMetadata.title} {data.site.siteMetadata.title}
</Link> </Link>
)} )}
@ -135,7 +153,14 @@ const Navigation = ({ isHome }) => {
> >
<Trans>social</Trans> <Trans>social</Trans>
</Link> </Link>
<div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div> <div className={styles.hamburger}>
<Hamburger
toggle={setOffscreenNavActive}
toggled={offscreenNavActive}
rounded
size={30}
/>
</div>
</nav> </nav>
</div> </div>
); );

10
src/components/navigation.module.scss
View file

@ -13,7 +13,7 @@
color: white; color: white;
overflow: auto; overflow: auto;
opacity: 0; opacity: 0;
transition: opacity .25s, left .25s; transition: opacity 0.25s, left 0.25s;
pointer-events: none; pointer-events: none;
overscroll-behavior: contain; overscroll-behavior: contain;
@ -23,7 +23,7 @@
pointer-events: auto; pointer-events: auto;
} }
@media(prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
background-color: rgba($lightBackground, 0.9); background-color: rgba($lightBackground, 0.9);
color: black; color: black;
} }
@ -61,7 +61,7 @@
border-left: 3px solid white; border-left: 3px solid white;
border-right: 3px solid white; border-right: 3px solid white;
@media(prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
border-left: 3px solid black; border-left: 3px solid black;
border-right: 3px solid black; border-right: 3px solid black;
} }
@ -113,7 +113,7 @@
display: none; display: none;
height: 43px; height: 43px;
@media(max-width: 500px) { @media (max-width: 500px) {
display: block; display: block;
} }
} }
@ -139,7 +139,7 @@
} }
} }
@media(max-width: 500px) { @media (max-width: 500px) {
&:not(.logo) { &:not(.logo) {
display: none; display: none;
} }

85
src/components/seo.js
View file

@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Helmet } from "gatsby-plugin-react-i18next"; import { Helmet } from "gatsby-plugin-react-i18next";
import { useStaticQuery, graphql } from "gatsby"; import { useStaticQuery, graphql } from "gatsby";
import { useLocation } from "@reach/router" import { useLocation } from "@reach/router";
import { useTranslation } from "gatsby-plugin-react-i18next"; import { useTranslation } from "gatsby-plugin-react-i18next";
import useSiteMetadata from "../helpers/useSiteMetadata"; import useSiteMetadata from "../helpers/useSiteMetadata";
@ -27,18 +27,13 @@ function SEO({ description, meta, title, speakable, image, children }) {
const siteMeta = useSiteMetadata(); const siteMeta = useSiteMetadata();
const location = useLocation(); const location = useLocation();
return ( return (
<Helmet <Helmet title={title} titleTemplate={`%s | ${site.siteMetadata.title}`}>
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
>
<meta <meta
name="battery-savings" name="battery-savings"
content="allow-reduced-framerate" content="allow-reduced-framerate"
></meta> ></meta>
{ {[
[
{ {
name: `description`, name: `description`,
content: metaDescription, content: metaDescription,
@ -75,10 +70,17 @@ function SEO({ description, meta, title, speakable, image, children }) {
name: "keywords", name: "keywords",
content: site.siteMetadata.keywords, content: site.siteMetadata.keywords,
}, },
].concat(meta).map((m) => { ]
return <meta key={m.name} name={m.name} content={m.content}></meta>; .concat(meta)
}) .map((m) => {
} return (
<meta
key={m.name}
name={m.name}
content={m.content}
></meta>
);
})}
<script <script
async async
defer defer
@ -86,40 +88,45 @@ function SEO({ description, meta, title, speakable, image, children }) {
src="https://analytics.kevink.dev/js/plausible.js" src="https://analytics.kevink.dev/js/plausible.js"
></script> ></script>
{ {image && [
image && [ <meta
<meta name="twitter:image" content={siteMeta.siteUrl + image} key="twimg"/>, name="twitter:image"
<meta name="og:image" content={siteMeta.siteUrl + image} key="ogimg"/>, content={siteMeta.siteUrl + image}
] key="twimg"
} />,
<meta
name="og:image"
content={siteMeta.siteUrl + image}
key="ogimg"
/>,
]}
<script type="application/ld+json"> <script type="application/ld+json">
{JSON.stringify({ {JSON.stringify({
"@context": "https://schema.org/", "@context": "https://schema.org/",
"@type": "WebPage", "@type": "WebPage",
"name": title, name: title,
"url": siteMeta.siteUrl+location.pathname, url: siteMeta.siteUrl + location.pathname,
"speakable": speakable, speakable: speakable,
"image": siteMeta.siteUrl + image, image: siteMeta.siteUrl + image,
"about": { about: {
"@type": "Person", "@type": "Person",
"name": siteMeta.givenName + " " + siteMeta.familyName, name: siteMeta.givenName + " " + siteMeta.familyName,
"givenName": siteMeta.givenName, givenName: siteMeta.givenName,
"familyName": siteMeta.familyName, familyName: siteMeta.familyName,
"birthDate": siteMeta.birthDate, birthDate: siteMeta.birthDate,
"address": siteMeta.address, address: siteMeta.address,
"email": siteMeta.contactEmail, email: siteMeta.contactEmail,
"telephone": siteMeta.contactPhone, telephone: siteMeta.contactPhone,
"gender": siteMeta.gender, gender: siteMeta.gender,
"height": siteMeta.height, height: siteMeta.height,
"nationality": { nationality: {
"@type": "Country", "@type": "Country",
"name": siteMeta.nationality name: siteMeta.nationality,
},
image: siteMeta.siteUrl + "/owner.jpg",
sameAs: siteMeta.sameAs,
}, },
"image": siteMeta.siteUrl + "/owner.jpg",
"sameAs": siteMeta.sameAs
}
})} })}
</script> </script>
@ -139,7 +146,7 @@ SEO.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
speakable: PropTypes.any, speakable: PropTypes.any,
image: PropTypes.string, image: PropTypes.string,
children: PropTypes.any children: PropTypes.any,
}; };
export default SEO; export default SEO;

4
src/helpers/useSiteMetadata.js
View file

@ -1,4 +1,4 @@
import { useStaticQuery, graphql } from 'gatsby'; import { useStaticQuery, graphql } from "gatsby";
const useSiteMetadata = () => { const useSiteMetadata = () => {
const { site } = useStaticQuery( const { site } = useStaticQuery(
@ -29,7 +29,7 @@ const useSiteMetadata = () => {
} }
} }
} }
`, `
); );
return site.siteMetadata; return site.siteMetadata;
}; };

6
src/layouts/default.js
View file

@ -18,7 +18,9 @@ class Layout extends React.Component {
title={this.props.title} title={this.props.title}
image={this.props.image} image={this.props.image}
speakable={this.props.speakable} speakable={this.props.speakable}
>{this.props.seoAdditional ?? null}</SEO> >
{this.props.seoAdditional ?? null}
</SEO>
<Navigation isHome={this.props.transparentTopbar} /> <Navigation isHome={this.props.transparentTopbar} />
<div id="content" role="main"> <div id="content" role="main">
{this.props.children} {this.props.children}
@ -61,7 +63,7 @@ Layout.propTypes = {
children: PropTypes.any.isRequired, children: PropTypes.any.isRequired,
seoAdditional: PropTypes.any, seoAdditional: PropTypes.any,
image: PropTypes.string, image: PropTypes.string,
speakable: PropTypes.any speakable: PropTypes.any,
}; };
export default Layout; export default Layout;

3
src/layouts/default.scss
View file

@ -2,8 +2,6 @@
@import "~@fontsource/fira-code/700.css"; @import "~@fontsource/fira-code/700.css";
@import "../variables"; @import "../variables";
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -69,7 +67,6 @@ section > article,
} }
article { article {
a { a {
color: $accentColor; color: $accentColor;
text-decoration: underline dotted currentColor; text-decoration: underline dotted currentColor;

40
src/pages/about.js
View file

@ -34,7 +34,10 @@ export const query = graphql`
name name
image { image {
childImageSharp { childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH) gatsbyImageData(
placeholder: BLURRED
layout: FULL_WIDTH
)
} }
} }
shortDescription shortDescription
@ -65,7 +68,7 @@ export const query = graphql`
`; `;
const AboutPage = (props) => { const AboutPage = (props) => {
const {t} = useTranslation(); const { t } = useTranslation();
React.useEffect(() => { React.useEffect(() => {
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
@ -99,15 +102,15 @@ const AboutPage = (props) => {
let file = props.data.file; let file = props.data.file;
return ( return (
<Layout title={t("about")} description={t("siteDescription")} <Layout
title={t("about")}
description={t("siteDescription")}
image={"/owner.jpg"} image={"/owner.jpg"}
speakable={{ speakable={{
"@type": "SpeakableSpecification", "@type": "SpeakableSpecification",
"xPath": [ xPath: ["article"],
"article" }}
] >
}}>
<section className={styles.aboutSection} id="about"> <section className={styles.aboutSection} id="about">
<article> <article>
<div className={styles.aboutText}> <div className={styles.aboutText}>
@ -166,10 +169,20 @@ const AboutPage = (props) => {
projectStyles.projectCardImage projectStyles.projectCardImage
} }
> >
<div className={ <div
className={
projectStyles.projectCardBg projectStyles.projectCardBg
}> }
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage> >
<GatsbyImage
image={
project.image
.childImageSharp
.gatsbyImageData
}
objectFit="cover"
style={{ height: "100%" }}
></GatsbyImage>
</div> </div>
<div <div
className={ className={
@ -193,8 +206,7 @@ const AboutPage = (props) => {
})} })}
</div> </div>
<Link to="/projects" className={styles.seeMoreButton}> <Link to="/projects" className={styles.seeMoreButton}>
<Trans>seeMore</Trans>{" "} <Trans>seeMore</Trans> <ArrowRight />
<ArrowRight/>
</Link> </Link>
</article> </article>
</section> </section>
@ -203,7 +215,7 @@ const AboutPage = (props) => {
<span> <span>
<Trans>donationCatchphrase</Trans> <Trans>donationCatchphrase</Trans>
</span> </span>
<ArrowRight/> <ArrowRight />
</div> </div>
</Link> </Link>
</Layout> </Layout>

2
src/pages/donate.js
View file

@ -128,7 +128,7 @@ const DonatePage = (props) => {
} }
> >
<span>Donate using PayPal</span> <span>Donate using PayPal</span>
<ArrowRight/> <ArrowRight />
</a> </a>
</article> </article>
</section> </section>

18
src/pages/friends.js
View file

@ -17,7 +17,11 @@ export const query = graphql`
url url
localImage { localImage {
childImageSharp { childImageSharp {
gatsbyImageData(height: 300, width: 300, placeholder: BLURRED) gatsbyImageData(
height: 300
width: 300
placeholder: BLURRED
)
} }
} }
} }
@ -75,8 +79,14 @@ const FriendsPage = ({ data }) => {
"#image" "#image"
} }
> >
<div className={styles.friendBg}> <div
<GatsbyImage image={getImage(friend.localImage)}></GatsbyImage> className={styles.friendBg}
>
<GatsbyImage
image={getImage(
friend.localImage
)}
></GatsbyImage>
</div> </div>
<span <span
className={ className={
@ -123,7 +133,7 @@ const FriendsPage = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<Globe2 height={20}/>{" "} <Globe2 height={20} />{" "}
{friend.url} {friend.url}
</a> </a>
</div> </div>

66
src/pages/index.js
View file

@ -10,7 +10,15 @@ import { StaticImage } from "gatsby-plugin-image";
import anime from "animejs"; import anime from "animejs";
import { ArrowRight, AtSign, Camera, Github, Mail, MapPin, Phone } from "lucide-react"; import {
ArrowRight,
AtSign,
Camera,
Github,
Mail,
MapPin,
Phone,
} from "lucide-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export const query = graphql` export const query = graphql`
@ -39,7 +47,7 @@ export const query = graphql`
`; `;
const IndexPage = (props) => { const IndexPage = (props) => {
const {t} = useTranslation(); const { t } = useTranslation();
React.useEffect(() => { React.useEffect(() => {
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
@ -74,14 +82,16 @@ const IndexPage = (props) => {
let meta = props.data.site.siteMetadata; let meta = props.data.site.siteMetadata;
return ( return (
<Layout title="Kevin Kandlbinder" transparentTopbar={true} description={t("siteDescription")} <Layout
title="Kevin Kandlbinder"
transparentTopbar={true}
description={t("siteDescription")}
image={"/owner.jpg"} image={"/owner.jpg"}
speakable={{ speakable={{
"@type": "SpeakableSpecification", "@type": "SpeakableSpecification",
"xPath": [ xPath: ["article"],
"article" }}
] >
}}>
<section className={styles.heroSection}> <section className={styles.heroSection}>
<div <div
className={styles.heroSectionBg} className={styles.heroSectionBg}
@ -89,10 +99,15 @@ const IndexPage = (props) => {
></div> ></div>
<div className={styles.heroSectionBgOver}></div> <div className={styles.heroSectionBgOver}></div>
<div className={styles.profile + " profile"}> <div className={styles.profile + " profile"}>
<div <div className={styles.profileImage}>
className={styles.profileImage} <StaticImage
> src={
<StaticImage src={"../../content/images/kevin-kandlbinder-04.jpg"} width={250} height={350} placeholder="blurred"></StaticImage> "../../content/images/kevin-kandlbinder-04.jpg"
}
width={250}
height={350}
placeholder="blurred"
></StaticImage>
</div> </div>
<div className={styles.profileImageDummy}></div> <div className={styles.profileImageDummy}></div>
<div className={styles.profileCard}> <div className={styles.profileCard}>
@ -122,7 +137,7 @@ const IndexPage = (props) => {
href={"mailto:" + meta.contactEmail} href={"mailto:" + meta.contactEmail}
rel="me" rel="me"
> >
<Mail width={20}/> <Mail width={20} />
{meta.contactEmail} {meta.contactEmail}
</a> </a>
<a <a
@ -140,7 +155,7 @@ const IndexPage = (props) => {
rel="noreferrer me" rel="noreferrer me"
target="_blank" target="_blank"
> >
<AtSign width={20}/> <AtSign width={20} />
{meta.contactMastodon} {meta.contactMastodon}
</a> </a>
<a <a
@ -151,7 +166,7 @@ const IndexPage = (props) => {
rel="noreferrer me" rel="noreferrer me"
target="_blank" target="_blank"
> >
<Github width={20}/> <Github width={20} />
{meta.contactGitHub} {meta.contactGitHub}
</a> </a>
</div> </div>
@ -161,24 +176,30 @@ const IndexPage = (props) => {
<div className={styles.landingCta}> <div className={styles.landingCta}>
<Link to={"/projects"}> <Link to={"/projects"}>
<div> <div>
<span className={styles.ctaAccent}>{t("explore")}</span>{" "} <span className={styles.ctaAccent}>
{t("explore")}
</span>{" "}
<span>{t("myProjects")}</span> <span>{t("myProjects")}</span>
</div> </div>
<ArrowRight/> <ArrowRight />
</Link> </Link>
<Link to={"/social"}> <Link to={"/social"}>
<div> <div>
<span className={styles.ctaAccent}>{t("discover")}</span>{" "} <span className={styles.ctaAccent}>
{t("discover")}
</span>{" "}
<span>{t("mySocials")}</span> <span>{t("mySocials")}</span>
</div> </div>
<ArrowRight/> <ArrowRight />
</Link> </Link>
<Link to={"/about"}> <Link to={"/about"}>
<div> <div>
<span className={styles.ctaAccent}>{t("learn")}</span>{" "} <span className={styles.ctaAccent}>
{t("learn")}
</span>{" "}
<span>{t("moreAboutMe")}</span> <span>{t("moreAboutMe")}</span>
</div> </div>
<ArrowRight/> <ArrowRight />
</Link> </Link>
</div> </div>
</section> </section>
@ -190,10 +211,9 @@ const IndexPage = (props) => {
> >
<div> <div>
<span> <span>
<Camera/>{" "} <Camera /> <Trans>homeImageCredit</Trans>
<Trans>homeImageCredit</Trans>
</span> </span>
<ArrowRight/> <ArrowRight />
</div> </div>
</a> </a>
</Layout> </Layout>

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

@ -51,7 +51,6 @@
#0f0a3c 100% #0f0a3c 100%
); );
background-blend-mode: screen, overlay, hard-light, normal; background-blend-mode: screen, overlay, hard-light, normal;
} }
.heroSectionBgOver { .heroSectionBgOver {
@ -60,11 +59,10 @@
/*background-color: $background; /*background-color: $background;
transition: background-color 0.25s, box-shadow 0.25s;*/ transition: background-color 0.25s, box-shadow 0.25s;*/
@media(max-width: 950px) { @media (max-width: 950px) {
display: none; display: none;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
background-color: $lightBackground; background-color: $lightBackground;
} }
@ -75,7 +73,7 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@media(max-width: 1000px) { @media (max-width: 1000px) {
flex-direction: column; flex-direction: column;
bottom: 0; bottom: 0;
} }
@ -92,7 +90,7 @@
border-radius: 10px; border-radius: 10px;
align-items: center; align-items: center;
@media(max-width: 1000px) { @media (max-width: 1000px) {
margin: 10px; margin: 10px;
font-size: 1.2em; font-size: 1.2em;
} }
@ -315,9 +313,7 @@
color: #886af5; color: #886af5;
} }
@media (prefers-color-scheme: light) {
@media(prefers-color-scheme: light) {
&.skill_os { &.skill_os {
color: #2b66e5; color: #2b66e5;
} }
@ -337,7 +333,6 @@
&.skill_program { &.skill_program {
color: #17681b; color: #17681b;
} }
} }
} }
} }

63
src/pages/projects.js
View file

@ -20,7 +20,10 @@ export const query = graphql`
name name
image { image {
childImageSharp { childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH) gatsbyImageData(
placeholder: BLURRED
layout: FULL_WIDTH
)
} }
publicURL publicURL
} }
@ -43,27 +46,33 @@ const ProjectsPage = ({ data }) => {
const { t } = useI18next(); const { t } = useI18next();
const meta = useSiteMetadata(); const meta = useSiteMetadata();
return ( return (
<Layout title={t("projects")} description={t("projectsDescription")} seoAdditional={ <Layout
title={t("projects")}
description={t("projectsDescription")}
seoAdditional={
<script type="application/ld+json"> <script type="application/ld+json">
{JSON.stringify( {JSON.stringify({
{ "@context": "https://schema.org",
"@context":"https://schema.org", "@type": "ItemList",
"@type":"ItemList", itemListElement: data.allProjectsJson.nodes.map(
"itemListElement":data.allProjectsJson.nodes.map((project, i) => { (project, i) => {
return { return {
"@type":"ListItem", "@type": "ListItem",
"position":i, position: i,
"url": meta.siteUrl+"/projects/"+project.urlname, url:
"image": project.image.publicURL, meta.siteUrl +
"name": project.name, "/projects/" +
"description": project.shortDescription project.urlname,
image: project.image.publicURL,
name: project.name,
description: project.shortDescription,
};
} }
}) ),
} })}
)}
</script> </script>
}> }
>
<section> <section>
<article> <article>
<h1> <h1>
@ -82,13 +91,17 @@ const ProjectsPage = ({ data }) => {
key={project.lang + project.urlname} key={project.lang + project.urlname}
to={"/projects/" + project.urlname} to={"/projects/" + project.urlname}
> >
<div <div className={styles.projectCardImage}>
className={styles.projectCardImage} <div className={styles.projectCardBg}>
> <GatsbyImage
<div className={ image={
styles.projectCardBg project.image
}> .childImageSharp
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage> .gatsbyImageData
}
objectFit="cover"
style={{ height: "100%" }}
></GatsbyImage>
</div> </div>
<div className={styles.projectCardMeta}> <div className={styles.projectCardMeta}>
<span <span

10
src/pages/social.js
View file

@ -59,11 +59,13 @@ const SocialPage = ({ data }) => {
rel="noreferrer me" rel="noreferrer me"
key={social.url} key={social.url}
> >
<div <div className={styles.socialImage}>
className={styles.socialImage}
>
<div className={styles.socialBg}> <div className={styles.socialBg}>
<GatsbyImage image={getImage(social.localImage)}></GatsbyImage> <GatsbyImage
image={getImage(
social.localImage
)}
></GatsbyImage>
</div> </div>
<span className={styles.socialName}> <span className={styles.socialName}>
{social.platformName} {social.platformName}

21
src/templates/project.js
View file

@ -24,7 +24,10 @@ export const query = graphql`
} }
image { image {
childImageSharp { childImageSharp {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH) gatsbyImageData(
placeholder: BLURRED
layout: FULL_WIDTH
)
} }
publicURL publicURL
} }
@ -69,10 +72,14 @@ const ProjectTemplate = ({ data }) => {
> >
<section className={styles.projectHeader}> <section className={styles.projectHeader}>
<div style={{ paddingTop: 0 }}> <div style={{ paddingTop: 0 }}>
<div <div className={styles.headerBackground}>
className={styles.headerBackground} <GatsbyImage
> image={
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage> project.image.childImageSharp.gatsbyImageData
}
style={{ width: "100%", height: "100%" }}
objectFit="cover"
></GatsbyImage>
</div> </div>
<header> <header>
<div className={styles.headerInner}> <div className={styles.headerInner}>
@ -103,7 +110,7 @@ const ProjectTemplate = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<Github height={15}/>{" "} <Github height={15} />{" "}
<Trans>projectViewGitHub</Trans> <Trans>projectViewGitHub</Trans>
</a> </a>
) : null} ) : null}
@ -113,7 +120,7 @@ const ProjectTemplate = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<ExternalLink height={15}/>{" "} <ExternalLink height={15} />{" "}
<Trans>projectViewWebsite</Trans> <Trans>projectViewWebsite</Trans>
</a> </a>
) : null} ) : null}