mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-28 00:06:42 +02:00
Work around error intoduced in gatsby-plugin-sass@4.0.1
This commit is contained in:
parent
f9014c7f83
commit
54bcb1b7a7
9 changed files with 551 additions and 548 deletions
|
|
@ -1,69 +1,69 @@
|
|||
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 styles from "./donate.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
siteUrl
|
||||
payPalMail
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function DonatePage(props) {
|
||||
const [amount, setAmount] = useState(5);
|
||||
const { t } = useI18next();
|
||||
const { path } = React.useContext(I18nextContext);
|
||||
|
||||
const { site, file } = props.data;
|
||||
|
||||
return (
|
||||
<Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1><Trans>donate</Trans></h1>
|
||||
|
||||
<p><Trans>donateDescription</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
|
||||
};
|
||||
|
||||
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 * as styles from "./donate.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
siteUrl
|
||||
payPalMail
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function DonatePage(props) {
|
||||
const [amount, setAmount] = useState(5);
|
||||
const { t } = useI18next();
|
||||
const { path } = React.useContext(I18nextContext);
|
||||
|
||||
const { site, file } = props.data;
|
||||
|
||||
return (
|
||||
<Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
|
||||
<section>
|
||||
<article>
|
||||
<h1><Trans>donate</Trans></h1>
|
||||
|
||||
<p><Trans>donateDescription</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,83 +1,83 @@
|
|||
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 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 module="social" 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 + ")" }}>
|
||||
<span className={styles.friendName}>{friend.name}</span>
|
||||
<span className={styles.friendTitle}>{friend.profession}</span>
|
||||
</div>
|
||||
|
||||
{/*<span class="friendBio"></span>*/}
|
||||
<div className={styles.contactLinks}>
|
||||
<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>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
FriendsPage.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
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 module="social" 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 + ")" }}>
|
||||
<span className={styles.friendName}>{friend.name}</span>
|
||||
<span className={styles.friendTitle}>{friend.profession}</span>
|
||||
</div>
|
||||
|
||||
{/*<span class="friendBio"></span>*/}
|
||||
<div className={styles.contactLinks}>
|
||||
<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>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
FriendsPage.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default FriendsPage;
|
||||
|
|
@ -1,157 +1,157 @@
|
|||
import * as React from "react"
|
||||
import Layout from "../layouts/default"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import styles from "./index.module.scss"
|
||||
import projectStyles from "./projects.module.scss"
|
||||
|
||||
import { Trans, Link } from "gatsby-plugin-react-i18next"
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import anime from "animejs";
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class IndexPage extends React.Component {
|
||||
componentDidMount() {
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let meta = this.props.data.site.siteMetadata;
|
||||
|
||||
return (
|
||||
<Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}>
|
||||
<section className={styles.heroSection}>
|
||||
<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>
|
||||
<h1><Trans>homeAboutMe</Trans></h1>
|
||||
<p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
|
||||
</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}>
|
||||
{this.props.data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
|
||||
{/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
|
||||
<div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
||||
<div className={projectStyles.projectCardMeta}>
|
||||
<span className={projectStyles.projectCardTitle}>{project.name}</span>
|
||||
<span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className={projectStyles.projectCardCTAContainer}>
|
||||
<div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></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 anime from "animejs";
|
||||
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class IndexPage extends React.Component {
|
||||
componentDidMount() {
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let meta = this.props.data.site.siteMetadata;
|
||||
|
||||
return (
|
||||
<Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}>
|
||||
<section className={styles.heroSection}>
|
||||
<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>
|
||||
<h1><Trans>homeAboutMe</Trans></h1>
|
||||
<p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
|
||||
</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}>
|
||||
{this.props.data.allProjectsJson.nodes.map((project) => {
|
||||
return (
|
||||
<Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
|
||||
{/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
|
||||
<div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
||||
<div className={projectStyles.projectCardMeta}>
|
||||
<span className={projectStyles.projectCardTitle}>{project.name}</span>
|
||||
<span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className={projectStyles.projectCardCTAContainer}>
|
||||
<div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></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,80 +1,80 @@
|
|||
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 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 module="projects" 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="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
|
||||
<div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
||||
<div className={styles.projectCardMeta}>
|
||||
<span className={styles.projectCardTitle}>{project.name}</span>
|
||||
<span className={styles.projectCardTeaser}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className={styles.projectCardCTAContainer}>
|
||||
<div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
|
||||
</div>*/}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
ProjectsPage.propTypes = {
|
||||
data: PropTypes.object
|
||||
}
|
||||
|
||||
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 module="projects" 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="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
|
||||
<div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
||||
<div className={styles.projectCardMeta}>
|
||||
<span className={styles.projectCardTitle}>{project.name}</span>
|
||||
<span className={styles.projectCardTeaser}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className={styles.projectCardCTAContainer}>
|
||||
<div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
|
||||
</div>*/}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
ProjectsPage.propTypes = {
|
||||
data: PropTypes.object
|
||||
}
|
||||
|
||||
export default ProjectsPage;
|
||||
|
|
@ -1,68 +1,68 @@
|
|||
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 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 module="social" 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>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
SocialPage.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
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 module="social" 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>
|
||||
|
||||
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
SocialPage.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default SocialPage;
|
||||
|
|
@ -1,92 +1,92 @@
|
|||
import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
|
||||
import Layout from "../layouts/default";
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import styles from "./project.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query GetProject($urlname: String!, $lang: String!, $language: String!) {
|
||||
allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
links {
|
||||
github
|
||||
website
|
||||
}
|
||||
image {
|
||||
publicURL
|
||||
}
|
||||
longDescription
|
||||
shortDescription
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const ProjectTemplate = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
let project = data.allProjectsJson.nodes[0];
|
||||
let projectName = project.name;
|
||||
|
||||
return (
|
||||
<Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
|
||||
<section className={styles.projectHeader}>
|
||||
<div style={{ paddingTop: 0 }}>
|
||||
<div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
|
||||
<header>
|
||||
<div className={styles.headerInner}>
|
||||
<h1><Trans>project</Trans>: {projectName}</h1>
|
||||
<span className={styles.postMeta}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div className={styles.headerPlaceholder}></div>
|
||||
</div>
|
||||
</section>
|
||||
{project.longDescription != null ?
|
||||
<section className={styles.projectAbout}>
|
||||
<article>
|
||||
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
|
||||
<p>{project.longDescription}</p>
|
||||
</article>
|
||||
</section>
|
||||
: null}
|
||||
{project.links !== null ?
|
||||
<section className={styles.projectLinks}>
|
||||
<div>
|
||||
<h1>Links</h1>
|
||||
<div className={styles.linkList}>
|
||||
{project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
|
||||
{project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
: null}
|
||||
{/*<section>
|
||||
<div>
|
||||
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
</div>
|
||||
</section>*/}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
ProjectTemplate.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
|
||||
import Layout from "../layouts/default";
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import * as styles from "./project.module.scss";
|
||||
|
||||
export const query = graphql`
|
||||
query GetProject($urlname: String!, $lang: String!, $language: String!) {
|
||||
allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
|
||||
nodes {
|
||||
lang
|
||||
urlname
|
||||
name
|
||||
links {
|
||||
github
|
||||
website
|
||||
}
|
||||
image {
|
||||
publicURL
|
||||
}
|
||||
longDescription
|
||||
shortDescription
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const ProjectTemplate = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
let project = data.allProjectsJson.nodes[0];
|
||||
let projectName = project.name;
|
||||
|
||||
return (
|
||||
<Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
|
||||
<section className={styles.projectHeader}>
|
||||
<div style={{ paddingTop: 0 }}>
|
||||
<div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
|
||||
<header>
|
||||
<div className={styles.headerInner}>
|
||||
<h1><Trans>project</Trans>: {projectName}</h1>
|
||||
<span className={styles.postMeta}>{project.shortDescription}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div className={styles.headerPlaceholder}></div>
|
||||
</div>
|
||||
</section>
|
||||
{project.longDescription != null ?
|
||||
<section className={styles.projectAbout}>
|
||||
<article>
|
||||
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
|
||||
<p>{project.longDescription}</p>
|
||||
</article>
|
||||
</section>
|
||||
: null}
|
||||
{project.links !== null ?
|
||||
<section className={styles.projectLinks}>
|
||||
<div>
|
||||
<h1>Links</h1>
|
||||
<div className={styles.linkList}>
|
||||
{project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
|
||||
{project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
: null}
|
||||
{/*<section>
|
||||
<div>
|
||||
|
||||
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||
</div>
|
||||
</section>*/}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
ProjectTemplate.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default ProjectTemplate;
|
||||
Loading…
Add table
Add a link
Reference in a new issue