mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-07 13:12:02 +02:00
Run prettier
This commit is contained in:
parent
b50b7d83c3
commit
0b5a905ae6
20 changed files with 452 additions and 352 deletions
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue