kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-15 09:02:01 +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",
}, },
}, },
{ {

86
locales/de/translation.json
View file

@ -1,45 +1,45 @@
{ {
"siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.", "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.",
"imprint": "Impressum", "imprint": "Impressum",
"datasec": "Datenschutz", "datasec": "Datenschutz",
"disclaimer": "Disclaimer", "disclaimer": "Disclaimer",
"projects": "Projekte", "projects": "Projekte",
"project": "Projekt", "project": "Projekt",
"social": "Soziales", "social": "Soziales",
"homeHello": "Hallo, ich bin", "homeHello": "Hallo, ich bin",
"homeMe": "Ich bin", "homeMe": "Ich bin",
"homeWebDeveloper": "Web Developer", "homeWebDeveloper": "Web Developer",
"homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland", "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
"donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.", "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
"homeImageCredit": "Portrait aufgenommen von Jannik Kiel", "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
"de": "Deutsch", "de": "Deutsch",
"en": "Englisch", "en": "Englisch",
"projectAboutHeader": "Über {{projectName}}", "projectAboutHeader": "Über {{projectName}}",
"projectViewGitHub": "Auf GitHub anschauen", "projectViewGitHub": "Auf GitHub anschauen",
"projectViewWebsite": "Projekt-Website anschauen", "projectViewWebsite": "Projekt-Website anschauen",
"projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.", "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.",
"projectView": "Anschauen", "projectView": "Anschauen",
"socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!", "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde</1>!",
"socialDescription": "Finde mich auf anderen Plattformen!", "socialDescription": "Finde mich auf anderen Plattformen!",
"friends": "Freunde", "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.", "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!", "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!", "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.", "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", "donate": "Spenden",
"featuredProjects": "Vorgestellte Projekte", "featuredProjects": "Vorgestellte Projekte",
"seeMore": "Mehr Projekte erkunden", "seeMore": "Mehr Projekte erkunden",
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!", "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:", "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
"sponsorGitHub": "Über GitHub unterstützen", "sponsorGitHub": "Über GitHub unterstützen",
"mySkills": "Meine Fähigkeiten", "mySkills": "Meine Fähigkeiten",
"about": "Über", "about": "Über",
"explore": "Erkunde", "explore": "Erkunde",
"myProjects": "meine Projekte", "myProjects": "meine Projekte",
"discover": "Entdecke", "discover": "Entdecke",
"mySocials": "meine Accounts", "mySocials": "meine Accounts",
"learn": "Erfahre", "learn": "Erfahre",
"moreAboutMe": "mehr über mich", "moreAboutMe": "mehr über mich",
"home": "Home", "home": "Home",
"menu": "Menü" "menu": "Menü"
} }

86
locales/en/translation.json
View file

@ -1,45 +1,45 @@
{ {
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.", "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
"imprint": "Imprint", "imprint": "Imprint",
"datasec": "Data Protection", "datasec": "Data Protection",
"disclaimer": "Disclaimer", "disclaimer": "Disclaimer",
"projects": "Projects", "projects": "Projects",
"project": "Project", "project": "Project",
"social": "Social", "social": "Social",
"homeHello": "Hello, I am", "homeHello": "Hello, I am",
"homeMe": "I am", "homeMe": "I am",
"homeWebDeveloper": "a web developer", "homeWebDeveloper": "a web developer",
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany", "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
"donationCatchphrase": "Like what you're seeing? Consider donating.", "donationCatchphrase": "Like what you're seeing? Consider donating.",
"homeImageCredit": "Portrait taken by Jannik Kiel", "homeImageCredit": "Portrait taken by Jannik Kiel",
"de": "German", "de": "German",
"en": "English", "en": "English",
"projectAboutHeader": "About {{projectName}}", "projectAboutHeader": "About {{projectName}}",
"projectViewGitHub": "View on GitHub", "projectViewGitHub": "View on GitHub",
"projectViewWebsite": "View Project-Website", "projectViewWebsite": "View Project-Website",
"projectsDescription": "This is what I am working on or have worked on.", "projectsDescription": "This is what I am working on or have worked on.",
"projectView": "View", "projectView": "View",
"socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!", "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
"socialDescription": "Find me on other platforms!", "socialDescription": "Find me on other platforms!",
"friends": "Friends", "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.", "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", "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.", "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!", "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!", "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", "featuredProjects": "Featured Projects",
"seeMore": "Explore more Projects", "seeMore": "Explore more Projects",
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!", "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:", "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
"sponsorGitHub": "Sponsor using GitHub", "sponsorGitHub": "Sponsor using GitHub",
"mySkills": "My Skills", "mySkills": "My Skills",
"about": "About", "about": "About",
"explore": "Explore", "explore": "Explore",
"myProjects": "my projects", "myProjects": "my projects",
"discover": "Discover", "discover": "Discover",
"mySocials": "my socials", "mySocials": "my socials",
"learn": "Learn", "learn": "Learn",
"moreAboutMe": "more about me", "moreAboutMe": "more about me",
"home": "Home", "home": "Home",
"menu": "Menu" "menu": "Menu"
} }

4
src/_mixins.scss
View file

@ -54,10 +54,10 @@
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;
} }
svg { svg {
margin-left: 10px; margin-left: 10px;
} }

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 (

99
src/components/navigation.js
View file

@ -7,44 +7,55 @@ 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.inner}> <div
<button className={styles.close} onClick={close}><X/></button> className={
<span><Trans>menu</Trans></span> styles.offscreenNav + " " + (active ? styles.active : "")
<Link to="/" activeClassName={styles.active}> }
<Trans>home</Trans> >
</Link> <div className={styles.inner}>
<Link <button className={styles.close} onClick={close}>
id="navBtnProjects" <X />
to="/about" </button>
activeClassName={styles.active} <span>
> <Trans>menu</Trans>
<Trans>about</Trans> </span>
</Link> <Link to="/" activeClassName={styles.active}>
<Link <Trans>home</Trans>
id="navBtnProjects" </Link>
to="/projects" <Link
activeClassName={styles.active} id="navBtnProjects"
> to="/about"
<Trans>projects</Trans> activeClassName={styles.active}
</Link> >
<Link <Trans>about</Trans>
id="navBtnSocial" </Link>
to="/social" <Link
activeClassName={styles.active} id="navBtnProjects"
> to="/projects"
<Trans>social</Trans> activeClassName={styles.active}
</Link> >
</div> <Trans>projects</Trans>
</div>, window.document.body) </Link>
} <Link
id="navBtnSocial"
to="/social"
activeClassName={styles.active}
>
<Trans>social</Trans>
</Link>
</div>
</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;
} }

157
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,58 +27,60 @@ 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, },
}, {
{ property: `og:title`,
property: `og:title`, content: title,
content: title, },
}, {
{ property: `og:description`,
property: `og:description`, content: metaDescription,
content: metaDescription, },
}, {
{ property: `og:type`,
property: `og:type`, content: `website`,
content: `website`, },
}, {
{ name: `twitter:card`,
name: `twitter:card`, content: `summary`,
content: `summary`, },
}, {
{ name: `twitter:creator`,
name: `twitter:creator`, content: site.siteMetadata.author,
content: site.siteMetadata.author, },
}, {
{ name: `twitter:title`,
name: `twitter:title`, content: title,
content: title, },
}, {
{ name: `twitter:description`,
name: `twitter:description`, content: metaDescription,
content: metaDescription, },
}, {
{ name: "keywords",
name: "keywords", content: site.siteMetadata.keywords,
content: site.siteMetadata.keywords, },
}, ]
].concat(meta).map((m) => { .concat(meta)
return <meta key={m.name} name={m.name} content={m.content}></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", image: siteMeta.siteUrl + "/owner.jpg",
"sameAs": siteMeta.sameAs 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;

66
src/helpers/useSiteMetadata.js
View file

@ -1,37 +1,37 @@
import { useStaticQuery, graphql } from 'gatsby'; import { useStaticQuery, graphql } from "gatsby";
const useSiteMetadata = () => { const useSiteMetadata = () => {
const { site } = useStaticQuery( const { site } = useStaticQuery(
graphql` graphql`
query { query {
site { site {
siteMetadata { siteMetadata {
title title
keywords keywords
author author
siteUrl siteUrl
payPalMail payPalMail
contactEmail contactEmail
contactPhone contactPhone
mapsLink mapsLink
contactTwitter contactTwitter
contactGitHub contactGitHub
contactMastodon contactMastodon
contactMastodonHref contactMastodonHref
givenName givenName
familyName familyName
birthDate birthDate
address address
gender gender
height height
nationality nationality
sameAs sameAs
} }
} }
} }
`, `
); );
return site.siteMetadata; return site.siteMetadata;
}; };
export default useSiteMetadata; export default useSiteMetadata;

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;

48
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
image={"/owner.jpg"} title={t("about")}
speakable={{ description={t("siteDescription")}
"@type": "SpeakableSpecification", image={"/owner.jpg"}
"xPath": [ speakable={{
"article" "@type": "SpeakableSpecification",
] xPath: ["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
projectStyles.projectCardBg className={
}> 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>

20
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={
@ -88,7 +98,7 @@ const FriendsPage = ({ data }) => {
friend.name + friend.name +
"#name" "#name"
} }
> >
{friend.name} {friend.name}
</span> </span>
<span <span
@ -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>

72
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
image={"/owner.jpg"} title="Kevin Kandlbinder"
speakable={{ transparentTopbar={true}
"@type": "SpeakableSpecification", description={t("siteDescription")}
"xPath": [ image={"/owner.jpg"}
"article" speakable={{
] "@type": "SpeakableSpecification",
}}> xPath: ["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>

19
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,10 +59,9 @@
/*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;
@ -74,8 +72,8 @@
position: relative; position: relative;
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;
} }
@ -329,15 +325,14 @@
&.skill_framework { &.skill_framework {
color: #db1e31; color: #db1e31;
} }
&.skill_platform { &.skill_platform {
color: #aa4f12; color: #aa4f12;
} }
&.skill_program { &.skill_program {
color: #17681b; color: #17681b;
} }
} }
} }
} }

69
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")}
<script type="application/ld+json"> description={t("projectsDescription")}
{JSON.stringify( seoAdditional={
{ <script type="application/ld+json">
"@context":"https://schema.org", {JSON.stringify({
"@type":"ItemList", "@context": "https://schema.org",
"itemListElement":data.allProjectsJson.nodes.map((project, i) => { "@type": "ItemList",
return { itemListElement: data.allProjectsJson.nodes.map(
"@type":"ListItem", (project, i) => {
"position":i, return {
"url": meta.siteUrl+"/projects/"+project.urlname, "@type": "ListItem",
"image": project.image.publicURL, position: i,
"name": project.name, url:
"description": project.shortDescription meta.siteUrl +
"/projects/" +
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

12
src/pages/social.js
View file

@ -16,7 +16,7 @@ export const query = graphql`
url url
localImage { localImage {
childImageSharp { childImageSharp {
gatsbyImageData(height: 300, width: 300) gatsbyImageData(height: 300, width: 300)
} }
} }
} }
@ -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}