mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-13 08:02:13 +02:00
Configure & Run prettier
This commit is contained in:
GitHub
parent
79ab0bb9af
commit
420f8930fd
66 changed files with 31825 additions and 31500 deletions
|
|
@ -1,21 +1,21 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby-plugin-react-i18next";
|
||||
import Layout from "../layouts/default";
|
||||
|
||||
const NotFoundPage = () => {
|
||||
return (
|
||||
<Layout title="Not found">
|
||||
<section>
|
||||
<article>
|
||||
<h1>Page not found</h1>
|
||||
<p>
|
||||
Whoops... That page doesn't exist, so you may as well{" "}
|
||||
<Link to="/">go home</Link>.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundPage;
|
||||
import * as React from "react";
|
||||
import { Link } from "gatsby-plugin-react-i18next";
|
||||
import Layout from "../layouts/default";
|
||||
|
||||
const NotFoundPage = () => {
|
||||
return (
|
||||
<Layout title="Not found">
|
||||
<section>
|
||||
<article>
|
||||
<h1>Page not found</h1>
|
||||
<p>
|
||||
Whoops... That page doesn't exist, so you may as
|
||||
well <Link to="/">go home</Link>.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundPage;
|
||||
|
|
|
|||
|
|
@ -1,135 +1,142 @@
|
|||
import React, { useState } from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { graphql } from "gatsby";
|
||||
import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next";
|
||||
import PropTypes from "prop-types";
|
||||
import GitHubButton from "react-github-btn";
|
||||
|
||||
import * as styles from "./donate.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
siteUrl
|
||||
payPalMail
|
||||
contactGitHub
|
||||
}
|
||||
}
|
||||
file(relativePath: { eq: "images/pplogo.png" }) {
|
||||
childImageSharp {
|
||||
resize(width: 240, height: 240, fit: CONTAIN) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const DonatePage = (props) => {
|
||||
const [amount, setAmount] = useState(5);
|
||||
const { t } = useI18next();
|
||||
const { path } = React.useContext(I18nextContext);
|
||||
|
||||
const { site, file } = props.data;
|
||||
|
||||
return (
|
||||
<Layout title={t("donate")} description={t("donationCatchphrase")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>donate</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>donateDescription</Trans>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Trans>donateGitHub</Trans>
|
||||
</p>
|
||||
|
||||
<p style={{ display: "block", textAlign: "center" }}>
|
||||
<GitHubButton
|
||||
href={
|
||||
"https://github.com/sponsors/" + site.siteMetadata.contactGitHub
|
||||
}
|
||||
data-color-scheme="no-preference: light; light: dark; dark: dark;"
|
||||
data-icon="octicon-heart"
|
||||
data-size="large"
|
||||
aria-label="Sponsor @Unkn0wnCat on GitHub"
|
||||
>
|
||||
<Trans>sponsorGitHub</Trans>
|
||||
</GitHubButton>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Trans>donatePayPal</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.priceAmount}>
|
||||
<label htmlFor="priceInput" className={styles.sronly}>
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="10.00"
|
||||
step="1"
|
||||
value={amount}
|
||||
onChange={(ev) => {
|
||||
setAmount(ev.target.value);
|
||||
}}
|
||||
name="priceInput"
|
||||
id="priceInput"
|
||||
/>
|
||||
<div>€</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
className={styles.donateButton}
|
||||
rel="noopener"
|
||||
id="payPalBtn"
|
||||
href={
|
||||
"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=" +
|
||||
encodeURIComponent(site.siteMetadata.payPalMail) +
|
||||
"&item_name=" +
|
||||
encodeURIComponent(site.siteMetadata.title) +
|
||||
"¤cy_code=EUR&image_url=" +
|
||||
encodeURIComponent(
|
||||
site.siteMetadata.siteUrl + file.childImageSharp.resize.src
|
||||
) +
|
||||
"&return=" +
|
||||
encodeURIComponent(
|
||||
site.siteMetadata.siteUrl + "/" + path + "thank-you/"
|
||||
) +
|
||||
"&rm=0&cancel_return=" +
|
||||
encodeURIComponent(site.siteMetadata.siteUrl + "/" + path) +
|
||||
"&amount=" +
|
||||
amount
|
||||
}
|
||||
>
|
||||
<span>Donate using PayPal</span>
|
||||
<i className="fas fa-fw fa-chevron-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
DonatePage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default DonatePage;
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { graphql } from "gatsby";
|
||||
import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next";
|
||||
import PropTypes from "prop-types";
|
||||
import GitHubButton from "react-github-btn";
|
||||
|
||||
import * as styles from "./donate.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
siteUrl
|
||||
payPalMail
|
||||
contactGitHub
|
||||
}
|
||||
}
|
||||
file(relativePath: { eq: "images/pplogo.png" }) {
|
||||
childImageSharp {
|
||||
resize(width: 240, height: 240, fit: CONTAIN) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const DonatePage = (props) => {
|
||||
const [amount, setAmount] = useState(5);
|
||||
const { t } = useI18next();
|
||||
const { path } = React.useContext(I18nextContext);
|
||||
|
||||
const { site, file } = props.data;
|
||||
|
||||
return (
|
||||
<Layout title={t("donate")} description={t("donationCatchphrase")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>donate</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>donateDescription</Trans>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Trans>donateGitHub</Trans>
|
||||
</p>
|
||||
|
||||
<p style={{ display: "block", textAlign: "center" }}>
|
||||
<GitHubButton
|
||||
href={
|
||||
"https://github.com/sponsors/" +
|
||||
site.siteMetadata.contactGitHub
|
||||
}
|
||||
data-color-scheme="no-preference: light; light: dark; dark: dark;"
|
||||
data-icon="octicon-heart"
|
||||
data-size="large"
|
||||
aria-label="Sponsor @Unkn0wnCat on GitHub">
|
||||
<Trans>sponsorGitHub</Trans>
|
||||
</GitHubButton>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Trans>donatePayPal</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.priceAmount}>
|
||||
<label htmlFor="priceInput" className={styles.sronly}>
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="10.00"
|
||||
step="1"
|
||||
value={amount}
|
||||
onChange={(ev) => {
|
||||
setAmount(ev.target.value);
|
||||
}}
|
||||
name="priceInput"
|
||||
id="priceInput"
|
||||
/>
|
||||
<div>€</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
className={styles.donateButton}
|
||||
rel="noopener"
|
||||
id="payPalBtn"
|
||||
href={
|
||||
"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=" +
|
||||
encodeURIComponent(site.siteMetadata.payPalMail) +
|
||||
"&item_name=" +
|
||||
encodeURIComponent(site.siteMetadata.title) +
|
||||
"¤cy_code=EUR&image_url=" +
|
||||
encodeURIComponent(
|
||||
site.siteMetadata.siteUrl +
|
||||
file.childImageSharp.resize.src
|
||||
) +
|
||||
"&return=" +
|
||||
encodeURIComponent(
|
||||
site.siteMetadata.siteUrl +
|
||||
"/" +
|
||||
path +
|
||||
"thank-you/"
|
||||
) +
|
||||
"&rm=0&cancel_return=" +
|
||||
encodeURIComponent(
|
||||
site.siteMetadata.siteUrl + "/" + path
|
||||
) +
|
||||
"&amount=" +
|
||||
amount
|
||||
}>
|
||||
<span>Donate using PayPal</span>
|
||||
<i
|
||||
className="fas fa-fw fa-chevron-right"
|
||||
aria-hidden="true"></i>
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
DonatePage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default DonatePage;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,40 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.priceAmount {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
margin: 20px auto;
|
||||
border: thin solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
line-height: 40px;
|
||||
|
||||
input {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
padding-left: 10px;
|
||||
width: 1px;
|
||||
border-right: thin solid rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.donateButton {
|
||||
@include button;
|
||||
}
|
||||
|
||||
.sronly {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.priceAmount {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
margin: 20px auto;
|
||||
border: thin solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
line-height: 40px;
|
||||
|
||||
input {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
padding-left: 10px;
|
||||
width: 1px;
|
||||
border-right: thin solid rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.donateButton {
|
||||
@include button;
|
||||
}
|
||||
|
||||
.sronly {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,59 @@
|
|||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export const query = graphql`
|
||||
query GetThankYouPage($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
contactEmail
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ThankYouPage = (props) => {
|
||||
const { site } = props.data;
|
||||
|
||||
let contactEmail = site.siteMetadata.contactEmail;
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("donate")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>donateThanks</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans contactEmail={contactEmail} i18nKey="donateThanksText">
|
||||
donateThanksText
|
||||
<a href={"mailto:" + contactEmail}>{{ contactEmail }}</a>
|
||||
</Trans>
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
ThankYouPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ThankYouPage;
|
||||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export const query = graphql`
|
||||
query GetThankYouPage($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
contactEmail
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ThankYouPage = (props) => {
|
||||
const { site } = props.data;
|
||||
|
||||
let contactEmail = site.siteMetadata.contactEmail;
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("donate")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>donateThanks</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans
|
||||
contactEmail={contactEmail}
|
||||
i18nKey="donateThanksText">
|
||||
donateThanksText
|
||||
<a href={"mailto:" + contactEmail}>
|
||||
{{ contactEmail }}
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
ThankYouPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ThankYouPage;
|
||||
|
|
|
|||
|
|
@ -1,97 +1,140 @@
|
|||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./friends.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query AllFriendsQuery($language: String!) {
|
||||
allFriendsJson {
|
||||
nodes {
|
||||
name
|
||||
profession
|
||||
url
|
||||
imageURL
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FriendsPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
|
||||
/*function shuffle(a) {
|
||||
for (let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[a[i], a[j]] = [a[j], a[i]];
|
||||
}
|
||||
return a;
|
||||
}*/
|
||||
|
||||
return (
|
||||
<Layout title={t("friends")} description={t("friendsDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>social</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>friendsDescription</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.friendsList}>
|
||||
{/*shuffle(*/data.allFriendsJson.nodes/*)*/.map((friend) => {
|
||||
return (
|
||||
<div
|
||||
className={styles.friendProfile}
|
||||
key={friend.url + "#" + friend.name}
|
||||
>
|
||||
<div
|
||||
className={styles.friendImage}
|
||||
style={{ backgroundImage: "url(" + friend.imageURL + ")" }}
|
||||
key={friend.url + "#" + friend.name + "#image"}
|
||||
>
|
||||
<span className={styles.friendName} key={friend.url + "#" + friend.name + "#name"}>{friend.name}</span>
|
||||
<span className={styles.friendTitle} key={friend.url + "#" + friend.name + "#profession"}>
|
||||
{friend.profession}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.contactLinks} key={friend.url + "#" + friend.name + "#links"}>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={friend.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="fas fa-globe-europe" aria-hidden="true"></i>{" "}
|
||||
{friend.url}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
FriendsPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default FriendsPage;
|
||||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./friends.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query AllFriendsQuery($language: String!) {
|
||||
allFriendsJson {
|
||||
nodes {
|
||||
name
|
||||
profession
|
||||
url
|
||||
imageURL
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FriendsPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
|
||||
/*function shuffle(a) {
|
||||
for (let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[a[i], a[j]] = [a[j], a[i]];
|
||||
}
|
||||
return a;
|
||||
}*/
|
||||
|
||||
return (
|
||||
<Layout title={t("friends")} description={t("friendsDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>social</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>friendsDescription</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.friendsList}>
|
||||
{
|
||||
/*shuffle(*/ data.allFriendsJson.nodes /*)*/
|
||||
.map((friend) => {
|
||||
return (
|
||||
<div
|
||||
className={styles.friendProfile}
|
||||
key={
|
||||
friend.url + "#" + friend.name
|
||||
}>
|
||||
<div
|
||||
className={styles.friendImage}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" +
|
||||
friend.imageURL +
|
||||
")",
|
||||
}}
|
||||
key={
|
||||
friend.url +
|
||||
"#" +
|
||||
friend.name +
|
||||
"#image"
|
||||
}>
|
||||
<span
|
||||
className={
|
||||
styles.friendName
|
||||
}
|
||||
key={
|
||||
friend.url +
|
||||
"#" +
|
||||
friend.name +
|
||||
"#name"
|
||||
}>
|
||||
{friend.name}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
styles.friendTitle
|
||||
}
|
||||
key={
|
||||
friend.url +
|
||||
"#" +
|
||||
friend.name +
|
||||
"#profession"
|
||||
}>
|
||||
{friend.profession}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.contactLinks}
|
||||
key={
|
||||
friend.url +
|
||||
"#" +
|
||||
friend.name +
|
||||
"#links"
|
||||
}>
|
||||
<a
|
||||
className={
|
||||
styles.contactLink
|
||||
}
|
||||
href={friend.url}
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<i
|
||||
className="fas fa-globe-europe"
|
||||
aria-hidden="true"></i>{" "}
|
||||
{friend.url}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
FriendsPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default FriendsPage;
|
||||
|
|
|
|||
|
|
@ -1,62 +1,62 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.friendsList {
|
||||
@include flexList;
|
||||
|
||||
.friendProfile {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.friendImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.friendName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.friendTitle {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.friendBio {
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
text-align: justify;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.contactLink {
|
||||
transition: text-decoration 0.5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
|
||||
> i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.friendsList {
|
||||
@include flexList;
|
||||
|
||||
.friendProfile {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.friendImage {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.friendName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.friendTitle {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.friendBio {
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
text-align: justify;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.contactLink {
|
||||
transition: text-decoration 0.5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
|
||||
> i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,255 +1,264 @@
|
|||
import * as React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./index.module.scss";
|
||||
import * as projectStyles from "./projects.module.scss";
|
||||
|
||||
import { Trans, Link } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import { MDXRenderer } from "gatsby-plugin-mdx";
|
||||
|
||||
import anime from "animejs";
|
||||
import { tsParticles } from "tsparticles";
|
||||
|
||||
|
||||
import * as particleConfig from "./index.particles.json";
|
||||
|
||||
export const query = graphql`
|
||||
query GetMetaAndProjects($language: String) {
|
||||
site {
|
||||
siteMetadata {
|
||||
contactEmail
|
||||
contactPhone
|
||||
mapsLink
|
||||
contactTwitter
|
||||
contactGitHub
|
||||
contactMastodon
|
||||
contactMastodonHref
|
||||
}
|
||||
}
|
||||
allProjectsJson(
|
||||
filter: { lang: { eq: $language }, featured: { gte: 0 } }
|
||||
sort: { fields: featured, order: ASC }
|
||||
) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
resize(width: 400, quality: 90) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
shortDescription
|
||||
featured
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
file(
|
||||
sourceInstanceName: {eq: "textblocks"}, relativeDirectory: {eq: "home/about"}, name: {eq: $language}
|
||||
) {
|
||||
id
|
||||
childMdx {
|
||||
body
|
||||
}
|
||||
name
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const IndexPage = (props) => {
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
anime({
|
||||
targets: [
|
||||
"." + styles.profileCard + " > span",
|
||||
"." + styles.profileCard + " a",
|
||||
],
|
||||
opacity: [0, 1],
|
||||
translateX: [100, 0],
|
||||
duration: 250,
|
||||
delay: anime.stagger(20),
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImageDummy],
|
||||
translateX: [0, -3],
|
||||
translateY: [0, 3],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImage],
|
||||
translateX: [0, 4],
|
||||
translateY: [0, -4],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
|
||||
tsParticles.load("particle-container", particleConfig);
|
||||
}, []);
|
||||
|
||||
let meta = props.data.site.siteMetadata;
|
||||
let file = props.data.file;
|
||||
|
||||
return (
|
||||
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
||||
<section className={styles.heroSection}>
|
||||
<div className={styles.heroSectionBg} id="particle-container"></div>
|
||||
<div className={styles.heroSectionBgOver}></div>
|
||||
<div className={styles.profile + " profile"}>
|
||||
<div
|
||||
data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)",
|
||||
}}
|
||||
className={styles.profileImage + " lazy"}
|
||||
></div>
|
||||
<div className={styles.profileImageDummy}></div>
|
||||
<div className={styles.profileCard}>
|
||||
<span className={styles.hello}>
|
||||
<Trans>homeHello</Trans>
|
||||
</span>
|
||||
<span className={styles.name}>Kevin Kandlbinder</span>
|
||||
<span className={styles.description}>
|
||||
<Trans>homeMe</Trans>{" "}
|
||||
<span id="descriptionType">
|
||||
<Trans>homeWebDeveloper</Trans>
|
||||
</span>
|
||||
.
|
||||
</span>
|
||||
|
||||
<div className={styles.contactLinks}>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={"tel:" + meta.contactPhone}
|
||||
rel="me"
|
||||
>
|
||||
<i className="fas fa-fw fa-phone"></i>
|
||||
{meta.contactPhone}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={"mailto:" + meta.contactEmail}
|
||||
rel="me"
|
||||
>
|
||||
<i className="far fa-fw fa-envelope"></i>
|
||||
{meta.contactEmail}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={meta.mapsLink}
|
||||
rel="noreferrer "
|
||||
target="_blank"
|
||||
>
|
||||
<i className="fas fa-fw fa-map-marker-alt"></i>
|
||||
<Trans>homeMyLocation</Trans>
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={meta.contactMastodonHref}
|
||||
rel="noreferrer me"
|
||||
target="_blank"
|
||||
>
|
||||
<i className="fab fa-fw fa-mastodon"></i>
|
||||
{meta.contactMastodon}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={"https://github.com/" + meta.contactGitHub}
|
||||
rel="noreferrer me"
|
||||
target="_blank"
|
||||
>
|
||||
<i className="fab fa-fw fa-github"></i>
|
||||
{meta.contactGitHub}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="aboutSection">
|
||||
<article>
|
||||
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
|
||||
</article>
|
||||
</section>
|
||||
<a
|
||||
className={styles.creditSection}
|
||||
href="https://unsplash.com/@jannikkiel"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<i className="fas fa-fw fa-camera"></i>{" "}
|
||||
<Trans>homeImageCredit</Trans>
|
||||
</span>
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
<section className="featuredSection">
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>featuredProjects</Trans>
|
||||
</h1>
|
||||
<div className={projectStyles.projectList}>
|
||||
{props.data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link
|
||||
className={projectStyles.projectCard}
|
||||
key={project.lang + "/" + project.urlname}
|
||||
to={"/projects/" + project.urlname}
|
||||
>
|
||||
<div
|
||||
className={projectStyles.projectCardImage}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" + project.image.childImageSharp.resize.src + ")",
|
||||
}}
|
||||
>
|
||||
<div className={projectStyles.projectCardMeta}>
|
||||
<span className={projectStyles.projectCardTitle}>
|
||||
{project.name}
|
||||
</span>
|
||||
<span>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Link to="/projects" className={styles.seeMoreButton}>
|
||||
<Trans>seeMore</Trans>{" "}
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
<Link className={styles.donationSection} to="/donate">
|
||||
<div>
|
||||
<span>
|
||||
<Trans>donationCatchphrase</Trans>
|
||||
</span>
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</div>
|
||||
</Link>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
IndexPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default IndexPage;
|
||||
import * as React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./index.module.scss";
|
||||
import * as projectStyles from "./projects.module.scss";
|
||||
|
||||
import { Trans, Link } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import { MDXRenderer } from "gatsby-plugin-mdx";
|
||||
|
||||
import anime from "animejs";
|
||||
import { tsParticles } from "tsparticles";
|
||||
|
||||
import * as particleConfig from "./index.particles.json";
|
||||
|
||||
export const query = graphql`
|
||||
query GetMetaAndProjects($language: String) {
|
||||
site {
|
||||
siteMetadata {
|
||||
contactEmail
|
||||
contactPhone
|
||||
mapsLink
|
||||
contactTwitter
|
||||
contactGitHub
|
||||
contactMastodon
|
||||
contactMastodonHref
|
||||
}
|
||||
}
|
||||
allProjectsJson(
|
||||
filter: { lang: { eq: $language }, featured: { gte: 0 } }
|
||||
sort: { fields: featured, order: ASC }
|
||||
) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
resize(width: 400, quality: 90) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
shortDescription
|
||||
featured
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
file(
|
||||
sourceInstanceName: { eq: "textblocks" }
|
||||
relativeDirectory: { eq: "home/about" }
|
||||
name: { eq: $language }
|
||||
) {
|
||||
id
|
||||
childMdx {
|
||||
body
|
||||
}
|
||||
name
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const IndexPage = (props) => {
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
anime({
|
||||
targets: [
|
||||
"." + styles.profileCard + " > span",
|
||||
"." + styles.profileCard + " a",
|
||||
],
|
||||
opacity: [0, 1],
|
||||
translateX: [100, 0],
|
||||
duration: 250,
|
||||
delay: anime.stagger(20),
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImageDummy],
|
||||
translateX: [0, -3],
|
||||
translateY: [0, 3],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImage],
|
||||
translateX: [0, 4],
|
||||
translateY: [0, -4],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
|
||||
tsParticles.load("particle-container", particleConfig);
|
||||
}, []);
|
||||
|
||||
let meta = props.data.site.siteMetadata;
|
||||
let file = props.data.file;
|
||||
|
||||
return (
|
||||
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
||||
<section className={styles.heroSection}>
|
||||
<div
|
||||
className={styles.heroSectionBg}
|
||||
id="particle-container"></div>
|
||||
<div className={styles.heroSectionBgOver}></div>
|
||||
<div className={styles.profile + " profile"}>
|
||||
<div
|
||||
data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)",
|
||||
}}
|
||||
className={styles.profileImage + " lazy"}></div>
|
||||
<div className={styles.profileImageDummy}></div>
|
||||
<div className={styles.profileCard}>
|
||||
<span className={styles.hello}>
|
||||
<Trans>homeHello</Trans>
|
||||
</span>
|
||||
<span className={styles.name}>Kevin Kandlbinder</span>
|
||||
<span className={styles.description}>
|
||||
<Trans>homeMe</Trans>{" "}
|
||||
<span id="descriptionType">
|
||||
<Trans>homeWebDeveloper</Trans>
|
||||
</span>
|
||||
.
|
||||
</span>
|
||||
|
||||
<div className={styles.contactLinks}>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={"tel:" + meta.contactPhone}
|
||||
rel="me">
|
||||
<i className="fas fa-fw fa-phone"></i>
|
||||
{meta.contactPhone}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={"mailto:" + meta.contactEmail}
|
||||
rel="me">
|
||||
<i className="far fa-fw fa-envelope"></i>
|
||||
{meta.contactEmail}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={meta.mapsLink}
|
||||
rel="noreferrer "
|
||||
target="_blank">
|
||||
<i className="fas fa-fw fa-map-marker-alt"></i>
|
||||
<Trans>homeMyLocation</Trans>
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={meta.contactMastodonHref}
|
||||
rel="noreferrer me"
|
||||
target="_blank">
|
||||
<i className="fab fa-fw fa-mastodon"></i>
|
||||
{meta.contactMastodon}
|
||||
</a>
|
||||
<a
|
||||
className={styles.contactLink}
|
||||
href={
|
||||
"https://github.com/" + meta.contactGitHub
|
||||
}
|
||||
rel="noreferrer me"
|
||||
target="_blank">
|
||||
<i className="fab fa-fw fa-github"></i>
|
||||
{meta.contactGitHub}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="aboutSection">
|
||||
<article>
|
||||
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
|
||||
</article>
|
||||
</section>
|
||||
<a
|
||||
className={styles.creditSection}
|
||||
href="https://unsplash.com/@jannikkiel"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<div>
|
||||
<span>
|
||||
<i className="fas fa-fw fa-camera"></i>{" "}
|
||||
<Trans>homeImageCredit</Trans>
|
||||
</span>
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
<section className="featuredSection">
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>featuredProjects</Trans>
|
||||
</h1>
|
||||
<div className={projectStyles.projectList}>
|
||||
{props.data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link
|
||||
className={projectStyles.projectCard}
|
||||
key={project.lang + "/" + project.urlname}
|
||||
to={"/projects/" + project.urlname}>
|
||||
<div
|
||||
className={
|
||||
projectStyles.projectCardImage
|
||||
}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" +
|
||||
project.image.childImageSharp
|
||||
.resize.src +
|
||||
")",
|
||||
}}>
|
||||
<div
|
||||
className={
|
||||
projectStyles.projectCardMeta
|
||||
}>
|
||||
<span
|
||||
className={
|
||||
projectStyles.projectCardTitle
|
||||
}>
|
||||
{project.name}
|
||||
</span>
|
||||
<span>
|
||||
{project.shortDescription}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Link to="/projects" className={styles.seeMoreButton}>
|
||||
<Trans>seeMore</Trans>{" "}
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
<Link className={styles.donationSection} to="/donate">
|
||||
<div>
|
||||
<span>
|
||||
<Trans>donationCatchphrase</Trans>
|
||||
</span>
|
||||
<i className="fas fa-fw fa-chevron-right"></i>
|
||||
</div>
|
||||
</Link>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
IndexPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default IndexPage;
|
||||
|
|
|
|||
|
|
@ -1,170 +1,184 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.heroSection {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
|
||||
.heroSectionBg, .heroSectionBgOver {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
height: 600px;
|
||||
padding: 0;
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.heroSectionBg {
|
||||
/*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
|
||||
radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
|
||||
|
||||
background: linear-gradient(45deg, #000850 0%, #000320 100%), radial-gradient(100% 225% at 100% 0%, #FF6928 0%, #000000 100%), linear-gradient(225deg, #FF7A00 0%, #000000 100%), linear-gradient(135deg, #CDFFEB 10%, #CDFFEB 35%, #009F9D 35%, #009F9D 60%, #07456F 60%, #07456F 67%, #0F0A3C 67%, #0F0A3C 100%);
|
||||
background-blend-mode: screen, overlay, hard-light, normal;
|
||||
}
|
||||
|
||||
.heroSectionBgOver {
|
||||
background: linear-gradient(to bottom, transparent 80%, $background);
|
||||
}
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
width: calc(90% - 40px);
|
||||
max-width: 600px;
|
||||
max-height: 400px;
|
||||
transform: translate(-50%, 0%);
|
||||
top: 100px;
|
||||
|
||||
.hello {
|
||||
font-weight: 100;
|
||||
opacity: 0.75;
|
||||
display: block;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 100;
|
||||
font-size: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 100;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
transition: text-decoration 0.5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contactLink:hover,
|
||||
.contactLink:active {
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.contactLink > i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100% - 20px);
|
||||
transform: translate(40px, 20px);
|
||||
border-radius: 5px;
|
||||
padding: 20px 20px 20px 230px;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.profileImage,
|
||||
.profileImageDummy {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
height: 350px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: #1c1c1c;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.profileImage {
|
||||
z-index: 20;
|
||||
box-shadow: -1px 11px 33px -10px #e5502b4b;
|
||||
clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
|
||||
}
|
||||
|
||||
.profileImageDummy {
|
||||
z-index: 10;
|
||||
background: $accentColor;
|
||||
opacity: 0.2;
|
||||
clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
.profileImage,
|
||||
.profileImageDummy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
padding: 20px 20px 20px 20px;
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amazonAlexaSection,
|
||||
.donationSection,
|
||||
.hireMeSection {
|
||||
@include homeBanner;
|
||||
}
|
||||
|
||||
.creditSection {
|
||||
@include homeBanner;
|
||||
|
||||
> div {
|
||||
padding: 15px !important;
|
||||
line-height: 15px;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
|
||||
> span > i {
|
||||
line-height: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seeMoreButton {
|
||||
@include button;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.heroSection {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
|
||||
.heroSectionBg,
|
||||
.heroSectionBgOver {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
height: 600px;
|
||||
padding: 0;
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.heroSectionBg {
|
||||
/*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
|
||||
radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
|
||||
|
||||
background: linear-gradient(45deg, #000850 0%, #000320 100%),
|
||||
radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
|
||||
linear-gradient(225deg, #ff7a00 0%, #000000 100%),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#cdffeb 10%,
|
||||
#cdffeb 35%,
|
||||
#009f9d 35%,
|
||||
#009f9d 60%,
|
||||
#07456f 60%,
|
||||
#07456f 67%,
|
||||
#0f0a3c 67%,
|
||||
#0f0a3c 100%
|
||||
);
|
||||
background-blend-mode: screen, overlay, hard-light, normal;
|
||||
}
|
||||
|
||||
.heroSectionBgOver {
|
||||
background: linear-gradient(to bottom, transparent 80%, $background);
|
||||
}
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
width: calc(90% - 40px);
|
||||
max-width: 600px;
|
||||
max-height: 400px;
|
||||
transform: translate(-50%, 0%);
|
||||
top: 100px;
|
||||
|
||||
.hello {
|
||||
font-weight: 100;
|
||||
opacity: 0.75;
|
||||
display: block;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 100;
|
||||
font-size: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 100;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contactLinks {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contactLink {
|
||||
transition: text-decoration 0.5s;
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||
padding: 6px 0 6px 25px;
|
||||
color: $textColor;
|
||||
|
||||
@media (pointer: coarse), (pointer: none) {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contactLink:hover,
|
||||
.contactLink:active {
|
||||
text-decoration: underline dotted rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.contactLink > i {
|
||||
color: $accentColor;
|
||||
margin-left: -25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100% - 20px);
|
||||
transform: translate(40px, 20px);
|
||||
border-radius: 5px;
|
||||
padding: 20px 20px 20px 230px;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.profileImage,
|
||||
.profileImageDummy {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
height: 350px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: #1c1c1c;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.profileImage {
|
||||
z-index: 20;
|
||||
box-shadow: -1px 11px 33px -10px #e5502b4b;
|
||||
clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
|
||||
}
|
||||
|
||||
.profileImageDummy {
|
||||
z-index: 10;
|
||||
background: $accentColor;
|
||||
opacity: 0.2;
|
||||
clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
|
||||
}
|
||||
|
||||
@media (max-width: 590px) {
|
||||
.profileImage,
|
||||
.profileImageDummy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
padding: 20px 20px 20px 20px;
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amazonAlexaSection,
|
||||
.donationSection,
|
||||
.hireMeSection {
|
||||
@include homeBanner;
|
||||
}
|
||||
|
||||
.creditSection {
|
||||
@include homeBanner;
|
||||
|
||||
> div {
|
||||
padding: 15px !important;
|
||||
line-height: 15px;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
|
||||
> span > i {
|
||||
line-height: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seeMoreButton {
|
||||
@include button;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,107 @@
|
|||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 33,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#1b1e34"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 3
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 27.620603391810075,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 10,
|
||||
"size_min": 40,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 200,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.14994041841268327,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 0.2,
|
||||
"direction": "top",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "window",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"detectRetina": true,
|
||||
"pauseOnBlur": true,
|
||||
"pauseOnOutsideViewport": true
|
||||
}
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 33,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#1b1e34"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 3
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 27.620603391810075,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 10,
|
||||
"size_min": 40,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 200,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.14994041841268327,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 0.2,
|
||||
"direction": "top",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "window",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"detectRetina": true,
|
||||
"pauseOnBlur": true,
|
||||
"pauseOnOutsideViewport": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,59 @@
|
|||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
export const query = graphql`
|
||||
query($language: String!) {
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function ImprintPage() {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("imprint")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>imprint</Trans>
|
||||
</h1>
|
||||
|
||||
<p>Angaben gemäß § 5 TMG</p>
|
||||
<p>
|
||||
Kevin Kandlbinder
|
||||
<br />
|
||||
Eichenweg 48
|
||||
<br />
|
||||
25451 Quickborn <br />
|
||||
</p>
|
||||
<p>
|
||||
{" "}
|
||||
<strong>Vertreten durch: </strong>
|
||||
<br />
|
||||
Kevin Kandlbinder
|
||||
<br />
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kontakt:</strong> <br />
|
||||
Telefon: +49 4106 8068004
|
||||
<br />
|
||||
E-Mail: <a href="mailto:contact@kevink.dev">contact@kevink.dev</a>
|
||||
<br />
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!) {
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function ImprintPage() {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("imprint")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>imprint</Trans>
|
||||
</h1>
|
||||
|
||||
<p>Angaben gemäß § 5 TMG</p>
|
||||
<p>
|
||||
Kevin Kandlbinder
|
||||
<br />
|
||||
Eichenweg 48
|
||||
<br />
|
||||
25451 Quickborn <br />
|
||||
</p>
|
||||
<p>
|
||||
{" "}
|
||||
<strong>Vertreten durch: </strong>
|
||||
<br />
|
||||
Kevin Kandlbinder
|
||||
<br />
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kontakt:</strong> <br />
|
||||
Telefon: +49 4106 8068004
|
||||
<br />
|
||||
E-Mail:{" "}
|
||||
<a href="mailto:contact@kevink.dev">
|
||||
contact@kevink.dev
|
||||
</a>
|
||||
<br />
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,94 +1,101 @@
|
|||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
export const query = graphql`
|
||||
query($language: String!) {
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function DisclaimerPage() {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("disclaimer")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>disclaimer</Trans>
|
||||
</h1>
|
||||
|
||||
<h2>Haftung für Inhalte</h2>
|
||||
|
||||
<p>
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
|
||||
auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
|
||||
§§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
|
||||
verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
|
||||
überwachen oder nach Umständen zu forschen, die auf eine
|
||||
rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
|
||||
Informationen nach den allgemeinen Gesetzen bleiben hiervon
|
||||
unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem
|
||||
Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei
|
||||
Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese
|
||||
Inhalte umgehend entfernen.
|
||||
</p>
|
||||
|
||||
<h2>Haftung für Links</h2>
|
||||
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren
|
||||
Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
|
||||
fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
|
||||
verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber
|
||||
der Seiten verantwortlich. Die verlinkten Seiten wurden zum
|
||||
Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft.
|
||||
Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
|
||||
erkennbar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist
|
||||
jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
|
||||
zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
|
||||
derartige Links umgehend entfernen.
|
||||
</p>
|
||||
|
||||
<h2>Urheberrecht</h2>
|
||||
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf
|
||||
diesen Seiten unterliegen dem deutschen Urheberrecht. Die
|
||||
Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
|
||||
Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der
|
||||
schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
Downloads und Kopien dieser Seite sind nur für den privaten, nicht
|
||||
kommerziellen Gebrauch gestattet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
|
||||
wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
|
||||
werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
|
||||
trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
|
||||
wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
|
||||
Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
import React from "react";
|
||||
import Layout from "../../layouts/default";
|
||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!) {
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function DisclaimerPage() {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("disclaimer")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>disclaimer</Trans>
|
||||
</h1>
|
||||
|
||||
<h2>Haftung für Inhalte</h2>
|
||||
|
||||
<p>
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für
|
||||
eigene Inhalte auf diesen Seiten nach den allgemeinen
|
||||
Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir
|
||||
als Diensteanbieter jedoch nicht verpflichtet,
|
||||
übermittelte oder gespeicherte fremde Informationen zu
|
||||
überwachen oder nach Umständen zu forschen, die auf eine
|
||||
rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Verpflichtungen zur Entfernung oder Sperrung der Nutzung
|
||||
von Informationen nach den allgemeinen Gesetzen bleiben
|
||||
hiervon unberührt. Eine diesbezügliche Haftung ist
|
||||
jedoch erst ab dem Zeitpunkt der Kenntnis einer
|
||||
konkreten Rechtsverletzung möglich. Bei Bekanntwerden
|
||||
von entsprechenden Rechtsverletzungen werden wir diese
|
||||
Inhalte umgehend entfernen.
|
||||
</p>
|
||||
|
||||
<h2>Haftung für Links</h2>
|
||||
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Websites
|
||||
Dritter, auf deren Inhalte wir keinen Einfluss haben.
|
||||
Deshalb können wir für diese fremden Inhalte auch keine
|
||||
Gewähr übernehmen. Für die Inhalte der verlinkten Seiten
|
||||
ist stets der jeweilige Anbieter oder Betreiber der
|
||||
Seiten verantwortlich. Die verlinkten Seiten wurden zum
|
||||
Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße
|
||||
überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
|
||||
Verlinkung nicht erkennbar.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Eine permanente inhaltliche Kontrolle der verlinkten
|
||||
Seiten ist jedoch ohne konkrete Anhaltspunkte einer
|
||||
Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von
|
||||
Rechtsverletzungen werden wir derartige Links umgehend
|
||||
entfernen.
|
||||
</p>
|
||||
|
||||
<h2>Urheberrecht</h2>
|
||||
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und
|
||||
Werke auf diesen Seiten unterliegen dem deutschen
|
||||
Urheberrecht. Die Vervielfältigung, Bearbeitung,
|
||||
Verbreitung und jede Art der Verwertung außerhalb der
|
||||
Grenzen des Urheberrechtes bedürfen der schriftlichen
|
||||
Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
Downloads und Kopien dieser Seite sind nur für den
|
||||
privaten, nicht kommerziellen Gebrauch gestattet.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Soweit die Inhalte auf dieser Seite nicht vom Betreiber
|
||||
erstellt wurden, werden die Urheberrechte Dritter
|
||||
beachtet. Insbesondere werden Inhalte Dritter als solche
|
||||
gekennzeichnet. Sollten Sie trotzdem auf eine
|
||||
Urheberrechtsverletzung aufmerksam werden, bitten wir um
|
||||
einen entsprechenden Hinweis. Bei Bekanntwerden von
|
||||
Rechtsverletzungen werden wir derartige Inhalte umgehend
|
||||
entfernen.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,94 @@
|
|||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./projects.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query GetProjects($language: String) {
|
||||
allProjectsJson(filter: { lang: { eq: $language } }) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
resize(width: 400, quality: 90) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
shortDescription
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ProjectsPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("projects")} description={t("projectsDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>projects</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>projectsDescription</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.projectList}>
|
||||
{data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link
|
||||
className={styles.projectCard}
|
||||
key={project.lang + project.urlname}
|
||||
to={"/projects/" + project.urlname}
|
||||
>
|
||||
<div
|
||||
className={styles.projectCardImage}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" + project.image.childImageSharp.resize.src + ")",
|
||||
}}
|
||||
>
|
||||
<div className={styles.projectCardMeta}>
|
||||
<span className={styles.projectCardTitle}>
|
||||
{project.name}
|
||||
</span>
|
||||
<span>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectsPage.propTypes = {
|
||||
data: PropTypes.object,
|
||||
};
|
||||
|
||||
export default ProjectsPage;
|
||||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./projects.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query GetProjects($language: String) {
|
||||
allProjectsJson(filter: { lang: { eq: $language } }) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
image {
|
||||
childImageSharp {
|
||||
resize(width: 400, quality: 90) {
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
shortDescription
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ProjectsPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("projects")} description={t("projectsDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>projects</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans>projectsDescription</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.projectList}>
|
||||
{data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link
|
||||
className={styles.projectCard}
|
||||
key={project.lang + project.urlname}
|
||||
to={"/projects/" + project.urlname}>
|
||||
<div
|
||||
className={styles.projectCardImage}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" +
|
||||
project.image.childImageSharp
|
||||
.resize.src +
|
||||
")",
|
||||
}}>
|
||||
<div className={styles.projectCardMeta}>
|
||||
<span
|
||||
className={
|
||||
styles.projectCardTitle
|
||||
}>
|
||||
{project.name}
|
||||
</span>
|
||||
<span>
|
||||
{project.shortDescription}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectsPage.propTypes = {
|
||||
data: PropTypes.object,
|
||||
};
|
||||
|
||||
export default ProjectsPage;
|
||||
|
|
|
|||
|
|
@ -1,89 +1,89 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.projectList {
|
||||
@include flexList;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.projectCardActivityIndicator {
|
||||
position: absolute;
|
||||
margin: 12px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&.activityIndicatorGreen {
|
||||
background: #26de81;
|
||||
}
|
||||
|
||||
&.activityIndicatorYellow {
|
||||
background: #f7b731;
|
||||
}
|
||||
|
||||
&.activityIndicatorRed {
|
||||
background: #fc5c65;
|
||||
}
|
||||
|
||||
&.activityIndicatorBlue {
|
||||
background: #45aaf2;
|
||||
}
|
||||
}
|
||||
|
||||
.projectCardImage {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
}
|
||||
|
||||
.projectCardMeta {
|
||||
padding: 10px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent, black);
|
||||
}
|
||||
|
||||
.projectCardTitle {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.projectCardCTA {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projectCardCTA a {
|
||||
@include buttonBasic;
|
||||
}
|
||||
|
||||
.projectCardCTAContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.projectCardCTAContainer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.projectCardCTA:nth-child(2) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.projectCardCTAContainer > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.projectList {
|
||||
@include flexList;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.projectCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.projectCardActivityIndicator {
|
||||
position: absolute;
|
||||
margin: 12px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&.activityIndicatorGreen {
|
||||
background: #26de81;
|
||||
}
|
||||
|
||||
&.activityIndicatorYellow {
|
||||
background: #f7b731;
|
||||
}
|
||||
|
||||
&.activityIndicatorRed {
|
||||
background: #fc5c65;
|
||||
}
|
||||
|
||||
&.activityIndicatorBlue {
|
||||
background: #45aaf2;
|
||||
}
|
||||
}
|
||||
|
||||
.projectCardImage {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
}
|
||||
|
||||
.projectCardMeta {
|
||||
padding: 10px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent, black);
|
||||
}
|
||||
|
||||
.projectCardTitle {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.projectCardCTA {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projectCardCTA a {
|
||||
@include buttonBasic;
|
||||
}
|
||||
|
||||
.projectCardCTAContainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.projectCardCTAContainer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.projectCardCTA:nth-child(2) {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.projectCardCTAContainer > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,83 @@
|
|||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./social.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query AllSocialsQuery($language: String!) {
|
||||
allSocialsJson {
|
||||
nodes {
|
||||
image
|
||||
platformHandle
|
||||
platformName
|
||||
url
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SocialPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("social")} description={t("socialDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>social</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans i18nKey="socialDescriptionWithLink">
|
||||
socialDescriptionWith<Link to="/friends">Link</Link>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.socialList}>
|
||||
{data.allSocialsJson.nodes.map((social) => {
|
||||
return (
|
||||
<a
|
||||
className={styles.socialCard}
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
rel="noreferrer me"
|
||||
key={social.url}
|
||||
>
|
||||
<div
|
||||
className={styles.socialImage}
|
||||
style={{ backgroundImage: "url(" + social.image + ")" }}
|
||||
>
|
||||
<span className={styles.socialName}>
|
||||
{social.platformName}
|
||||
</span>
|
||||
<span className={styles.socialUsername}>
|
||||
{social.platformHandle}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
SocialPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default SocialPage;
|
||||
import React from "react";
|
||||
import Layout from "../layouts/default";
|
||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||
import { graphql } from "gatsby";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./social.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query AllSocialsQuery($language: String!) {
|
||||
allSocialsJson {
|
||||
nodes {
|
||||
image
|
||||
platformHandle
|
||||
platformName
|
||||
url
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SocialPage = ({ data }) => {
|
||||
const { t } = useI18next();
|
||||
return (
|
||||
<Layout title={t("social")} description={t("socialDescription")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1>
|
||||
<Trans>social</Trans>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Trans i18nKey="socialDescriptionWithLink">
|
||||
socialDescriptionWith<Link to="/friends">Link</Link>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div className={styles.socialList}>
|
||||
{data.allSocialsJson.nodes.map((social) => {
|
||||
return (
|
||||
<a
|
||||
className={styles.socialCard}
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
rel="noreferrer me"
|
||||
key={social.url}>
|
||||
<div
|
||||
className={styles.socialImage}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(" + social.image + ")",
|
||||
}}>
|
||||
<span className={styles.socialName}>
|
||||
{social.platformName}
|
||||
</span>
|
||||
<span className={styles.socialUsername}>
|
||||
{social.platformHandle}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
SocialPage.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default SocialPage;
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.socialList {
|
||||
@include flexList;
|
||||
|
||||
.socialCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.socialImage {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.socialName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.socialUsername {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.socialList {
|
||||
@include flexList;
|
||||
|
||||
.socialCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.socialImage {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
|
||||
.socialName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.socialUsername {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue