mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-28 09:46:52 +02:00
Run prettier
This commit is contained in:
parent
b50b7d83c3
commit
0b5a905ae6
20 changed files with 452 additions and 352 deletions
|
|
@ -23,5 +23,11 @@ module.exports = {
|
|||
height: "168 cm",
|
||||
nationality: "Germany",
|
||||
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",
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ module.exports = {
|
|||
height: extConfig.height,
|
||||
nationality: extConfig.nationality,
|
||||
personImage: extConfig.personImage,
|
||||
sameAs: extConfig.sameAs
|
||||
sameAs: extConfig.sameAs,
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-eslint`,
|
||||
|
|
@ -34,15 +34,15 @@ module.exports = {
|
|||
{
|
||||
resolve: `gatsby-plugin-remote-images`,
|
||||
options: {
|
||||
nodeType: 'SocialsJson',
|
||||
imagePath: 'image',
|
||||
nodeType: "SocialsJson",
|
||||
imagePath: "image",
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-remote-images`,
|
||||
options: {
|
||||
nodeType: 'FriendsJson',
|
||||
imagePath: 'imageURL',
|
||||
nodeType: "FriendsJson",
|
||||
imagePath: "imageURL",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
{
|
||||
"siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
|
||||
"imprint": "Impressum",
|
||||
"datasec": "Datenschutz",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projekte",
|
||||
"project": "Projekt",
|
||||
"social": "Soziales",
|
||||
"homeHello": "Hallo, ich bin",
|
||||
"homeMe": "Ich bin",
|
||||
"homeWebDeveloper": "Web Developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
|
||||
"donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
|
||||
"homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
|
||||
"de": "Deutsch",
|
||||
"en": "Englisch",
|
||||
"projectAboutHeader": "Über {{projectName}}",
|
||||
"projectViewGitHub": "Auf GitHub anschauen",
|
||||
"projectViewWebsite": "Projekt-Website anschauen",
|
||||
"projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
|
||||
"projectView": "Anschauen",
|
||||
"socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
|
||||
"socialDescription": "Finde mich auf anderen Plattformen!",
|
||||
"friends": "Freunde",
|
||||
"friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.",
|
||||
"donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
|
||||
"donateThanks": "Danke für die Spende!",
|
||||
"donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
|
||||
"donate": "Spenden",
|
||||
"featuredProjects": "Vorgestellte Projekte",
|
||||
"seeMore": "Mehr Projekte erkunden",
|
||||
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
|
||||
"donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
|
||||
"sponsorGitHub": "Über GitHub unterstützen",
|
||||
"mySkills": "Meine Fähigkeiten",
|
||||
"about": "Über",
|
||||
"explore": "Erkunde",
|
||||
"myProjects": "meine Projekte",
|
||||
"discover": "Entdecke",
|
||||
"mySocials": "meine Accounts",
|
||||
"learn": "Erfahre",
|
||||
"moreAboutMe": "mehr über mich",
|
||||
"home": "Home",
|
||||
"menu": "Menü"
|
||||
"siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
|
||||
"imprint": "Impressum",
|
||||
"datasec": "Datenschutz",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projekte",
|
||||
"project": "Projekt",
|
||||
"social": "Soziales",
|
||||
"homeHello": "Hallo, ich bin",
|
||||
"homeMe": "Ich bin",
|
||||
"homeWebDeveloper": "Web Developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
|
||||
"donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
|
||||
"homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
|
||||
"de": "Deutsch",
|
||||
"en": "Englisch",
|
||||
"projectAboutHeader": "Über {{projectName}}",
|
||||
"projectViewGitHub": "Auf GitHub anschauen",
|
||||
"projectViewWebsite": "Projekt-Website anschauen",
|
||||
"projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
|
||||
"projectView": "Anschauen",
|
||||
"socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
|
||||
"socialDescription": "Finde mich auf anderen Plattformen!",
|
||||
"friends": "Freunde",
|
||||
"friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.",
|
||||
"donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}}</1> wenn du mit mir über irgendwas reden möchtest!",
|
||||
"donateThanks": "Danke für die Spende!",
|
||||
"donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
|
||||
"donate": "Spenden",
|
||||
"featuredProjects": "Vorgestellte Projekte",
|
||||
"seeMore": "Mehr Projekte erkunden",
|
||||
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
|
||||
"donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
|
||||
"sponsorGitHub": "Über GitHub unterstützen",
|
||||
"mySkills": "Meine Fähigkeiten",
|
||||
"about": "Über",
|
||||
"explore": "Erkunde",
|
||||
"myProjects": "meine Projekte",
|
||||
"discover": "Entdecke",
|
||||
"mySocials": "meine Accounts",
|
||||
"learn": "Erfahre",
|
||||
"moreAboutMe": "mehr über mich",
|
||||
"home": "Home",
|
||||
"menu": "Menü"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
{
|
||||
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
||||
"imprint": "Imprint",
|
||||
"datasec": "Data Protection",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projects",
|
||||
"project": "Project",
|
||||
"social": "Social",
|
||||
"homeHello": "Hello, I am",
|
||||
"homeMe": "I am",
|
||||
"homeWebDeveloper": "a web developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
||||
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
||||
"de": "German",
|
||||
"en": "English",
|
||||
"projectAboutHeader": "About {{projectName}}",
|
||||
"projectViewGitHub": "View on GitHub",
|
||||
"projectViewWebsite": "View Project-Website",
|
||||
"projectsDescription": "This is what I am working on or have worked on.",
|
||||
"projectView": "View",
|
||||
"socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
|
||||
"socialDescription": "Find me on other platforms!",
|
||||
"friends": "Friends",
|
||||
"friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
|
||||
"donate": "Donate",
|
||||
"donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
|
||||
"donateThanks": "Thanks for donating!",
|
||||
"donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
|
||||
"featuredProjects": "Featured Projects",
|
||||
"seeMore": "Explore more Projects",
|
||||
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
|
||||
"donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
|
||||
"sponsorGitHub": "Sponsor using GitHub",
|
||||
"mySkills": "My Skills",
|
||||
"about": "About",
|
||||
"explore": "Explore",
|
||||
"myProjects": "my projects",
|
||||
"discover": "Discover",
|
||||
"mySocials": "my socials",
|
||||
"learn": "Learn",
|
||||
"moreAboutMe": "more about me",
|
||||
"home": "Home",
|
||||
"menu": "Menu"
|
||||
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
||||
"imprint": "Imprint",
|
||||
"datasec": "Data Protection",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projects",
|
||||
"project": "Project",
|
||||
"social": "Social",
|
||||
"homeHello": "Hello, I am",
|
||||
"homeMe": "I am",
|
||||
"homeWebDeveloper": "a web developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
||||
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
||||
"de": "German",
|
||||
"en": "English",
|
||||
"projectAboutHeader": "About {{projectName}}",
|
||||
"projectViewGitHub": "View on GitHub",
|
||||
"projectViewWebsite": "View Project-Website",
|
||||
"projectsDescription": "This is what I am working on or have worked on.",
|
||||
"projectView": "View",
|
||||
"socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
|
||||
"socialDescription": "Find me on other platforms!",
|
||||
"friends": "Friends",
|
||||
"friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
|
||||
"donate": "Donate",
|
||||
"donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
|
||||
"donateThanks": "Thanks for donating!",
|
||||
"donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
|
||||
"featuredProjects": "Featured Projects",
|
||||
"seeMore": "Explore more Projects",
|
||||
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
|
||||
"donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
|
||||
"sponsorGitHub": "Sponsor using GitHub",
|
||||
"mySkills": "My Skills",
|
||||
"about": "About",
|
||||
"explore": "Explore",
|
||||
"myProjects": "my projects",
|
||||
"discover": "Discover",
|
||||
"mySocials": "my socials",
|
||||
"learn": "Learn",
|
||||
"moreAboutMe": "more about me",
|
||||
"home": "Home",
|
||||
"menu": "Menu"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@
|
|||
justify-content: center;
|
||||
text-shadow: 0 0 10px black;
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $accentColor;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ export default function LanguageSwitcher() {
|
|||
const { languages, originalPath } = useI18next();
|
||||
|
||||
return (
|
||||
<div className={styles.languageModal} id="languageChooser" role="dialog">
|
||||
<div
|
||||
className={styles.languageModal}
|
||||
id="languageChooser"
|
||||
role="dialog"
|
||||
>
|
||||
<div className={styles.languageModalInner}>
|
||||
<h2>
|
||||
Languages (
|
||||
|
|
|
|||
|
|
@ -7,44 +7,55 @@ import { createPortal } from "react-dom";
|
|||
|
||||
import * as styles from "./navigation.module.scss";
|
||||
import { X } from "lucide-react";
|
||||
import { Fade as Hamburger } from 'hamburger-react';
|
||||
import { Fade as Hamburger } from "hamburger-react";
|
||||
|
||||
const OffScreenNav = ({active, close}) => {
|
||||
if(typeof window === "undefined") {
|
||||
const OffScreenNav = ({ active, close }) => {
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}>
|
||||
<div className={styles.inner}>
|
||||
<button className={styles.close} onClick={close}><X/></button>
|
||||
<span><Trans>menu</Trans></span>
|
||||
<Link to="/" activeClassName={styles.active}>
|
||||
<Trans>home</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/about"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>about</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/projects"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>projects</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnSocial"
|
||||
to="/social"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
</div>
|
||||
</div>, window.document.body)
|
||||
}
|
||||
return createPortal(
|
||||
<div
|
||||
className={
|
||||
styles.offscreenNav + " " + (active ? styles.active : "")
|
||||
}
|
||||
>
|
||||
<div className={styles.inner}>
|
||||
<button className={styles.close} onClick={close}>
|
||||
<X />
|
||||
</button>
|
||||
<span>
|
||||
<Trans>menu</Trans>
|
||||
</span>
|
||||
<Link to="/" activeClassName={styles.active}>
|
||||
<Trans>home</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/about"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>about</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/projects"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>projects</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnSocial"
|
||||
to="/social"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
</div>
|
||||
</div>,
|
||||
window.document.body
|
||||
);
|
||||
};
|
||||
|
||||
const Navigation = ({ isHome }) => {
|
||||
let [atTop, setAtTop] = useState(false);
|
||||
|
|
@ -96,7 +107,10 @@ const Navigation = ({ isHome }) => {
|
|||
}
|
||||
>
|
||||
<nav className={styles.topBarInner}>
|
||||
<OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
|
||||
<OffScreenNav
|
||||
active={offscreenNavActive}
|
||||
close={closeOffscreenNav}
|
||||
/>
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
|
|
@ -108,7 +122,11 @@ const Navigation = ({ isHome }) => {
|
|||
}
|
||||
`}
|
||||
render={(data) => (
|
||||
<Link to="/" activeClassName={styles.active} className={styles.logo}>
|
||||
<Link
|
||||
to="/"
|
||||
activeClassName={styles.active}
|
||||
className={styles.logo}
|
||||
>
|
||||
{data.site.siteMetadata.title}
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -135,7 +153,14 @@ const Navigation = ({ isHome }) => {
|
|||
>
|
||||
<Trans>social</Trans>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
color: white;
|
||||
overflow: auto;
|
||||
opacity: 0;
|
||||
transition: opacity .25s, left .25s;
|
||||
transition: opacity 0.25s, left 0.25s;
|
||||
pointer-events: none;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: rgba($lightBackground, 0.9);
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
border-left: 3px solid white;
|
||||
border-right: 3px solid white;
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
@media (prefers-color-scheme: light) {
|
||||
border-left: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
display: none;
|
||||
height: 43px;
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
&:not(.logo) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import PropTypes from "prop-types";
|
||||
import { Helmet } from "gatsby-plugin-react-i18next";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
import { useLocation } from "@reach/router"
|
||||
import { useLocation } from "@reach/router";
|
||||
import { useTranslation } from "gatsby-plugin-react-i18next";
|
||||
import useSiteMetadata from "../helpers/useSiteMetadata";
|
||||
|
||||
|
|
@ -27,58 +27,60 @@ function SEO({ description, meta, title, speakable, image, children }) {
|
|||
const siteMeta = useSiteMetadata();
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
>
|
||||
<Helmet title={title} titleTemplate={`%s | ${site.siteMetadata.title}`}>
|
||||
<meta
|
||||
name="battery-savings"
|
||||
content="allow-reduced-framerate"
|
||||
></meta>
|
||||
{
|
||||
[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: site.siteMetadata.keywords,
|
||||
},
|
||||
].concat(meta).map((m) => {
|
||||
return <meta key={m.name} name={m.name} content={m.content}></meta>;
|
||||
})
|
||||
}
|
||||
{[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: site.siteMetadata.keywords,
|
||||
},
|
||||
]
|
||||
.concat(meta)
|
||||
.map((m) => {
|
||||
return (
|
||||
<meta
|
||||
key={m.name}
|
||||
name={m.name}
|
||||
content={m.content}
|
||||
></meta>
|
||||
);
|
||||
})}
|
||||
<script
|
||||
async
|
||||
defer
|
||||
|
|
@ -86,40 +88,45 @@ function SEO({ description, meta, title, speakable, image, children }) {
|
|||
src="https://analytics.kevink.dev/js/plausible.js"
|
||||
></script>
|
||||
|
||||
{
|
||||
image && [
|
||||
<meta name="twitter:image" content={siteMeta.siteUrl + image} key="twimg"/>,
|
||||
<meta name="og:image" content={siteMeta.siteUrl + image} key="ogimg"/>,
|
||||
]
|
||||
}
|
||||
|
||||
{image && [
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content={siteMeta.siteUrl + image}
|
||||
key="twimg"
|
||||
/>,
|
||||
<meta
|
||||
name="og:image"
|
||||
content={siteMeta.siteUrl + image}
|
||||
key="ogimg"
|
||||
/>,
|
||||
]}
|
||||
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "WebPage",
|
||||
"name": title,
|
||||
"url": siteMeta.siteUrl+location.pathname,
|
||||
"speakable": speakable,
|
||||
"image": siteMeta.siteUrl + image,
|
||||
"about": {
|
||||
name: title,
|
||||
url: siteMeta.siteUrl + location.pathname,
|
||||
speakable: speakable,
|
||||
image: siteMeta.siteUrl + image,
|
||||
about: {
|
||||
"@type": "Person",
|
||||
"name": siteMeta.givenName + " " + siteMeta.familyName,
|
||||
"givenName": siteMeta.givenName,
|
||||
"familyName": siteMeta.familyName,
|
||||
"birthDate": siteMeta.birthDate,
|
||||
"address": siteMeta.address,
|
||||
"email": siteMeta.contactEmail,
|
||||
"telephone": siteMeta.contactPhone,
|
||||
"gender": siteMeta.gender,
|
||||
"height": siteMeta.height,
|
||||
"nationality": {
|
||||
name: siteMeta.givenName + " " + siteMeta.familyName,
|
||||
givenName: siteMeta.givenName,
|
||||
familyName: siteMeta.familyName,
|
||||
birthDate: siteMeta.birthDate,
|
||||
address: siteMeta.address,
|
||||
email: siteMeta.contactEmail,
|
||||
telephone: siteMeta.contactPhone,
|
||||
gender: siteMeta.gender,
|
||||
height: siteMeta.height,
|
||||
nationality: {
|
||||
"@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>
|
||||
|
||||
|
|
@ -139,7 +146,7 @@ SEO.propTypes = {
|
|||
title: PropTypes.string.isRequired,
|
||||
speakable: PropTypes.any,
|
||||
image: PropTypes.string,
|
||||
children: PropTypes.any
|
||||
children: PropTypes.any,
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
|
||||
const useSiteMetadata = () => {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
keywords
|
||||
author
|
||||
siteUrl
|
||||
payPalMail
|
||||
contactEmail
|
||||
contactPhone
|
||||
mapsLink
|
||||
contactTwitter
|
||||
contactGitHub
|
||||
contactMastodon
|
||||
contactMastodonHref
|
||||
givenName
|
||||
familyName
|
||||
birthDate
|
||||
address
|
||||
gender
|
||||
height
|
||||
nationality
|
||||
sameAs
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
);
|
||||
return site.siteMetadata;
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
keywords
|
||||
author
|
||||
siteUrl
|
||||
payPalMail
|
||||
contactEmail
|
||||
contactPhone
|
||||
mapsLink
|
||||
contactTwitter
|
||||
contactGitHub
|
||||
contactMastodon
|
||||
contactMastodonHref
|
||||
givenName
|
||||
familyName
|
||||
birthDate
|
||||
address
|
||||
gender
|
||||
height
|
||||
nationality
|
||||
sameAs
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
);
|
||||
return site.siteMetadata;
|
||||
};
|
||||
|
||||
export default useSiteMetadata;
|
||||
export default useSiteMetadata;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ class Layout extends React.Component {
|
|||
title={this.props.title}
|
||||
image={this.props.image}
|
||||
speakable={this.props.speakable}
|
||||
>{this.props.seoAdditional ?? null}</SEO>
|
||||
>
|
||||
{this.props.seoAdditional ?? null}
|
||||
</SEO>
|
||||
<Navigation isHome={this.props.transparentTopbar} />
|
||||
<div id="content" role="main">
|
||||
{this.props.children}
|
||||
|
|
@ -61,7 +63,7 @@ Layout.propTypes = {
|
|||
children: PropTypes.any.isRequired,
|
||||
seoAdditional: PropTypes.any,
|
||||
image: PropTypes.string,
|
||||
speakable: PropTypes.any
|
||||
speakable: PropTypes.any,
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
@import "~@fontsource/fira-code/700.css";
|
||||
@import "../variables";
|
||||
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -69,7 +67,6 @@ section > article,
|
|||
}
|
||||
|
||||
article {
|
||||
|
||||
a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,10 @@ export const query = graphql`
|
|||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
|
||||
gatsbyImageData(
|
||||
placeholder: BLURRED
|
||||
layout: FULL_WIDTH
|
||||
)
|
||||
}
|
||||
}
|
||||
shortDescription
|
||||
|
|
@ -65,7 +68,7 @@ export const query = graphql`
|
|||
`;
|
||||
|
||||
const AboutPage = (props) => {
|
||||
const {t} = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
|
@ -99,15 +102,15 @@ const AboutPage = (props) => {
|
|||
let file = props.data.file;
|
||||
|
||||
return (
|
||||
<Layout title={t("about")} description={t("siteDescription")}
|
||||
image={"/owner.jpg"}
|
||||
speakable={{
|
||||
"@type": "SpeakableSpecification",
|
||||
"xPath": [
|
||||
"article"
|
||||
]
|
||||
}}>
|
||||
|
||||
<Layout
|
||||
title={t("about")}
|
||||
description={t("siteDescription")}
|
||||
image={"/owner.jpg"}
|
||||
speakable={{
|
||||
"@type": "SpeakableSpecification",
|
||||
xPath: ["article"],
|
||||
}}
|
||||
>
|
||||
<section className={styles.aboutSection} id="about">
|
||||
<article>
|
||||
<div className={styles.aboutText}>
|
||||
|
|
@ -166,10 +169,20 @@ const AboutPage = (props) => {
|
|||
projectStyles.projectCardImage
|
||||
}
|
||||
>
|
||||
<div className={
|
||||
projectStyles.projectCardBg
|
||||
}>
|
||||
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
|
||||
<div
|
||||
className={
|
||||
projectStyles.projectCardBg
|
||||
}
|
||||
>
|
||||
<GatsbyImage
|
||||
image={
|
||||
project.image
|
||||
.childImageSharp
|
||||
.gatsbyImageData
|
||||
}
|
||||
objectFit="cover"
|
||||
style={{ height: "100%" }}
|
||||
></GatsbyImage>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
|
|
@ -193,8 +206,7 @@ const AboutPage = (props) => {
|
|||
})}
|
||||
</div>
|
||||
<Link to="/projects" className={styles.seeMoreButton}>
|
||||
<Trans>seeMore</Trans>{" "}
|
||||
<ArrowRight/>
|
||||
<Trans>seeMore</Trans> <ArrowRight />
|
||||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
|
|
@ -203,7 +215,7 @@ const AboutPage = (props) => {
|
|||
<span>
|
||||
<Trans>donationCatchphrase</Trans>
|
||||
</span>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</div>
|
||||
</Link>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ const DonatePage = (props) => {
|
|||
}
|
||||
>
|
||||
<span>Donate using PayPal</span>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ export const query = graphql`
|
|||
url
|
||||
localImage {
|
||||
childImageSharp {
|
||||
gatsbyImageData(height: 300, width: 300, placeholder: BLURRED)
|
||||
gatsbyImageData(
|
||||
height: 300
|
||||
width: 300
|
||||
placeholder: BLURRED
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,8 +79,14 @@ const FriendsPage = ({ data }) => {
|
|||
"#image"
|
||||
}
|
||||
>
|
||||
<div className={styles.friendBg}>
|
||||
<GatsbyImage image={getImage(friend.localImage)}></GatsbyImage>
|
||||
<div
|
||||
className={styles.friendBg}
|
||||
>
|
||||
<GatsbyImage
|
||||
image={getImage(
|
||||
friend.localImage
|
||||
)}
|
||||
></GatsbyImage>
|
||||
</div>
|
||||
<span
|
||||
className={
|
||||
|
|
@ -88,7 +98,7 @@ const FriendsPage = ({ data }) => {
|
|||
friend.name +
|
||||
"#name"
|
||||
}
|
||||
>
|
||||
>
|
||||
{friend.name}
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -123,7 +133,7 @@ const FriendsPage = ({ data }) => {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Globe2 height={20}/>{" "}
|
||||
<Globe2 height={20} />{" "}
|
||||
{friend.url}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,15 @@ import { StaticImage } from "gatsby-plugin-image";
|
|||
|
||||
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";
|
||||
|
||||
export const query = graphql`
|
||||
|
|
@ -39,7 +47,7 @@ export const query = graphql`
|
|||
`;
|
||||
|
||||
const IndexPage = (props) => {
|
||||
const {t} = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
|
@ -74,14 +82,16 @@ const IndexPage = (props) => {
|
|||
let meta = props.data.site.siteMetadata;
|
||||
|
||||
return (
|
||||
<Layout title="Kevin Kandlbinder" transparentTopbar={true} description={t("siteDescription")}
|
||||
image={"/owner.jpg"}
|
||||
speakable={{
|
||||
"@type": "SpeakableSpecification",
|
||||
"xPath": [
|
||||
"article"
|
||||
]
|
||||
}}>
|
||||
<Layout
|
||||
title="Kevin Kandlbinder"
|
||||
transparentTopbar={true}
|
||||
description={t("siteDescription")}
|
||||
image={"/owner.jpg"}
|
||||
speakable={{
|
||||
"@type": "SpeakableSpecification",
|
||||
xPath: ["article"],
|
||||
}}
|
||||
>
|
||||
<section className={styles.heroSection}>
|
||||
<div
|
||||
className={styles.heroSectionBg}
|
||||
|
|
@ -89,10 +99,15 @@ const IndexPage = (props) => {
|
|||
></div>
|
||||
<div className={styles.heroSectionBgOver}></div>
|
||||
<div className={styles.profile + " profile"}>
|
||||
<div
|
||||
className={styles.profileImage}
|
||||
>
|
||||
<StaticImage src={"../../content/images/kevin-kandlbinder-04.jpg"} width={250} height={350} placeholder="blurred"></StaticImage>
|
||||
<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}>
|
||||
|
|
@ -122,7 +137,7 @@ const IndexPage = (props) => {
|
|||
href={"mailto:" + meta.contactEmail}
|
||||
rel="me"
|
||||
>
|
||||
<Mail width={20}/>
|
||||
<Mail width={20} />
|
||||
{meta.contactEmail}
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -140,7 +155,7 @@ const IndexPage = (props) => {
|
|||
rel="noreferrer me"
|
||||
target="_blank"
|
||||
>
|
||||
<AtSign width={20}/>
|
||||
<AtSign width={20} />
|
||||
{meta.contactMastodon}
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -151,7 +166,7 @@ const IndexPage = (props) => {
|
|||
rel="noreferrer me"
|
||||
target="_blank"
|
||||
>
|
||||
<Github width={20}/>
|
||||
<Github width={20} />
|
||||
{meta.contactGitHub}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -161,24 +176,30 @@ const IndexPage = (props) => {
|
|||
<div className={styles.landingCta}>
|
||||
<Link to={"/projects"}>
|
||||
<div>
|
||||
<span className={styles.ctaAccent}>{t("explore")}</span>{" "}
|
||||
<span className={styles.ctaAccent}>
|
||||
{t("explore")}
|
||||
</span>{" "}
|
||||
<span>{t("myProjects")}</span>
|
||||
</div>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</Link>
|
||||
<Link to={"/social"}>
|
||||
<div>
|
||||
<span className={styles.ctaAccent}>{t("discover")}</span>{" "}
|
||||
<span className={styles.ctaAccent}>
|
||||
{t("discover")}
|
||||
</span>{" "}
|
||||
<span>{t("mySocials")}</span>
|
||||
</div>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</Link>
|
||||
<Link to={"/about"}>
|
||||
<div>
|
||||
<span className={styles.ctaAccent}>{t("learn")}</span>{" "}
|
||||
<span className={styles.ctaAccent}>
|
||||
{t("learn")}
|
||||
</span>{" "}
|
||||
<span>{t("moreAboutMe")}</span>
|
||||
</div>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -190,10 +211,9 @@ const IndexPage = (props) => {
|
|||
>
|
||||
<div>
|
||||
<span>
|
||||
<Camera/>{" "}
|
||||
<Trans>homeImageCredit</Trans>
|
||||
<Camera /> <Trans>homeImageCredit</Trans>
|
||||
</span>
|
||||
<ArrowRight/>
|
||||
<ArrowRight />
|
||||
</div>
|
||||
</a>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
#0f0a3c 100%
|
||||
);
|
||||
background-blend-mode: screen, overlay, hard-light, normal;
|
||||
|
||||
}
|
||||
|
||||
.heroSectionBgOver {
|
||||
|
|
@ -60,10 +59,9 @@
|
|||
/*background-color: $background;
|
||||
transition: background-color 0.25s, box-shadow 0.25s;*/
|
||||
|
||||
@media(max-width: 950px) {
|
||||
@media (max-width: 950px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $lightBackground;
|
||||
|
|
@ -74,8 +72,8 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -92,7 +90,7 @@
|
|||
border-radius: 10px;
|
||||
align-items: center;
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
@media (max-width: 1000px) {
|
||||
margin: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
|
@ -315,9 +313,7 @@
|
|||
color: #886af5;
|
||||
}
|
||||
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
&.skill_os {
|
||||
color: #2b66e5;
|
||||
}
|
||||
|
|
@ -329,15 +325,14 @@
|
|||
&.skill_framework {
|
||||
color: #db1e31;
|
||||
}
|
||||
|
||||
|
||||
&.skill_platform {
|
||||
color: #aa4f12;
|
||||
}
|
||||
|
||||
|
||||
&.skill_program {
|
||||
color: #17681b;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@ export const query = graphql`
|
|||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
|
||||
gatsbyImageData(
|
||||
placeholder: BLURRED
|
||||
layout: FULL_WIDTH
|
||||
)
|
||||
}
|
||||
publicURL
|
||||
}
|
||||
|
|
@ -43,27 +46,33 @@ const ProjectsPage = ({ data }) => {
|
|||
const { t } = useI18next();
|
||||
const meta = useSiteMetadata();
|
||||
return (
|
||||
<Layout title={t("projects")} description={t("projectsDescription")} seoAdditional={
|
||||
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify(
|
||||
{
|
||||
"@context":"https://schema.org",
|
||||
"@type":"ItemList",
|
||||
"itemListElement":data.allProjectsJson.nodes.map((project, i) => {
|
||||
return {
|
||||
"@type":"ListItem",
|
||||
"position":i,
|
||||
"url": meta.siteUrl+"/projects/"+project.urlname,
|
||||
"image": project.image.publicURL,
|
||||
"name": project.name,
|
||||
"description": project.shortDescription
|
||||
<Layout
|
||||
title={t("projects")}
|
||||
description={t("projectsDescription")}
|
||||
seoAdditional={
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ItemList",
|
||||
itemListElement: data.allProjectsJson.nodes.map(
|
||||
(project, i) => {
|
||||
return {
|
||||
"@type": "ListItem",
|
||||
position: i,
|
||||
url:
|
||||
meta.siteUrl +
|
||||
"/projects/" +
|
||||
project.urlname,
|
||||
image: project.image.publicURL,
|
||||
name: project.name,
|
||||
description: project.shortDescription,
|
||||
};
|
||||
}
|
||||
})
|
||||
}
|
||||
)}
|
||||
</script>
|
||||
}>
|
||||
),
|
||||
})}
|
||||
</script>
|
||||
}
|
||||
>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
|
|
@ -82,13 +91,17 @@ const ProjectsPage = ({ data }) => {
|
|||
key={project.lang + project.urlname}
|
||||
to={"/projects/" + project.urlname}
|
||||
>
|
||||
<div
|
||||
className={styles.projectCardImage}
|
||||
>
|
||||
<div className={
|
||||
styles.projectCardBg
|
||||
}>
|
||||
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} objectFit="cover" style={{height: "100%"}}></GatsbyImage>
|
||||
<div className={styles.projectCardImage}>
|
||||
<div className={styles.projectCardBg}>
|
||||
<GatsbyImage
|
||||
image={
|
||||
project.image
|
||||
.childImageSharp
|
||||
.gatsbyImageData
|
||||
}
|
||||
objectFit="cover"
|
||||
style={{ height: "100%" }}
|
||||
></GatsbyImage>
|
||||
</div>
|
||||
<div className={styles.projectCardMeta}>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const query = graphql`
|
|||
url
|
||||
localImage {
|
||||
childImageSharp {
|
||||
gatsbyImageData(height: 300, width: 300)
|
||||
gatsbyImageData(height: 300, width: 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,11 +59,13 @@ const SocialPage = ({ data }) => {
|
|||
rel="noreferrer me"
|
||||
key={social.url}
|
||||
>
|
||||
<div
|
||||
className={styles.socialImage}
|
||||
>
|
||||
<div className={styles.socialImage}>
|
||||
<div className={styles.socialBg}>
|
||||
<GatsbyImage image={getImage(social.localImage)}></GatsbyImage>
|
||||
<GatsbyImage
|
||||
image={getImage(
|
||||
social.localImage
|
||||
)}
|
||||
></GatsbyImage>
|
||||
</div>
|
||||
<span className={styles.socialName}>
|
||||
{social.platformName}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,10 @@ export const query = graphql`
|
|||
}
|
||||
image {
|
||||
childImageSharp {
|
||||
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
|
||||
gatsbyImageData(
|
||||
placeholder: BLURRED
|
||||
layout: FULL_WIDTH
|
||||
)
|
||||
}
|
||||
publicURL
|
||||
}
|
||||
|
|
@ -69,10 +72,14 @@ const ProjectTemplate = ({ data }) => {
|
|||
>
|
||||
<section className={styles.projectHeader}>
|
||||
<div style={{ paddingTop: 0 }}>
|
||||
<div
|
||||
className={styles.headerBackground}
|
||||
>
|
||||
<GatsbyImage image={project.image.childImageSharp.gatsbyImageData} style={{width: "100%", height: "100%"}} objectFit="cover"></GatsbyImage>
|
||||
<div className={styles.headerBackground}>
|
||||
<GatsbyImage
|
||||
image={
|
||||
project.image.childImageSharp.gatsbyImageData
|
||||
}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
objectFit="cover"
|
||||
></GatsbyImage>
|
||||
</div>
|
||||
<header>
|
||||
<div className={styles.headerInner}>
|
||||
|
|
@ -103,7 +110,7 @@ const ProjectTemplate = ({ data }) => {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Github height={15}/>{" "}
|
||||
<Github height={15} />{" "}
|
||||
<Trans>projectViewGitHub</Trans>
|
||||
</a>
|
||||
) : null}
|
||||
|
|
@ -113,7 +120,7 @@ const ProjectTemplate = ({ data }) => {
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<ExternalLink height={15}/>{" "}
|
||||
<ExternalLink height={15} />{" "}
|
||||
<Trans>projectViewWebsite</Trans>
|
||||
</a>
|
||||
) : null}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue