diff --git a/config.js b/config.js
index e97bfbf..b448d65 100644
--- a/config.js
+++ b/config.js
@@ -2,6 +2,7 @@ module.exports = {
"siteName": "KevinK.dev",
"siteAuthor": "@Unkn0wnKevin",
"siteURL": "https://kevink.dev",
+ "payPalMail": "kevin@1in9.net",
"siteKeywords": "Kevin Kandlbinder, Kevin, Kandlbinder, Web, Web Developer, Developer, JavaScript, PHP, Java, Photos, Fotos",
"iconPath": "src/images/fullbglogo@10x.png",
"languages": ["en", "de"]
diff --git a/gatsby-config.js b/gatsby-config.js
index ca58a85..ac28b5e 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -5,7 +5,8 @@ module.exports = {
title: extConfig.siteName,
author: extConfig.siteAuthor,
siteUrl: extConfig.siteURL,
- keywords: extConfig.siteKeywords
+ keywords: extConfig.siteKeywords,
+ payPalMail: extConfig.payPalMail
},
assetPrefix: "/assets",
plugins: [
@@ -13,6 +14,7 @@ module.exports = {
resolve: "gatsby-plugin-asset-path"
},
`gatsby-plugin-sharp`,
+ `gatsby-transformer-sharp`,
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
diff --git a/locales/en/translation.json b/locales/en/translation.json
index 0335114..6299b1a 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -1,29 +1,31 @@
{
- "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
- "imprint": "Imprint",
- "datasec": "Data Protection",
- "disclaimer": "Disclaimer",
- "projects": "Projects",
- "project": "Project",
- "social": "Social",
- "homeHello": "Hello, I am",
- "homeMe": "I am",
- "homeWebDeveloper": "a web developer",
- "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
- "homeAboutMe": "About me",
- "homeAboutMeHello": "Hello!",
- "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
- "donationCatchphrase": "Like what you're seeing? Consider donating.",
- "homeImageCredit": "Portrait taken by Jannik Kiel",
- "de": "German",
- "en": "English",
- "projectAboutHeader": "About {{projectName}}",
- "projectViewGitHub": "View on GitHub",
- "projectViewWebsite": "View Project-Website",
- "projectsDescription": "This is what I am working on or have worked on.",
- "projectView": "View",
- "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
- "socialDescription": "Find me on other platforms!",
- "friends": "Friends",
- "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects."
-}
\ No newline at end of file
+ "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
+ "imprint": "Imprint",
+ "datasec": "Data Protection",
+ "disclaimer": "Disclaimer",
+ "projects": "Projects",
+ "project": "Project",
+ "social": "Social",
+ "homeHello": "Hello, I am",
+ "homeMe": "I am",
+ "homeWebDeveloper": "a web developer",
+ "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
+ "homeAboutMe": "About me",
+ "homeAboutMeHello": "Hello!",
+ "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
+ "donationCatchphrase": "Like what you're seeing? Consider donating.",
+ "homeImageCredit": "Portrait taken by Jannik Kiel",
+ "de": "German",
+ "en": "English",
+ "projectAboutHeader": "About {{projectName}}",
+ "projectViewGitHub": "View on GitHub",
+ "projectViewWebsite": "View Project-Website",
+ "projectsDescription": "This is what I am working on or have worked on.",
+ "projectView": "View",
+ "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+ "socialDescription": "Find me on other platforms!",
+ "friends": "Friends",
+ "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
+ "donate": "Donate",
+ "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment."
+}
diff --git a/package-lock.json b/package-lock.json
index 22a1a82..595f6f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10990,6 +10990,54 @@
"bluebird": "^3.7.2"
}
},
+ "gatsby-transformer-sharp": {
+ "version": "2.9.0",
+ "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.9.0.tgz",
+ "integrity": "sha512-v8kKgySAZtO7ko+XKbSFLXM0JUPP5s08PI7S8krBPsrhclSY9plRGOqtef1dNG7LIxbGCggy58fGTaD3aad12g==",
+ "requires": {
+ "@babel/runtime": "^7.12.5",
+ "bluebird": "^3.7.2",
+ "fs-extra": "^9.0.1",
+ "potrace": "^2.1.8",
+ "probe-image-size": "^5.0.0",
+ "semver": "^7.3.2",
+ "sharp": "^0.26.3"
+ },
+ "dependencies": {
+ "fs-extra": {
+ "version": "9.0.1",
+ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+ "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+ "requires": {
+ "at-least-node": "^1.0.0",
+ "graceful-fs": "^4.2.0",
+ "jsonfile": "^6.0.1",
+ "universalify": "^1.0.0"
+ }
+ },
+ "jsonfile": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+ "requires": {
+ "graceful-fs": "^4.1.6",
+ "universalify": "^2.0.0"
+ },
+ "dependencies": {
+ "universalify": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+ "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+ }
+ }
+ },
+ "universalify": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+ "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
+ }
+ }
+ },
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
diff --git a/package.json b/package.json
index 31ca685..7dfdc0c 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"gatsby-plugin-sitemap": "^2.9.0",
"gatsby-source-filesystem": "^2.8.0",
"gatsby-transformer-json": "^2.8.0",
+ "gatsby-transformer-sharp": "^2.9.0",
"i18next": "^19.8.4",
"jquery": "^3.5.1",
"locale": "^0.1.0",
diff --git a/src/_mixins.scss b/src/_mixins.scss
index e50689a..860163f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -34,6 +34,11 @@
text-decoration: none;
}
+@mixin button {
+ @include buttonBasic;
+ border-radius: 5px;
+}
+
@mixin homeBanner {
background: #10141e;
cursor: pointer;
diff --git a/src/images/icon.png b/src/images/icon.png
deleted file mode 100644
index 38b2fb0..0000000
Binary files a/src/images/icon.png and /dev/null differ
diff --git a/src/pages/donate.js b/src/pages/donate.js
new file mode 100644
index 0000000..999f273
--- /dev/null
+++ b/src/pages/donate.js
@@ -0,0 +1,48 @@
+import React, {useState} from "react"
+import Layout from "../layouts/default";
+import {useStaticQuery, graphql} from "gatsby";
+import { Trans, Link, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
+
+import styles from "./donate.module.scss";
+
+import logo from "../images/roundedbglogo@10x.png";
+
+export default function DonatePage() {
+ const [amount, setAmount] = useState(5);
+ const {t} = useI18next();
+ const {language, path} = React.useContext(I18nextContext);
+
+ const { site } = useStaticQuery(
+ graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ siteUrl
+ payPalMail
+ }
+ }
+ }
+ `
+ )
+
+ 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 for="priceInput" className={styles.sronly}>Amount</label>
+ <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => {setAmount(ev.target.value)}} 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+logo))+"&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 class="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
+ </article>
+ </section>
+ </Layout>
+ );
+}
\ No newline at end of file
diff --git a/src/pages/donate.module.scss b/src/pages/donate.module.scss
new file mode 100644
index 0000000..03ddabf
--- /dev/null
+++ b/src/pages/donate.module.scss
@@ -0,0 +1,41 @@
+@import "../variables";
+@import "../mixins";
+
+.priceAmount {
+ display: flex;
+ width: 150px;
+ margin: 20px auto;
+ border: thin solid rgba(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,.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;
+}
+
diff --git a/src/pages/donate/thank-you.js b/src/pages/donate/thank-you.js
new file mode 100644
index 0000000..f09ef7b
--- /dev/null
+++ b/src/pages/donate/thank-you.js
@@ -0,0 +1,19 @@
+import React from "react"
+import Layout from "../../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function ImprintPage() {
+
+ const {t} = useI18next();
+ return (
+ <Layout module="donate" title={t("donate")}>
+ <section>
+ <article>
+ <h1><Trans>donateThanks</Trans></h1>
+
+ <p></p>
+ </article>
+ </section>
+ </Layout>
+ );
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index e62f928..e5c4bf5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -41,12 +41,12 @@ class IndexPage extends React.Component {
<i className="fas fa-fw fa-chevron-right"></i>
</div>
</a>
- <a className={styles.section + " " + styles.donationSection} href="TODO: Path">
+ <Link className={styles.section + " " + styles.donationSection} to="/donate">
<div>
<span><Trans>donationCatchphrase</Trans></span>
<i className="fas fa-fw fa-chevron-right"></i>
</div>
- </a>
+ </Link>
</Layout>
)
}
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 3a7be49..4426c1a 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -21,10 +21,6 @@
max-height: 400px;
transform: translate(-50%, 0%);
-
-
-
-
&:hover .profileImage {
transform: translate(4px, -4px);
}