mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-14 08:32:12 +02:00
Run prettier on code
This commit is contained in:
GitHub
parent
d542206091
commit
b8057f0e25
51 changed files with 28270 additions and 26529 deletions
35
config.js
35
config.js
|
|
@ -1,17 +1,18 @@
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
module.exports = {
|
module.exports = {
|
||||||
"siteName": "KevinK.dev",
|
siteName: "KevinK.dev",
|
||||||
"siteAuthor": "@Unkn0wnKevin",
|
siteAuthor: "@Unkn0wnKevin",
|
||||||
"siteURL": "https://kevink.dev",
|
siteURL: "https://kevink.dev",
|
||||||
"payPalMail": "kevin@1in9.net",
|
payPalMail: "kevin@1in9.net",
|
||||||
"siteKeywords": "Kevin Kandlbinder, Kevin, Kandlbinder, Web, Web Developer, Developer, JavaScript, PHP, Java, Photos, Fotos",
|
siteKeywords:
|
||||||
"iconPath": "src/images/fullbglogo@10x.png",
|
"Kevin Kandlbinder, Kevin, Kandlbinder, Web, Web Developer, Developer, JavaScript, PHP, Java, Photos, Fotos",
|
||||||
"languages": ["en", "de"],
|
iconPath: "src/images/fullbglogo@10x.png",
|
||||||
"contactEmail": "kevin@kevink.dev",
|
languages: ["en", "de"],
|
||||||
"contactPhone": "+4941068068004",
|
contactEmail: "kevin@kevink.dev",
|
||||||
"mapsLink": "https://goo.gl/maps/KVq9z1PVaVP2",
|
contactPhone: "+4941068068004",
|
||||||
"contactTwitter": "Unkn0wnKevin",
|
mapsLink: "https://goo.gl/maps/KVq9z1PVaVP2",
|
||||||
"contactGitHub": "Unkn0wnCat",
|
contactTwitter: "Unkn0wnKevin",
|
||||||
"contactMastodon": "@kevin@1in1.net",
|
contactGitHub: "Unkn0wnCat",
|
||||||
"contactMastodonHref": "https://mastodon.1in1.net/@kevin"
|
contactMastodon: "@kevin@1in1.net",
|
||||||
};
|
contactMastodonHref: "https://mastodon.1in1.net/@kevin",
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"profession": "Full-Stack-Developer",
|
"profession": "Full-Stack-Developer",
|
||||||
"name": "Feuerhamster",
|
"name": "Feuerhamster",
|
||||||
"url": "https://hamsterlabs.de",
|
"url": "https://hamsterlabs.de",
|
||||||
"imageURL": "https://cdn.kevink.dev/assets/friends/feuerhamster.png"
|
"imageURL": "https://cdn.kevink.dev/assets/friends/feuerhamster.png"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"profession": "",
|
"profession": "",
|
||||||
"name": "Jannik Kiel",
|
"name": "Jannik Kiel",
|
||||||
"url": "https://unsplash.com/@jannikkiel",
|
"url": "https://unsplash.com/@jannikkiel",
|
||||||
"imageURL": "https://source.unsplash.com/user/jannikkiel/300x300"
|
"imageURL": "https://source.unsplash.com/user/jannikkiel/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"profession": "Systemadministrator",
|
"profession": "Systemadministrator",
|
||||||
"name": "Timo Strüker",
|
"name": "Timo Strüker",
|
||||||
"url": "https://strueker.dev",
|
"url": "https://strueker.dev",
|
||||||
"imageURL": "https://cdn.kevink.dev/assets/friends/timo.jpg"
|
"imageURL": "https://cdn.kevink.dev/assets/friends/timo.jpg"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"urlname": "foobar",
|
"urlname": "foobar",
|
||||||
"lang": "ignoreme",
|
"lang": "ignoreme",
|
||||||
"name": "foobar",
|
"name": "foobar",
|
||||||
"shortDescription": "foobar",
|
"shortDescription": "foobar",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://foo.bar",
|
"website": "https://foo.bar",
|
||||||
"github": "https://foo.bar"
|
"github": "https://foo.bar"
|
||||||
},
|
},
|
||||||
"image": "../images/test.jpg",
|
"image": "../images/test.jpg",
|
||||||
"featured": 0
|
"featured": 0
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
{
|
{
|
||||||
"urlname": "else",
|
"urlname": "else",
|
||||||
"lang": "de",
|
"lang": "de",
|
||||||
"name": "Schülerzeitung \"ELSE\"",
|
"name": "Schülerzeitung \"ELSE\"",
|
||||||
"shortDescription": "Eine News-Seite für die Schülerzeitung meiner Schule.",
|
"shortDescription": "Eine News-Seite für die Schülerzeitung meiner Schule.",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://schuelerzeitung-elsensee.de"
|
"website": "https://schuelerzeitung-elsensee.de"
|
||||||
},
|
},
|
||||||
"image": "../images/ELSE.jpg",
|
"image": "../images/ELSE.jpg",
|
||||||
"featured": 2
|
"featured": 2
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
{
|
{
|
||||||
"urlname": "else",
|
"urlname": "else",
|
||||||
"lang": "en",
|
"lang": "en",
|
||||||
"name": "Student Newspaper \"ELSE\"",
|
"name": "Student Newspaper \"ELSE\"",
|
||||||
"shortDescription": "A news-site for the my schools school paper.",
|
"shortDescription": "A news-site for the my schools school paper.",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://schuelerzeitung-elsensee.de"
|
"website": "https://schuelerzeitung-elsensee.de"
|
||||||
},
|
},
|
||||||
"image": "../images/ELSE.jpg",
|
"image": "../images/ELSE.jpg",
|
||||||
"featured": 2
|
"featured": 2
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{
|
{
|
||||||
"urlname": "kevink-dev",
|
"urlname": "kevink-dev",
|
||||||
"lang": "de",
|
"lang": "de",
|
||||||
"name": "KevinK.dev",
|
"name": "KevinK.dev",
|
||||||
"shortDescription": "Diese Seite und der Code dahinter.",
|
"shortDescription": "Diese Seite und der Code dahinter.",
|
||||||
"longDescription": "Schon so lange ich im Internet unterwegs bin war ich fasziniert von der Idee eine eigene Website zu haben. Deshalb habe ich mich an diese Seite gesetzt um mich selbst und meine Projekte zu repräsentieren. Wenn du interessiert an dem Code hinter der Seite bist, schau doch gerne auf GitHub vorbei!",
|
"longDescription": "Schon so lange ich im Internet unterwegs bin war ich fasziniert von der Idee eine eigene Website zu haben. Deshalb habe ich mich an diese Seite gesetzt um mich selbst und meine Projekte zu repräsentieren. Wenn du interessiert an dem Code hinter der Seite bist, schau doch gerne auf GitHub vorbei!",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://kevink.dev",
|
"website": "https://kevink.dev",
|
||||||
"github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
|
"github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
|
||||||
},
|
},
|
||||||
"image": "../images/KevinK.dev.jpg",
|
"image": "../images/KevinK.dev.jpg",
|
||||||
"featured": 0
|
"featured": 0
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{
|
{
|
||||||
"urlname": "kevink-dev",
|
"urlname": "kevink-dev",
|
||||||
"lang": "en",
|
"lang": "en",
|
||||||
"name": "KevinK.dev",
|
"name": "KevinK.dev",
|
||||||
"shortDescription": "This site and the code behind the scenes.",
|
"shortDescription": "This site and the code behind the scenes.",
|
||||||
"longDescription": "For as long as I've been poking around the internet I've always been facinated by the idea to have my own website. This is why I've created this site to showcase myself and my projects. If you are interested in the code behind the scenes feel free to look at it on GitHub!",
|
"longDescription": "For as long as I've been poking around the internet I've always been facinated by the idea to have my own website. This is why I've created this site to showcase myself and my projects. If you are interested in the code behind the scenes feel free to look at it on GitHub!",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://kevink.dev",
|
"website": "https://kevink.dev",
|
||||||
"github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
|
"github": "https://github.com/Unkn0wnCat/KevinK.dev.js"
|
||||||
},
|
},
|
||||||
"image": "../images/KevinK.dev.jpg",
|
"image": "../images/KevinK.dev.jpg",
|
||||||
"featured": 0
|
"featured": 0
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"urlname": "kreig",
|
"urlname": "kreig",
|
||||||
"lang": "de",
|
"lang": "de",
|
||||||
"name": "KREIG.de",
|
"name": "KREIG.de",
|
||||||
"shortDescription": " Eine einfache aber schöne Gaming-Seite. ",
|
"shortDescription": " Eine einfache aber schöne Gaming-Seite. ",
|
||||||
"longDescription": "Videospiele sind ein wesentlicher Teil unserer heutigen Gesellschaft. Ob Kompetitiv oder einfach nur zum Spaß: Fast jeder hat irgendeine Erfahrnug mit Videospielen. Ich bin da keine Ausnahme und für meine Gaming-Gruppe habe ich diese Seite erstellt, bei der ich modernes Design mit dem Gefühl von klassischen Gaming-Websites vereint habe.",
|
"longDescription": "Videospiele sind ein wesentlicher Teil unserer heutigen Gesellschaft. Ob Kompetitiv oder einfach nur zum Spaß: Fast jeder hat irgendeine Erfahrnug mit Videospielen. Ich bin da keine Ausnahme und für meine Gaming-Gruppe habe ich diese Seite erstellt, bei der ich modernes Design mit dem Gefühl von klassischen Gaming-Websites vereint habe.",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://kreig.de"
|
"website": "https://kreig.de"
|
||||||
},
|
},
|
||||||
"image": "../images/KREIG.de.jpg",
|
"image": "../images/KREIG.de.jpg",
|
||||||
"featured": 1
|
"featured": 1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"urlname": "kreig",
|
"urlname": "kreig",
|
||||||
"lang": "en",
|
"lang": "en",
|
||||||
"name": "KREIG.de",
|
"name": "KREIG.de",
|
||||||
"shortDescription": " A simple but nice gaming website. ",
|
"shortDescription": " A simple but nice gaming website. ",
|
||||||
"longDescription": "Video games are a big part of today's society. Competitive or just for fun: Almost everyone has some contact with video games. I am no different to that and for my gaming clan I've created this site, which combines a modern design with the feeling of classical gaming sites on the early web.",
|
"longDescription": "Video games are a big part of today's society. Competitive or just for fun: Almost everyone has some contact with video games. I am no different to that and for my gaming clan I've created this site, which combines a modern design with the feeling of classical gaming sites on the early web.",
|
||||||
"links": {
|
"links": {
|
||||||
"website": "https://kreig.de"
|
"website": "https://kreig.de"
|
||||||
},
|
},
|
||||||
"image": "../images/KREIG.de.jpg",
|
"image": "../images/KREIG.de.jpg",
|
||||||
"featured": 1
|
"featured": 1
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Blog",
|
"platformName": "Blog",
|
||||||
"platformHandle": "@kevin@blog.1in9.net",
|
"platformHandle": "@kevin@blog.1in9.net",
|
||||||
"url": "https://blog.1in9.net/~/Kevin",
|
"url": "https://blog.1in9.net/~/Kevin",
|
||||||
"image": "https://source.unsplash.com/xG8IQMqMITM/300x300"
|
"image": "https://source.unsplash.com/xG8IQMqMITM/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "GitHub",
|
"platformName": "GitHub",
|
||||||
"platformHandle": "@Unkn0wnCat",
|
"platformHandle": "@Unkn0wnCat",
|
||||||
"url": "https://github.com/Unkn0wnCat",
|
"url": "https://github.com/Unkn0wnCat",
|
||||||
"image": "https://source.unsplash.com/842ofHC6MaI/300x300"
|
"image": "https://source.unsplash.com/842ofHC6MaI/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Mastodon",
|
"platformName": "Mastodon",
|
||||||
"platformHandle": "@kevin@1in1.net",
|
"platformHandle": "@kevin@1in1.net",
|
||||||
"url": "https://mastodon.1in1.net/@kevin",
|
"url": "https://mastodon.1in1.net/@kevin",
|
||||||
"image": "https://source.unsplash.com/8bghKxNU1j0/300x300"
|
"image": "https://source.unsplash.com/8bghKxNU1j0/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Matrix",
|
"platformName": "Matrix",
|
||||||
"platformHandle": "@kevin:1in1.net",
|
"platformHandle": "@kevin:1in1.net",
|
||||||
"url": "https://matrix.to/#/@kevin:1in1.net",
|
"url": "https://matrix.to/#/@kevin:1in1.net",
|
||||||
"image": "https://source.unsplash.com/Zq6HerrBPEs/300x300"
|
"image": "https://source.unsplash.com/Zq6HerrBPEs/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Unkn0wnCat.net",
|
"platformName": "Unkn0wnCat.net",
|
||||||
"platformHandle": "Gaming",
|
"platformHandle": "Gaming",
|
||||||
"url": "https://unkn0wncat.net",
|
"url": "https://unkn0wncat.net",
|
||||||
"image": "https://source.unsplash.com/nCU4yq5xDEQ/300x300"
|
"image": "https://source.unsplash.com/nCU4yq5xDEQ/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Twitter",
|
"platformName": "Twitter",
|
||||||
"platformHandle": "@Unkn0wnKevin",
|
"platformHandle": "@Unkn0wnKevin",
|
||||||
"url": "https://twitter.com/@Unkn0wnKevin",
|
"url": "https://twitter.com/@Unkn0wnKevin",
|
||||||
"image": "https://source.unsplash.com/RnW1taVZqm8/300x300"
|
"image": "https://source.unsplash.com/RnW1taVZqm8/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"platformName": "Unsplash",
|
"platformName": "Unsplash",
|
||||||
"platformHandle": "@Unkn0wnCat",
|
"platformHandle": "@Unkn0wnCat",
|
||||||
"url": "https://unsplash.com/@unkn0wncat",
|
"url": "https://unsplash.com/@unkn0wncat",
|
||||||
"image": "https://source.unsplash.com/user/unkn0wncat/300x300"
|
"image": "https://source.unsplash.com/user/unkn0wncat/300x300"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
184
gatsby-config.js
184
gatsby-config.js
|
|
@ -1,92 +1,92 @@
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
const extConfig = require("./config")
|
const extConfig = require("./config");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
title: extConfig.siteName,
|
title: extConfig.siteName,
|
||||||
author: extConfig.siteAuthor,
|
author: extConfig.siteAuthor,
|
||||||
siteUrl: extConfig.siteURL,
|
siteUrl: extConfig.siteURL,
|
||||||
keywords: extConfig.siteKeywords,
|
keywords: extConfig.siteKeywords,
|
||||||
payPalMail: extConfig.payPalMail,
|
payPalMail: extConfig.payPalMail,
|
||||||
contactEmail: extConfig.contactEmail,
|
contactEmail: extConfig.contactEmail,
|
||||||
contactPhone: extConfig.contactPhone,
|
contactPhone: extConfig.contactPhone,
|
||||||
mapsLink: extConfig.mapsLink,
|
mapsLink: extConfig.mapsLink,
|
||||||
contactTwitter: extConfig.contactTwitter,
|
contactTwitter: extConfig.contactTwitter,
|
||||||
contactGitHub: extConfig.contactGitHub,
|
contactGitHub: extConfig.contactGitHub,
|
||||||
contactMastodon: extConfig.contactMastodon,
|
contactMastodon: extConfig.contactMastodon,
|
||||||
contactMastodonHref: extConfig.contactMastodonHref
|
contactMastodonHref: extConfig.contactMastodonHref,
|
||||||
},
|
},
|
||||||
assetPrefix: "/assets",
|
assetPrefix: "/assets",
|
||||||
plugins: [
|
plugins: [
|
||||||
`gatsby-plugin-eslint`,
|
`gatsby-plugin-eslint`,
|
||||||
{
|
{
|
||||||
resolve: "gatsby-plugin-asset-path"
|
resolve: "gatsby-plugin-asset-path",
|
||||||
},
|
},
|
||||||
`gatsby-plugin-sharp`,
|
`gatsby-plugin-sharp`,
|
||||||
`gatsby-transformer-sharp`,
|
`gatsby-transformer-sharp`,
|
||||||
`gatsby-transformer-json`,
|
`gatsby-transformer-json`,
|
||||||
{
|
{
|
||||||
resolve: `gatsby-source-filesystem`,
|
resolve: `gatsby-source-filesystem`,
|
||||||
options: {
|
options: {
|
||||||
path: `./content/`,
|
path: `./content/`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resolve: `gatsby-source-filesystem`,
|
resolve: `gatsby-source-filesystem`,
|
||||||
options: {
|
options: {
|
||||||
path: `${__dirname}/locales`,
|
path: `${__dirname}/locales`,
|
||||||
name: `locale`
|
name: `locale`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
`gatsby-plugin-sass`,
|
`gatsby-plugin-sass`,
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-manifest`,
|
resolve: `gatsby-plugin-manifest`,
|
||||||
options: {
|
options: {
|
||||||
name: extConfig.siteName,
|
name: extConfig.siteName,
|
||||||
short_name: extConfig.siteName,
|
short_name: extConfig.siteName,
|
||||||
start_url: `/`,
|
start_url: `/`,
|
||||||
background_color: `#000710`,
|
background_color: `#000710`,
|
||||||
theme_color: `#000710`,
|
theme_color: `#000710`,
|
||||||
display: `minimal-ui`,
|
display: `minimal-ui`,
|
||||||
icon: extConfig.iconPath, // This path is relative to the root of the site.
|
icon: extConfig.iconPath, // This path is relative to the root of the site.
|
||||||
cache_busting_mode: 'none',
|
cache_busting_mode: "none",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
`gatsby-plugin-robots-txt`,
|
`gatsby-plugin-robots-txt`,
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-offline`,
|
resolve: `gatsby-plugin-offline`,
|
||||||
options: {
|
options: {
|
||||||
precachePages: ["/", "/en", "/en/projects", "/de", "/de/projects"],
|
precachePages: ["/", "/en", "/en/projects", "/de", "/de/projects"],
|
||||||
workboxConfig: {
|
workboxConfig: {
|
||||||
globPatterns: ['**/*']
|
globPatterns: ["**/*"],
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
`gatsby-plugin-sitemap`,
|
`gatsby-plugin-sitemap`,
|
||||||
`gatsby-plugin-react-helmet`,
|
`gatsby-plugin-react-helmet`,
|
||||||
{
|
{
|
||||||
resolve: `gatsby-plugin-react-i18next`,
|
resolve: `gatsby-plugin-react-i18next`,
|
||||||
options: {
|
options: {
|
||||||
localeJsonSourceName: `locale`,
|
localeJsonSourceName: `locale`,
|
||||||
languages: extConfig.languages,
|
languages: extConfig.languages,
|
||||||
defaultLanguage: `en`,
|
defaultLanguage: `en`,
|
||||||
generateDefaultLanguagePage: true,
|
generateDefaultLanguagePage: true,
|
||||||
siteUrl: extConfig.siteURL,
|
siteUrl: extConfig.siteURL,
|
||||||
i18nextOptions: {
|
i18nextOptions: {
|
||||||
interpolation: {
|
interpolation: {
|
||||||
escapeValue: false // not needed for react as it escapes by default
|
escapeValue: false, // not needed for react as it escapes by default
|
||||||
},
|
},
|
||||||
keySeparator: false,
|
keySeparator: false,
|
||||||
nsSeparator: false
|
nsSeparator: false,
|
||||||
},
|
},
|
||||||
pages: [
|
pages: [
|
||||||
{
|
{
|
||||||
matchPath: '/:lang/projects/:urlname',
|
matchPath: "/:lang/projects/:urlname",
|
||||||
getLanguageFromPath: true,
|
getLanguageFromPath: true,
|
||||||
excludeLanguages: extConfig.languages
|
excludeLanguages: extConfig.languages,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
};
|
||||||
|
|
|
||||||
316
gatsby-node.js
316
gatsby-node.js
|
|
@ -1,141 +1,175 @@
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
const path = require(`path`);
|
const path = require(`path`);
|
||||||
const fs = require("fs")
|
const fs = require("fs");
|
||||||
|
|
||||||
exports.createPages = async ({ actions, graphql, reporter }) => {
|
exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||||
const { createPage } = actions
|
const { createPage } = actions;
|
||||||
|
|
||||||
const projectTemplate = path.resolve(`src/templates/project.js`)
|
const projectTemplate = path.resolve(`src/templates/project.js`);
|
||||||
|
|
||||||
const result = await graphql(`
|
const result = await graphql(`
|
||||||
query AllPagesQuery {
|
query AllPagesQuery {
|
||||||
allProjectsJson {
|
allProjectsJson {
|
||||||
nodes {
|
nodes {
|
||||||
lang
|
lang
|
||||||
urlname
|
urlname
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
`);
|
||||||
`)
|
|
||||||
|
if (result.errors) {
|
||||||
if (result.errors) {
|
reporter.panicOnBuild(`Error while running GraphQL query.`);
|
||||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
return;
|
||||||
return
|
}
|
||||||
}
|
|
||||||
|
result.data.allProjectsJson.nodes.forEach((node) => {
|
||||||
result.data.allProjectsJson.nodes.forEach((node) => {
|
// eslint-disable-next-line no-undef
|
||||||
// eslint-disable-next-line no-undef
|
console.log("Creating Page: ", `/${node.lang}/projects/${node.urlname}`);
|
||||||
console.log("Creating Page: ", `/${node.lang}/projects/${node.urlname}`);
|
|
||||||
|
if (node.lang !== "ignoreme")
|
||||||
if (node.lang !== "ignoreme") createPage({
|
createPage({
|
||||||
path: `/${node.lang}/projects/${node.urlname}`,
|
path: `/${node.lang}/projects/${node.urlname}`,
|
||||||
component: projectTemplate,
|
component: projectTemplate,
|
||||||
context: {
|
context: {
|
||||||
lang: node.lang,
|
lang: node.lang,
|
||||||
urlname: node.urlname
|
urlname: node.urlname,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
|
const config = require("./config.js");
|
||||||
const config = require("./config.js");
|
|
||||||
|
exports.onPostBuild = async ({ graphql, reporter }) => {
|
||||||
exports.onPostBuild = async ({graphql, reporter}) => {
|
console.log("Building static api...");
|
||||||
console.log("Building static api...");
|
|
||||||
|
const apiPrefix = "./public/api";
|
||||||
const apiPrefix = "./public/api";
|
|
||||||
|
if (!fs.existsSync(apiPrefix)) fs.mkdirSync(apiPrefix);
|
||||||
if (!fs.existsSync(apiPrefix)) fs.mkdirSync(apiPrefix)
|
|
||||||
|
fs.writeFileSync(
|
||||||
fs.writeFileSync(`${apiPrefix}.json`, JSON.stringify({
|
`${apiPrefix}.json`,
|
||||||
success: true,
|
JSON.stringify({
|
||||||
endpoints: {
|
success: true,
|
||||||
projects: [
|
endpoints: {
|
||||||
{
|
projects: [
|
||||||
name: "Projects Overview",
|
{
|
||||||
description: "Returns overview of all available projects",
|
name: "Projects Overview",
|
||||||
path: "/api/projects.json"
|
description: "Returns overview of all available projects",
|
||||||
},
|
path: "/api/projects.json",
|
||||||
{
|
},
|
||||||
name: "Projects Overview for Language",
|
{
|
||||||
description: "Returns overview of all available projects in a specified language",
|
name: "Projects Overview for Language",
|
||||||
path: "/api/projects/:lang.json"
|
description:
|
||||||
},
|
"Returns overview of all available projects in a specified language",
|
||||||
{
|
path: "/api/projects/:lang.json",
|
||||||
name: "Get specific Project",
|
},
|
||||||
description: "Returns specific project in specified language",
|
{
|
||||||
path: "/api/projects/:lang/:slug.json"
|
name: "Get specific Project",
|
||||||
}
|
description: "Returns specific project in specified language",
|
||||||
]
|
path: "/api/projects/:lang/:slug.json",
|
||||||
}
|
},
|
||||||
}));
|
],
|
||||||
|
},
|
||||||
const projectsPrefix = apiPrefix+"/projects";
|
})
|
||||||
|
);
|
||||||
if (!fs.existsSync(projectsPrefix)) fs.mkdirSync(projectsPrefix)
|
|
||||||
|
const projectsPrefix = apiPrefix + "/projects";
|
||||||
await graphql(`
|
|
||||||
query {
|
if (!fs.existsSync(projectsPrefix)) fs.mkdirSync(projectsPrefix);
|
||||||
allProjectsJson {
|
|
||||||
nodes {
|
await graphql(`
|
||||||
longDescription
|
query {
|
||||||
urlname
|
allProjectsJson {
|
||||||
shortDescription
|
nodes {
|
||||||
name
|
longDescription
|
||||||
links {
|
urlname
|
||||||
github
|
shortDescription
|
||||||
website
|
name
|
||||||
}
|
links {
|
||||||
lang
|
github
|
||||||
image {
|
website
|
||||||
publicURL
|
}
|
||||||
}
|
lang
|
||||||
featured
|
image {
|
||||||
}
|
publicURL
|
||||||
}
|
}
|
||||||
}
|
featured
|
||||||
`).then(res => {
|
}
|
||||||
if (res.errors) {
|
}
|
||||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
}
|
||||||
return
|
`).then((res) => {
|
||||||
}
|
if (res.errors) {
|
||||||
|
reporter.panicOnBuild(`Error while running GraphQL query.`);
|
||||||
let projects = res.data.allProjectsJson.nodes.filter((project => { return project.lang !== "ignoreme" }));
|
return;
|
||||||
|
}
|
||||||
fs.writeFileSync(`${projectsPrefix}.json`, JSON.stringify({
|
|
||||||
success: true,
|
let projects = res.data.allProjectsJson.nodes.filter((project) => {
|
||||||
projects: projects.map((project) => {return {slug: project.urlname, lang: project.lang, api: `/api/projects/${project.lang}/${project.urlname}.json`};})
|
return project.lang !== "ignoreme";
|
||||||
}));
|
});
|
||||||
|
|
||||||
config.languages.forEach((lang) => {
|
fs.writeFileSync(
|
||||||
if (!fs.existsSync(`${projectsPrefix}/${lang}`)) fs.mkdirSync(`${projectsPrefix}/${lang}`)
|
`${projectsPrefix}.json`,
|
||||||
|
JSON.stringify({
|
||||||
fs.writeFileSync(`${projectsPrefix}/${lang}.json`, JSON.stringify({
|
success: true,
|
||||||
success: true,
|
projects: projects.map((project) => {
|
||||||
projects: projects.filter((project) => {return project.lang == lang;}).map((project) => {return {slug: project.urlname, lang: project.lang, api: `/api/projects/${project.lang}/${project.urlname}.json`};})
|
return {
|
||||||
}));
|
slug: project.urlname,
|
||||||
});
|
lang: project.lang,
|
||||||
|
api: `/api/projects/${project.lang}/${project.urlname}.json`,
|
||||||
projects.forEach((project) => {
|
};
|
||||||
fs.writeFileSync(`${projectsPrefix}/${project.lang}/${project.urlname}.json`, JSON.stringify({
|
}),
|
||||||
success: true,
|
})
|
||||||
project: {
|
);
|
||||||
slug: project.urlname,
|
|
||||||
lang: project.lang,
|
config.languages.forEach((lang) => {
|
||||||
name: project.name,
|
if (!fs.existsSync(`${projectsPrefix}/${lang}`))
|
||||||
shortDescription: project.shortDescription,
|
fs.mkdirSync(`${projectsPrefix}/${lang}`);
|
||||||
longDescription: project.longDescription,
|
|
||||||
links: project.links !== null ? {
|
fs.writeFileSync(
|
||||||
github: project.links.github,
|
`${projectsPrefix}/${lang}.json`,
|
||||||
website: project.links.website
|
JSON.stringify({
|
||||||
} : null,
|
success: true,
|
||||||
image: project.image.publicURL,
|
projects: projects
|
||||||
featured: project.featured,
|
.filter((project) => {
|
||||||
frontend: `/${project.lang}/projects/${project.urlname}`
|
return project.lang == lang;
|
||||||
}
|
})
|
||||||
}));
|
.map((project) => {
|
||||||
});
|
return {
|
||||||
})
|
slug: project.urlname,
|
||||||
}
|
lang: project.lang,
|
||||||
|
api: `/api/projects/${project.lang}/${project.urlname}.json`,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
projects.forEach((project) => {
|
||||||
|
fs.writeFileSync(
|
||||||
|
`${projectsPrefix}/${project.lang}/${project.urlname}.json`,
|
||||||
|
JSON.stringify({
|
||||||
|
success: true,
|
||||||
|
project: {
|
||||||
|
slug: project.urlname,
|
||||||
|
lang: project.lang,
|
||||||
|
name: project.name,
|
||||||
|
shortDescription: project.shortDescription,
|
||||||
|
longDescription: project.longDescription,
|
||||||
|
links:
|
||||||
|
project.links !== null
|
||||||
|
? {
|
||||||
|
github: project.links.github,
|
||||||
|
website: project.links.website,
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
image: project.image.publicURL,
|
||||||
|
featured: project.featured,
|
||||||
|
frontend: `/${project.lang}/projects/${project.urlname}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -35,4 +35,4 @@
|
||||||
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
|
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
|
||||||
"donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
|
"donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
|
||||||
"sponsorGitHub": "Über GitHub unterstützen"
|
"sponsorGitHub": "Über GitHub unterstützen"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,38 @@
|
||||||
{
|
{
|
||||||
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
||||||
"imprint": "Imprint",
|
"imprint": "Imprint",
|
||||||
"datasec": "Data Protection",
|
"datasec": "Data Protection",
|
||||||
"disclaimer": "Disclaimer",
|
"disclaimer": "Disclaimer",
|
||||||
"projects": "Projects",
|
"projects": "Projects",
|
||||||
"project": "Project",
|
"project": "Project",
|
||||||
"social": "Social",
|
"social": "Social",
|
||||||
"homeHello": "Hello, I am",
|
"homeHello": "Hello, I am",
|
||||||
"homeMe": "I am",
|
"homeMe": "I am",
|
||||||
"homeWebDeveloper": "a web developer",
|
"homeWebDeveloper": "a web developer",
|
||||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
||||||
"homeAboutMe": "About me",
|
"homeAboutMe": "About me",
|
||||||
"homeAboutMeHello": "Hello!",
|
"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.",
|
"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.",
|
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||||
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
||||||
"de": "German",
|
"de": "German",
|
||||||
"en": "English",
|
"en": "English",
|
||||||
"projectAboutHeader": "About {{projectName}}",
|
"projectAboutHeader": "About {{projectName}}",
|
||||||
"projectViewGitHub": "View on GitHub",
|
"projectViewGitHub": "View on GitHub",
|
||||||
"projectViewWebsite": "View Project-Website",
|
"projectViewWebsite": "View Project-Website",
|
||||||
"projectsDescription": "This is what I am working on or have worked on.",
|
"projectsDescription": "This is what I am working on or have worked on.",
|
||||||
"projectView": "View",
|
"projectView": "View",
|
||||||
"socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
|
"socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
|
||||||
"socialDescription": "Find me on other platforms!",
|
"socialDescription": "Find me on other platforms!",
|
||||||
"friends": "Friends",
|
"friends": "Friends",
|
||||||
"friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
|
"friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
|
||||||
"donate": "Donate",
|
"donate": "Donate",
|
||||||
"donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
|
"donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.",
|
||||||
"donateThanks": "Thanks for donating!",
|
"donateThanks": "Thanks for donating!",
|
||||||
"donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
|
"donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
|
||||||
"featuredProjects": "Featured Projects",
|
"featuredProjects": "Featured Projects",
|
||||||
"seeMore": "See more",
|
"seeMore": "See more",
|
||||||
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
|
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
|
||||||
"donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
|
"donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
|
||||||
"sponsorGitHub": "Sponsor using GitHub"
|
"sponsorGitHub": "Sponsor using GitHub"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
49838
package-lock.json
generated
49838
package-lock.json
generated
File diff suppressed because it is too large
Load diff
124
package.json
124
package.json
|
|
@ -1,64 +1,64 @@
|
||||||
{
|
{
|
||||||
"name": "kevink.dev",
|
"name": "kevink.dev",
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "KevinK.dev",
|
"description": "KevinK.dev",
|
||||||
"author": "Kevin Kandlbinder",
|
"author": "Kevin Kandlbinder",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"gatsby"
|
"gatsby"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"develop": "gatsby develop",
|
"develop": "gatsby develop",
|
||||||
"start": "gatsby develop",
|
"start": "gatsby develop",
|
||||||
"build": "gatsby build --prefix-paths",
|
"build": "gatsby build --prefix-paths",
|
||||||
"build:fab": "npm run build && npm run fab:build",
|
"build:fab": "npm run build && npm run fab:build",
|
||||||
"fab:build": "fab build",
|
"fab:build": "fab build",
|
||||||
"fab:serve": "fab serve fab.zip",
|
"fab:serve": "fab serve fab.zip",
|
||||||
"serve": "gatsby serve",
|
"serve": "gatsby serve",
|
||||||
"clean": "gatsby clean"
|
"clean": "gatsby clean"
|
||||||
},
|
},
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/cli": "7.13.14",
|
"@babel/cli": "7.13.14",
|
||||||
"@babel/plugin-transform-typescript": "7.13.0",
|
"@babel/plugin-transform-typescript": "7.13.0",
|
||||||
"animejs": "3.2.1",
|
"animejs": "3.2.1",
|
||||||
"babel-plugin-i18next-extract": "0.8.3",
|
"babel-plugin-i18next-extract": "0.8.3",
|
||||||
"gatsby": "3.2.1",
|
"gatsby": "3.2.1",
|
||||||
"gatsby-cli": "3.2.0",
|
"gatsby-cli": "3.2.0",
|
||||||
"gatsby-plugin-asset-path": "3.0.3",
|
"gatsby-plugin-asset-path": "3.0.3",
|
||||||
"gatsby-plugin-manifest": "3.2.0",
|
"gatsby-plugin-manifest": "3.2.0",
|
||||||
"gatsby-plugin-offline": "4.2.0",
|
"gatsby-plugin-offline": "4.2.0",
|
||||||
"gatsby-plugin-react-helmet": "4.2.0",
|
"gatsby-plugin-react-helmet": "4.2.0",
|
||||||
"gatsby-plugin-react-i18next": "1.1.1",
|
"gatsby-plugin-react-i18next": "1.1.1",
|
||||||
"gatsby-plugin-robots-txt": "1.5.5",
|
"gatsby-plugin-robots-txt": "1.5.5",
|
||||||
"gatsby-plugin-sass": "4.2.0",
|
"gatsby-plugin-sass": "4.2.0",
|
||||||
"gatsby-plugin-sharp": "3.2.1",
|
"gatsby-plugin-sharp": "3.2.1",
|
||||||
"gatsby-plugin-sitemap": "3.2.0",
|
"gatsby-plugin-sitemap": "3.2.0",
|
||||||
"gatsby-source-filesystem": "3.2.0",
|
"gatsby-source-filesystem": "3.2.0",
|
||||||
"gatsby-transformer-json": "3.2.0",
|
"gatsby-transformer-json": "3.2.0",
|
||||||
"gatsby-transformer-sharp": "3.2.0",
|
"gatsby-transformer-sharp": "3.2.0",
|
||||||
"i18next": "20.2.1",
|
"i18next": "20.2.1",
|
||||||
"locale": "0.1.0",
|
"locale": "0.1.0",
|
||||||
"node-sass": "4.14.1",
|
"node-sass": "4.14.1",
|
||||||
"prop-types": "15.7.2",
|
"prop-types": "15.7.2",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-github-btn": "1.2.0",
|
"react-github-btn": "1.2.0",
|
||||||
"react-helmet": "6.1.0",
|
"react-helmet": "6.1.0",
|
||||||
"react-i18next": "11.8.12"
|
"react-i18next": "11.8.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@fab/actions": "1.0.0-rc.3-beta.1",
|
"@fab/actions": "1.0.0-rc.3-beta.1",
|
||||||
"@fab/cli": "1.0.0-rc.3-beta.1",
|
"@fab/cli": "1.0.0-rc.3-beta.1",
|
||||||
"@fab/input-static": "1.0.0-rc.3-beta.1",
|
"@fab/input-static": "1.0.0-rc.3-beta.1",
|
||||||
"@fab/plugin-render-html": "1.0.0-rc.3-beta.1",
|
"@fab/plugin-render-html": "1.0.0-rc.3-beta.1",
|
||||||
"@fab/plugin-rewire-assets": "1.0.0-rc.3-beta.1",
|
"@fab/plugin-rewire-assets": "1.0.0-rc.3-beta.1",
|
||||||
"@fab/server": "1.0.0-rc.3-beta.1",
|
"@fab/server": "1.0.0-rc.3-beta.1",
|
||||||
"babel-eslint": "10.1.0",
|
"babel-eslint": "10.1.0",
|
||||||
"eslint": "7.24.0",
|
"eslint": "7.24.0",
|
||||||
"eslint-loader": "4.0.2",
|
"eslint-loader": "4.0.2",
|
||||||
"eslint-plugin-import": "2.22.1",
|
"eslint-plugin-import": "2.22.1",
|
||||||
"eslint-plugin-react": "7.23.2",
|
"eslint-plugin-react": "7.23.2",
|
||||||
"gatsby-plugin-eslint": "2.0.8"
|
"gatsby-plugin-eslint": "2.0.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": [
|
"extends": ["config:base"],
|
||||||
"config:base"
|
"assignees": ["Unkn0wnCat"],
|
||||||
],
|
"automerge": true,
|
||||||
"assignees": [
|
"baseBranches": ["main"]
|
||||||
"Unkn0wnCat"
|
}
|
||||||
],
|
|
||||||
"automerge": true,
|
|
||||||
"baseBranches": [
|
|
||||||
"main"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
|
||||||
161
src/_mixins.scss
161
src/_mixins.scss
|
|
@ -1,81 +1,80 @@
|
||||||
@import "./variables";
|
@import "./variables";
|
||||||
|
|
||||||
@mixin flexList {
|
@mixin flexList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
|
||||||
|
@mixin cardGeneric {
|
||||||
@mixin cardGeneric {
|
border-radius: 5px;
|
||||||
border-radius: 5px;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
|
||||||
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
|
transition: transform 0.25s, box-shadow 0.25s;
|
||||||
transition: transform .25s, box-shadow .25s;
|
color: $textColor;
|
||||||
color: $textColor;
|
text-decoration: none;
|
||||||
text-decoration: none;
|
margin: 20px;
|
||||||
margin: 20px;
|
background: $background;
|
||||||
background: $background;
|
|
||||||
|
&:hover,
|
||||||
&:hover,
|
&:active,
|
||||||
&:active,
|
&:focus {
|
||||||
&:focus {
|
transform: scale(1.05);
|
||||||
transform: scale(1.05);
|
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
|
||||||
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), -1px 11px 33px -10px rgba($accentColor, .75);
|
-1px 11px 33px -10px rgba($accentColor, 0.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin buttonBasic {
|
@mixin buttonBasic {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: $accentColor;
|
background: $accentColor;
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
box-shadow: 0 0 33px -10px rgba($accentColor, .5);
|
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
|
||||||
transition: box-shadow .25s;
|
transition: box-shadow 0.25s;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 0 33px -10px rgba($accentColor, .9);
|
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button {
|
@mixin button {
|
||||||
@include buttonBasic;
|
@include buttonBasic;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin homeBanner {
|
@mixin homeBanner {
|
||||||
background: lighten($background, 1);
|
background: lighten($background, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
>div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 20px !important;
|
padding: 20px !important;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
font-size: 1.7em;
|
font-size: 1.7em;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
>span {
|
> span {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
>i {
|
> i {
|
||||||
|
display: inline-flex;
|
||||||
display: inline-flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
justify-content: center;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
$layoutWidth: 1200px;
|
$layoutWidth: 1200px;
|
||||||
$accentColor: #e5502b;
|
$accentColor: #e5502b;
|
||||||
$background: #070707;
|
$background: #070707;
|
||||||
$textColor: white;
|
$textColor: white;
|
||||||
$layoutPadding: 20px;
|
$layoutPadding: 20px;
|
||||||
|
|
||||||
$mainFont: 'Anonymous Pro',
|
$mainFont: "Anonymous Pro", monospace;
|
||||||
monospace;
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,31 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import { Link, Trans, useI18next } from 'gatsby-plugin-react-i18next';
|
import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
|
|
||||||
import * as styles from "./languageSwitcher.module.scss";
|
import * as styles from "./languageSwitcher.module.scss";
|
||||||
|
|
||||||
export default function LanguageSwitcher() {
|
export default function LanguageSwitcher() {
|
||||||
const { languages, originalPath } = useI18next();
|
const { languages, originalPath } = useI18next();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.languageModal} id="languageChooser">
|
<div className={styles.languageModal} id="languageChooser">
|
||||||
<div className={styles.languageModalInner}>
|
<div className={styles.languageModalInner}>
|
||||||
<h2>Languages (<a href="#top" className={styles.modalCloseLink}>×</a>)</h2>
|
<h2>
|
||||||
<ul>
|
Languages (
|
||||||
{languages.map((lng) => (
|
<a href="#top" className={styles.modalCloseLink}>
|
||||||
<li key={lng}>
|
×
|
||||||
<Link to={originalPath} language={lng}>
|
</a>
|
||||||
<Trans>{lng}</Trans>
|
)
|
||||||
</Link>
|
</h2>
|
||||||
</li>
|
<ul>
|
||||||
))}
|
{languages.map((lng) => (
|
||||||
</ul>
|
<li key={lng}>
|
||||||
</div>
|
<Link to={originalPath} language={lng}>
|
||||||
</div>
|
<Trans>{lng}</Trans>
|
||||||
);
|
</Link>
|
||||||
}
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, .7);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity .25s;
|
transition: opacity 0.25s;
|
||||||
|
|
||||||
&:target {
|
&:target {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -33,10 +33,9 @@
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration-style: dotted;
|
text-decoration-style: dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modalCloseLink {
|
.modalCloseLink {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
import React, { useEffect, useState } from "react"
|
import React, { useEffect, useState } from "react";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
import { Trans, Link } from "gatsby-plugin-react-i18next"
|
import { Trans, Link } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql, StaticQuery } from 'gatsby'
|
import { graphql, StaticQuery } from "gatsby";
|
||||||
|
|
||||||
import * as styles from './navigation.module.scss'
|
import * as styles from "./navigation.module.scss";
|
||||||
|
|
||||||
const Navigation = ({ isHome }) => {
|
const Navigation = ({ isHome }) => {
|
||||||
let [atTop, setAtTop] = useState(false);
|
let [atTop, setAtTop] = useState(false);
|
||||||
|
|
||||||
const updateTransparency = () => {
|
const updateTransparency = () => {
|
||||||
if(typeof window === "undefined") return;
|
if (typeof window === "undefined") return;
|
||||||
|
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
if (window.scrollY < 15) {
|
if (window.scrollY < 15) {
|
||||||
if(!atTop) setAtTop(true);
|
if (!atTop) setAtTop(true);
|
||||||
} else {
|
} else {
|
||||||
if(atTop) setAtTop(false);
|
if (atTop) setAtTop(false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(typeof window === "undefined") return;
|
if (typeof window === "undefined") return;
|
||||||
|
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
window.addEventListener("scroll", updateTransparency);
|
window.addEventListener("scroll", updateTransparency);
|
||||||
|
|
@ -30,7 +30,7 @@ const Navigation = ({ isHome }) => {
|
||||||
updateTransparency();
|
updateTransparency();
|
||||||
|
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
let int = window.setInterval(updateTransparency, 10000)
|
let int = window.setInterval(updateTransparency, 10000);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
|
|
@ -40,33 +40,52 @@ const Navigation = ({ isHome }) => {
|
||||||
|
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
window.clearInterval(int);
|
window.clearInterval(int);
|
||||||
}
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.topBar + (isHome ? " "+styles.homeBar : "") + (atTop ? " "+styles.homeBarTransparent : "")}>
|
<div
|
||||||
<nav className={styles.topBarInner}>
|
className={
|
||||||
<StaticQuery query={graphql`
|
styles.topBar +
|
||||||
query {
|
(isHome ? " " + styles.homeBar : "") +
|
||||||
site {
|
(atTop ? " " + styles.homeBarTransparent : "")
|
||||||
siteMetadata {
|
}
|
||||||
title
|
>
|
||||||
}
|
<nav className={styles.topBarInner}>
|
||||||
}
|
<StaticQuery
|
||||||
}
|
query={graphql`
|
||||||
`} render={data => (
|
query {
|
||||||
<Link to="/" activeClassName={styles.active}>{data.site.siteMetadata.title}</Link>
|
site {
|
||||||
)} />
|
siteMetadata {
|
||||||
<div className="flexSpacer"></div>
|
title
|
||||||
<Link id="navBtnProjects" to="/projects" activeClassName={styles.active}><Trans>projects</Trans></Link>
|
}
|
||||||
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}><Trans>social</Trans></Link>
|
}
|
||||||
</nav>
|
}
|
||||||
</div>
|
`}
|
||||||
|
render={(data) => (
|
||||||
|
<Link to="/" activeClassName={styles.active}>
|
||||||
|
{data.site.siteMetadata.title}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flexSpacer"></div>
|
||||||
|
<Link
|
||||||
|
id="navBtnProjects"
|
||||||
|
to="/projects"
|
||||||
|
activeClassName={styles.active}
|
||||||
|
>
|
||||||
|
<Trans>projects</Trans>
|
||||||
|
</Link>
|
||||||
|
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}>
|
||||||
|
<Trans>social</Trans>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Navigation.propTypes = {
|
Navigation.propTypes = {
|
||||||
isHome: PropTypes.bool.isRequired
|
isHome: PropTypes.bool.isRequired,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Navigation;
|
export default Navigation;
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,13 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba($background, .95);
|
background: rgba($background, 0.95);
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
transition: background .25s;
|
transition: background 0.25s;
|
||||||
|
|
||||||
@supports(backdrop-filter: blur(5px)) {
|
@supports (backdrop-filter: blur(5px)) {
|
||||||
background: rgba($background, .9);
|
background: rgba($background, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topBarInner {
|
.topBarInner {
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
border-top: 2px solid transparent;
|
border-top: 2px solid transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: rgba(255, 255, 255, .25);
|
border-color: rgba(255, 255, 255, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
|
@ -53,9 +53,7 @@
|
||||||
backdrop-filter: blur(0);
|
backdrop-filter: blur(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.flexSpacer {
|
.flexSpacer {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,92 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
import { Helmet } from "gatsby-plugin-react-i18next"
|
import { Helmet } from "gatsby-plugin-react-i18next";
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
import { useStaticQuery, graphql } from "gatsby";
|
||||||
import { useTranslation } from 'gatsby-plugin-react-i18next';
|
import { useTranslation } from "gatsby-plugin-react-i18next";
|
||||||
|
|
||||||
function SEO({ description, meta, title }) {
|
function SEO({ description, meta, title }) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { site } = useStaticQuery(
|
const { site } = useStaticQuery(
|
||||||
graphql`
|
graphql`
|
||||||
query {
|
query {
|
||||||
site {
|
site {
|
||||||
siteMetadata {
|
siteMetadata {
|
||||||
title
|
title
|
||||||
author
|
author
|
||||||
keywords
|
keywords
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
)
|
);
|
||||||
|
|
||||||
const metaDescription = description || t("siteDescription");
|
const metaDescription = description || t("siteDescription");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Helmet
|
<Helmet
|
||||||
title={title}
|
title={title}
|
||||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||||
meta={[
|
meta={[
|
||||||
{
|
{
|
||||||
name: `description`,
|
name: `description`,
|
||||||
content: metaDescription,
|
content: metaDescription,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:title`,
|
property: `og:title`,
|
||||||
content: title,
|
content: title,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:description`,
|
property: `og:description`,
|
||||||
content: metaDescription,
|
content: metaDescription,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
property: `og:type`,
|
property: `og:type`,
|
||||||
content: `website`,
|
content: `website`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:card`,
|
name: `twitter:card`,
|
||||||
content: `summary`,
|
content: `summary`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:creator`,
|
name: `twitter:creator`,
|
||||||
content: site.siteMetadata.author,
|
content: site.siteMetadata.author,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:title`,
|
name: `twitter:title`,
|
||||||
content: title,
|
content: title,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `twitter:description`,
|
name: `twitter:description`,
|
||||||
content: metaDescription,
|
content: metaDescription,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "keywords",
|
name: "keywords",
|
||||||
content: site.siteMetadata.keywords
|
content: site.siteMetadata.keywords,
|
||||||
}
|
},
|
||||||
].concat(meta)}
|
].concat(meta)}
|
||||||
>
|
>
|
||||||
<script src="https://kit.fontawesome.com/1377f925e0.js" crossOrigin="anonymous"></script>
|
<script
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
src="https://kit.fontawesome.com/1377f925e0.js"
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap" rel="stylesheet" />
|
crossOrigin="anonymous"
|
||||||
</Helmet>
|
></script>
|
||||||
)
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
}
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap"
|
||||||
SEO.defaultProps = {
|
rel="stylesheet"
|
||||||
meta: [],
|
/>
|
||||||
description: ``,
|
</Helmet>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
SEO.propTypes = {
|
|
||||||
description: PropTypes.string,
|
SEO.defaultProps = {
|
||||||
meta: PropTypes.arrayOf(PropTypes.object),
|
meta: [],
|
||||||
title: PropTypes.string.isRequired,
|
description: ``,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default SEO
|
SEO.propTypes = {
|
||||||
|
description: PropTypes.string,
|
||||||
|
meta: PropTypes.arrayOf(PropTypes.object),
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SEO;
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,62 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
import Navigation from "../components/navigation"
|
import Navigation from "../components/navigation";
|
||||||
import SEO from "../components/seo";
|
import SEO from "../components/seo";
|
||||||
|
|
||||||
import "./default.scss";
|
import "./default.scss";
|
||||||
import { Link, Trans } from 'gatsby-plugin-react-i18next';
|
import { Link, Trans } from "gatsby-plugin-react-i18next";
|
||||||
import LanguageSwitcher from "../components/languageSwitcher";
|
import LanguageSwitcher from "../components/languageSwitcher";
|
||||||
|
|
||||||
class Layout extends React.Component {
|
class Layout extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
|
<SEO
|
||||||
<Navigation isHome={this.props.transparentTopbar} />
|
description={this.props.description}
|
||||||
<div id="content" role="main">
|
lang={this.props.lang}
|
||||||
{this.props.children}
|
meta={this.props.meta}
|
||||||
</div>
|
title={this.props.title}
|
||||||
<footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" className="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" className="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" className="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
|
/>
|
||||||
|
<Navigation isHome={this.props.transparentTopbar} />
|
||||||
<LanguageSwitcher />
|
<div id="content" role="main">
|
||||||
</>
|
{this.props.children}
|
||||||
);
|
</div>
|
||||||
}
|
<footer role="contentinfo">
|
||||||
|
CC-BY 4.0 Kevin Kandlbinder,{" "}
|
||||||
|
<Link to="/legal/about" className="spf-link">
|
||||||
|
<Trans i18nKey="imprint">Imprint</Trans>
|
||||||
|
</Link>{" "}
|
||||||
|
|{" "}
|
||||||
|
<Link to="/legal/datasec" className="spf-link">
|
||||||
|
<Trans i18nKey="datasec">Data Protection</Trans>
|
||||||
|
</Link>{" "}
|
||||||
|
|{" "}
|
||||||
|
<Link to="/legal/disclaimer" className="spf-link">
|
||||||
|
<Trans i18nKey="disclaimer">Disclaimer</Trans>
|
||||||
|
</Link>{" "}
|
||||||
|
| <a href="#languageChooser">Language</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<LanguageSwitcher />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Layout.defaultProps = {
|
Layout.defaultProps = {
|
||||||
module: `none`,
|
module: `none`,
|
||||||
meta: [],
|
meta: [],
|
||||||
description: ``,
|
description: ``,
|
||||||
transparentTopbar: false
|
transparentTopbar: false,
|
||||||
}
|
};
|
||||||
|
|
||||||
Layout.propTypes = {
|
Layout.propTypes = {
|
||||||
description: PropTypes.string,
|
description: PropTypes.string,
|
||||||
lang: PropTypes.string,
|
lang: PropTypes.string,
|
||||||
meta: PropTypes.arrayOf(PropTypes.object),
|
meta: PropTypes.arrayOf(PropTypes.object),
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
transparentTopbar: PropTypes.bool,
|
transparentTopbar: PropTypes.bool,
|
||||||
children: PropTypes.any.isRequired
|
children: PropTypes.any.isRequired,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|
|
||||||
|
|
@ -41,16 +41,15 @@ footer {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.flexSpacer {
|
.flexSpacer {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section>div:not(.profile),
|
section > div:not(.profile),
|
||||||
section>article,
|
section > article,
|
||||||
.section>div:not(.profile),
|
.section > div:not(.profile),
|
||||||
.section>article {
|
.section > article {
|
||||||
max-width: $layoutWidth;
|
max-width: $layoutWidth;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 39px 20px;
|
padding: 39px 20px;
|
||||||
|
|
@ -72,4 +71,3 @@ article {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import * as React from "react"
|
import * as React from "react";
|
||||||
import { Link } from "gatsby-plugin-react-i18next"
|
import { Link } from "gatsby-plugin-react-i18next";
|
||||||
import Layout from "../layouts/default"
|
import Layout from "../layouts/default";
|
||||||
|
|
||||||
const NotFoundPage = () => {
|
const NotFoundPage = () => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -9,12 +9,13 @@ const NotFoundPage = () => {
|
||||||
<article>
|
<article>
|
||||||
<h1>Page not found</h1>
|
<h1>Page not found</h1>
|
||||||
<p>
|
<p>
|
||||||
Whoops... That page doesn't exist, so you may as well <Link to="/">go home</Link>.
|
Whoops... That page doesn't exist, so you may as well{" "}
|
||||||
|
<Link to="/">go home</Link>.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default NotFoundPage
|
export default NotFoundPage;
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
import React, { useState } from "react"
|
import React, { useState } from "react";
|
||||||
import Layout from "../layouts/default";
|
import Layout from "../layouts/default";
|
||||||
import { graphql } from "gatsby";
|
import { graphql } from "gatsby";
|
||||||
import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
|
import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
import GitHubButton from 'react-github-btn'
|
import GitHubButton from "react-github-btn";
|
||||||
|
|
||||||
import * as styles from "./donate.module.scss";
|
import * as styles from "./donate.module.scss";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query ($language: String!) {
|
query($language: String!) {
|
||||||
site {
|
site {
|
||||||
siteMetadata {
|
siteMetadata {
|
||||||
title
|
title
|
||||||
siteUrl
|
siteUrl
|
||||||
payPalMail
|
payPalMail
|
||||||
contactGitHub
|
contactGitHub
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
file(relativePath: { eq: "images/pplogo.png" }) {
|
||||||
file(relativePath: {eq: "images/pplogo.png"}) {
|
|
||||||
childImageSharp {
|
childImageSharp {
|
||||||
resize(width: 240, height: 240, fit: CONTAIN) {
|
resize(width: 240, height: 240, fit: CONTAIN) {
|
||||||
src
|
src
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
data
|
data
|
||||||
language
|
language
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function DonatePage(props) {
|
function DonatePage(props) {
|
||||||
|
|
@ -47,23 +47,81 @@ function DonatePage(props) {
|
||||||
<Layout title={t("donate")} description={t("donationCatchphrase")}>
|
<Layout title={t("donate")} description={t("donationCatchphrase")}>
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>donate</Trans></h1>
|
<h1>
|
||||||
|
<Trans>donate</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p><Trans>donateDescription</Trans></p>
|
<p>
|
||||||
|
<Trans>donateDescription</Trans>
|
||||||
|
</p>
|
||||||
|
|
||||||
<p><Trans>donateGitHub</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 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>
|
<p>
|
||||||
|
<Trans>donatePayPal</Trans>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className={styles.priceAmount}>
|
<div className={styles.priceAmount}>
|
||||||
<label htmlFor="priceInput" className={styles.sronly}>Amount</label>
|
<label htmlFor="priceInput" className={styles.sronly}>
|
||||||
<input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => { setAmount(ev.target.value) }} name="priceInput" id="priceInput" />
|
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>€</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>
|
<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>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
@ -71,7 +129,7 @@ function DonatePage(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
DonatePage.propTypes = {
|
DonatePage.propTypes = {
|
||||||
data: PropTypes.object.isRequired
|
data: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DonatePage;
|
export default DonatePage;
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
@import "../mixins";
|
@import "../mixins";
|
||||||
|
|
||||||
.priceAmount {
|
.priceAmount {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
border: thin solid rgba(0, 0, 0, .25);
|
border: thin solid rgba(0, 0, 0, 0.25);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
border: none;
|
border: none;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
border-right: thin solid rgba(0, 0, 0, .25);
|
border-right: thin solid rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.donateButton {
|
.donateButton {
|
||||||
@include button;
|
@include button;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sronly {
|
.sronly {
|
||||||
border: 0;
|
border: 0;
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../../layouts/default";
|
import Layout from "../../layouts/default";
|
||||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from "gatsby";
|
import { graphql } from "gatsby";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query GetThankYouPage($language: String!) {
|
query GetThankYouPage($language: String!) {
|
||||||
|
|
@ -11,7 +11,7 @@ export const query = graphql`
|
||||||
contactEmail
|
contactEmail
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -21,10 +21,10 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
function ThankYouPage(props) {
|
function ThankYouPage(props) {
|
||||||
const { site } = props.data
|
const { site } = props.data;
|
||||||
|
|
||||||
let contactEmail = site.siteMetadata.contactEmail;
|
let contactEmail = site.siteMetadata.contactEmail;
|
||||||
const { t } = useI18next();
|
const { t } = useI18next();
|
||||||
|
|
@ -32,9 +32,16 @@ function ThankYouPage(props) {
|
||||||
<Layout title={t("donate")}>
|
<Layout title={t("donate")}>
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>donateThanks</Trans></h1>
|
<h1>
|
||||||
|
<Trans>donateThanks</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p><Trans contactEmail={contactEmail} i18nKey="donateThanksText">donateThanksText<a href={"mailto:" + contactEmail}>{{ contactEmail }}</a></Trans></p>
|
<p>
|
||||||
|
<Trans contactEmail={contactEmail} i18nKey="donateThanksText">
|
||||||
|
donateThanksText
|
||||||
|
<a href={"mailto:" + contactEmail}>{{ contactEmail }}</a>
|
||||||
|
</Trans>
|
||||||
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
@ -42,7 +49,7 @@ function ThankYouPage(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ThankYouPage.propTypes = {
|
ThankYouPage.propTypes = {
|
||||||
data: PropTypes.object.isRequired
|
data: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ThankYouPage;
|
export default ThankYouPage;
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../layouts/default";
|
import Layout from "../layouts/default";
|
||||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from 'gatsby'
|
import { graphql } from "gatsby";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import * as styles from "./friends.module.scss";
|
import * as styles from "./friends.module.scss";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query AllFriendsQuery($language: String!) {
|
query AllFriendsQuery($language: String!) {
|
||||||
allFriendsJson {
|
allFriendsJson {
|
||||||
nodes {
|
nodes {
|
||||||
name
|
name
|
||||||
|
|
@ -16,7 +16,7 @@ query AllFriendsQuery($language: String!) {
|
||||||
imageURL
|
imageURL
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -26,55 +26,71 @@ query AllFriendsQuery($language: String!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
`;
|
||||||
`
|
|
||||||
|
|
||||||
const FriendsPage = ({ data }) => {
|
const FriendsPage = ({ data }) => {
|
||||||
|
const { t } = useI18next();
|
||||||
|
|
||||||
const { t } = useI18next();
|
function shuffle(a) {
|
||||||
|
for (let i = a.length - 1; i > 0; i--) {
|
||||||
function shuffle(a) {
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
for (let i = a.length - 1; i > 0; i--) {
|
[a[i], a[j]] = [a[j], a[i]];
|
||||||
const j = Math.floor(Math.random() * (i + 1));
|
|
||||||
[a[i], a[j]] = [a[j], a[i]];
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
}
|
}
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title={t("friends")} description={t("friendsDescription")}>
|
<Layout title={t("friends")} description={t("friendsDescription")}>
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>social</Trans></h1>
|
<h1>
|
||||||
|
<Trans>social</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p><Trans>friendsDescription</Trans></p>
|
<p>
|
||||||
|
<Trans>friendsDescription</Trans>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className={styles.friendsList}>
|
<div className={styles.friendsList}>
|
||||||
{
|
{shuffle(data.allFriendsJson.nodes).map((friend) => {
|
||||||
shuffle(data.allFriendsJson.nodes).map((friend) => {
|
return (
|
||||||
return (
|
<div
|
||||||
<div className={styles.friendProfile} key={friend.url + "#" + friend.name}>
|
className={styles.friendProfile}
|
||||||
<div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}>
|
key={friend.url + "#" + friend.name}
|
||||||
<span className={styles.friendName}>{friend.name}</span>
|
>
|
||||||
<span className={styles.friendTitle}>{friend.profession}</span>
|
<div
|
||||||
</div>
|
className={styles.friendImage}
|
||||||
|
style={{ backgroundImage: "url(" + friend.imageURL + ")" }}
|
||||||
|
>
|
||||||
|
<span className={styles.friendName}>{friend.name}</span>
|
||||||
|
<span className={styles.friendTitle}>
|
||||||
|
{friend.profession}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.contactLinks}>
|
<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>
|
<a
|
||||||
</div>
|
className={styles.contactLink}
|
||||||
</div>
|
href={friend.url}
|
||||||
);
|
target="_blank"
|
||||||
})
|
rel="noreferrer"
|
||||||
}
|
>
|
||||||
</div>
|
<i className="fas fa-globe-europe" aria-hidden="true"></i>{" "}
|
||||||
</article>
|
{friend.url}
|
||||||
</section>
|
</a>
|
||||||
</Layout>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
})}
|
||||||
FriendsPage.propTypes = {
|
</div>
|
||||||
data: PropTypes.object.isRequired
|
</article>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default FriendsPage;
|
FriendsPage.propTypes = {
|
||||||
|
data: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FriendsPage;
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,62 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
@import "../mixins";
|
@import "../mixins";
|
||||||
|
|
||||||
.friendsList {
|
.friendsList {
|
||||||
@include flexList;
|
@include flexList;
|
||||||
|
|
||||||
.friendProfile {
|
.friendProfile {
|
||||||
@include cardGeneric;
|
@include cardGeneric;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
.friendImage {
|
.friendImage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||||
|
|
||||||
.friendName {
|
.friendName {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.friendTitle {
|
.friendTitle {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.friendBio {
|
.friendBio {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactLinks {
|
.contactLinks {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.contactLink {
|
.contactLink {
|
||||||
transition: text-decoration .5s;
|
transition: text-decoration 0.5s;
|
||||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||||
padding: 6px 0 6px 25px;
|
padding: 6px 0 6px 25px;
|
||||||
color: $textColor;
|
color: $textColor;
|
||||||
|
|
||||||
>i {
|
> i {
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
margin-left: -25px;
|
margin-left: -25px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,15 @@
|
||||||
import * as React from "react"
|
import * as React from "react";
|
||||||
import Layout from "../layouts/default"
|
import Layout from "../layouts/default";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import * as styles from "./index.module.scss"
|
import * as styles from "./index.module.scss";
|
||||||
import * as projectStyles from "./projects.module.scss"
|
import * as projectStyles from "./projects.module.scss";
|
||||||
|
|
||||||
import { Trans, Link } from "gatsby-plugin-react-i18next"
|
import { Trans, Link } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from "gatsby";
|
import { graphql } from "gatsby";
|
||||||
|
|
||||||
import anime from "animejs";
|
import anime from "animejs";
|
||||||
|
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query GetMetaAndProjects($language: String) {
|
query GetMetaAndProjects($language: String) {
|
||||||
site {
|
site {
|
||||||
|
|
@ -24,7 +23,10 @@ export const query = graphql`
|
||||||
contactMastodonHref
|
contactMastodonHref
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
allProjectsJson(filter: {lang: {eq: $language}, featured: {gte: 0}}, sort: {fields: featured, order: ASC}) {
|
allProjectsJson(
|
||||||
|
filter: { lang: { eq: $language }, featured: { gte: 0 } }
|
||||||
|
sort: { fields: featured, order: ASC }
|
||||||
|
) {
|
||||||
nodes {
|
nodes {
|
||||||
lang
|
lang
|
||||||
urlname
|
urlname
|
||||||
|
|
@ -40,7 +42,7 @@ export const query = graphql`
|
||||||
featured
|
featured
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -55,26 +57,29 @@ export const query = graphql`
|
||||||
class IndexPage extends React.Component {
|
class IndexPage extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
anime({
|
anime({
|
||||||
targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"],
|
targets: [
|
||||||
|
"." + styles.profileCard + " > span",
|
||||||
|
"." + styles.profileCard + " a",
|
||||||
|
],
|
||||||
opacity: [0, 1],
|
opacity: [0, 1],
|
||||||
translateX: [100, 0],
|
translateX: [100, 0],
|
||||||
duration: 250,
|
duration: 250,
|
||||||
delay: anime.stagger(20),
|
delay: anime.stagger(20),
|
||||||
easing: 'easeInOutCirc'
|
easing: "easeInOutCirc",
|
||||||
});
|
});
|
||||||
anime({
|
anime({
|
||||||
targets: ["."+styles.profileImageDummy],
|
targets: ["." + styles.profileImageDummy],
|
||||||
translateX: [0, -3],
|
translateX: [0, -3],
|
||||||
translateY: [0, 3],
|
translateY: [0, 3],
|
||||||
duration: 250,
|
duration: 250,
|
||||||
easing: 'easeInOutCirc'
|
easing: "easeInOutCirc",
|
||||||
});
|
});
|
||||||
anime({
|
anime({
|
||||||
targets: ["."+styles.profileImage],
|
targets: ["." + styles.profileImage],
|
||||||
translateX: [0, 4],
|
translateX: [0, 4],
|
||||||
translateY: [0, -4],
|
translateY: [0, -4],
|
||||||
duration: 250,
|
duration: 250,
|
||||||
easing: 'easeInOutCirc'
|
easing: "easeInOutCirc",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -85,45 +90,128 @@ class IndexPage extends React.Component {
|
||||||
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
||||||
<section className={styles.heroSection}>
|
<section className={styles.heroSection}>
|
||||||
<div className={styles.profile + " profile"}>
|
<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
|
||||||
|
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.profileImageDummy}></div>
|
||||||
<div className={styles.profileCard}>
|
<div className={styles.profileCard}>
|
||||||
<span className={styles.hello}><Trans>homeHello</Trans></span>
|
<span className={styles.hello}>
|
||||||
|
<Trans>homeHello</Trans>
|
||||||
|
</span>
|
||||||
<span className={styles.name}>Kevin Kandlbinder</span>
|
<span className={styles.name}>Kevin Kandlbinder</span>
|
||||||
<span className={styles.description}><Trans>homeMe</Trans> <span id="descriptionType"><Trans>homeWebDeveloper</Trans></span>.</span>
|
<span className={styles.description}>
|
||||||
|
<Trans>homeMe</Trans>{" "}
|
||||||
|
<span id="descriptionType">
|
||||||
|
<Trans>homeWebDeveloper</Trans>
|
||||||
|
</span>
|
||||||
|
.
|
||||||
|
</span>
|
||||||
|
|
||||||
<div className={styles.contactLinks}>
|
<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
|
||||||
<a className={styles.contactLink} href={"mailto:" + meta.contactEmail} rel="me"><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a>
|
className={styles.contactLink}
|
||||||
<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>
|
href={"tel:" + meta.contactPhone}
|
||||||
<a className={styles.contactLink} href={meta.contactMastodonHref} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-mastodon"></i>{meta.contactMastodon}</a>
|
rel="me"
|
||||||
<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>
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="aboutSection">
|
<section className="aboutSection">
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>homeAboutMe</Trans></h1>
|
<h1>
|
||||||
<p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
|
<Trans>homeAboutMe</Trans>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
<Trans>homeAboutMeHello</Trans>
|
||||||
|
<br />
|
||||||
|
<Trans>homeAboutMeText</Trans>
|
||||||
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer">
|
<a
|
||||||
|
className={styles.creditSection}
|
||||||
|
href="https://unsplash.com/@jannikkiel"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<span><i className="fas fa-fw fa-camera"></i> <Trans>homeImageCredit</Trans></span>
|
<span>
|
||||||
|
<i className="fas fa-fw fa-camera"></i>{" "}
|
||||||
|
<Trans>homeImageCredit</Trans>
|
||||||
|
</span>
|
||||||
<i className="fas fa-fw fa-chevron-right"></i>
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<section className="featuredSection">
|
<section className="featuredSection">
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>featuredProjects</Trans></h1>
|
<h1>
|
||||||
|
<Trans>featuredProjects</Trans>
|
||||||
|
</h1>
|
||||||
<div className={projectStyles.projectList}>
|
<div className={projectStyles.projectList}>
|
||||||
{this.props.data.allProjectsJson.nodes.map((project) => {
|
{this.props.data.allProjectsJson.nodes.map((project) => {
|
||||||
return (
|
return (
|
||||||
<Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
|
<Link
|
||||||
<div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
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}>
|
<div className={projectStyles.projectCardMeta}>
|
||||||
<span className={projectStyles.projectCardTitle}>{project.name}</span>
|
<span className={projectStyles.projectCardTitle}>
|
||||||
|
{project.name}
|
||||||
|
</span>
|
||||||
<span>{project.shortDescription}</span>
|
<span>{project.shortDescription}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -131,22 +219,27 @@ class IndexPage extends React.Component {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link>
|
<Link to="/projects" className={styles.seeMoreButton}>
|
||||||
|
<Trans>seeMore</Trans>{" "}
|
||||||
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
|
</Link>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<Link className={styles.donationSection} to="/donate">
|
<Link className={styles.donationSection} to="/donate">
|
||||||
<div>
|
<div>
|
||||||
<span><Trans>donationCatchphrase</Trans></span>
|
<span>
|
||||||
|
<Trans>donationCatchphrase</Trans>
|
||||||
|
</span>
|
||||||
<i className="fas fa-fw fa-chevron-right"></i>
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
IndexPage.propTypes = {
|
IndexPage.propTypes = {
|
||||||
data: PropTypes.object.isRequired
|
data: PropTypes.object.isRequired,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default IndexPage
|
export default IndexPage;
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,11 @@
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(to bottom, transparent 80%, $background), radial-gradient(ellipse at top left, #1f0ba659, transparent), radial-gradient(ellipse at bottom right, #4a086829, transparent);
|
background: linear-gradient(to bottom, transparent 80%, $background),
|
||||||
|
radial-gradient(ellipse at top left, #1f0ba659, transparent),
|
||||||
|
radial-gradient(ellipse at bottom right, #4a086829, transparent);
|
||||||
|
|
||||||
@media(pointer: coarse),
|
@media (pointer: coarse), (pointer: none) {
|
||||||
(pointer: none) {
|
|
||||||
min-height: 700px;
|
min-height: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -24,7 +25,7 @@
|
||||||
|
|
||||||
.hello {
|
.hello {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
opacity: .75;
|
opacity: 0.75;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
|
|
@ -47,13 +48,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactLink {
|
.contactLink {
|
||||||
transition: text-decoration .5s;
|
transition: text-decoration 0.5s;
|
||||||
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
text-decoration: underline dotted rgba(0, 0, 0, 0);
|
||||||
padding: 6px 0 6px 25px;
|
padding: 6px 0 6px 25px;
|
||||||
color: $textColor;
|
color: $textColor;
|
||||||
|
|
||||||
@media(pointer: coarse),
|
@media (pointer: coarse), (pointer: none) {
|
||||||
(pointer: none) {
|
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -61,10 +61,10 @@
|
||||||
|
|
||||||
.contactLink:hover,
|
.contactLink:hover,
|
||||||
.contactLink:active {
|
.contactLink:active {
|
||||||
text-decoration: underline dotted rgba(0, 0, 0, .5);
|
text-decoration: underline dotted rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contactLink>i {
|
.contactLink > i {
|
||||||
color: $accentColor;
|
color: $accentColor;
|
||||||
margin-left: -25px;
|
margin-left: -25px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
background-color: #1c1c1c;
|
background-color: #1c1c1c;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
transition: transform .25s;
|
transition: transform 0.25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profileImage {
|
.profileImage {
|
||||||
|
|
@ -101,11 +101,10 @@
|
||||||
.profileImageDummy {
|
.profileImageDummy {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background: $accentColor;
|
background: $accentColor;
|
||||||
opacity: .2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 590px) {
|
@media (max-width: 590px) {
|
||||||
|
|
||||||
.profileImage,
|
.profileImage,
|
||||||
.profileImageDummy {
|
.profileImageDummy {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -115,11 +114,8 @@
|
||||||
padding: 20px 20px 20px 20px;
|
padding: 20px 20px 20px 20px;
|
||||||
transform: translate(20px, 20px);
|
transform: translate(20px, 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.amazonAlexaSection,
|
.amazonAlexaSection,
|
||||||
|
|
@ -131,13 +127,13 @@
|
||||||
.creditSection {
|
.creditSection {
|
||||||
@include homeBanner;
|
@include homeBanner;
|
||||||
|
|
||||||
>div {
|
> div {
|
||||||
padding: 15px !important;
|
padding: 15px !important;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
>span>i {
|
> span > i {
|
||||||
line-height: 15px !important;
|
line-height: 15px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -149,4 +145,4 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../../layouts/default";
|
import Layout from "../../layouts/default";
|
||||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from "gatsby";
|
import { graphql } from "gatsby";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query ($language: String!) {
|
query($language: String!) {
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -15,27 +15,42 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
export default function ImprintPage() {
|
export default function ImprintPage() {
|
||||||
|
const { t } = useI18next();
|
||||||
|
return (
|
||||||
|
<Layout title={t("imprint")}>
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<h1>
|
||||||
|
<Trans>imprint</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
const { t } = useI18next();
|
<p>Angaben gemäß § 5 TMG</p>
|
||||||
return (
|
<p>
|
||||||
<Layout title={t("imprint")}>
|
Kevin Kandlbinder
|
||||||
<section>
|
<br />
|
||||||
<article>
|
Eichenweg 48
|
||||||
<h1><Trans>imprint</Trans></h1>
|
<br />
|
||||||
|
25451 Quickborn <br />
|
||||||
<p>Angaben gemäß § 5 TMG</p><p>Kevin Kandlbinder<br />
|
</p>
|
||||||
Eichenweg 48<br />
|
<p>
|
||||||
25451 Quickborn <br />
|
{" "}
|
||||||
</p><p> <strong>Vertreten durch: </strong><br />
|
<strong>Vertreten durch: </strong>
|
||||||
Kevin Kandlbinder<br />
|
<br />
|
||||||
</p><p><strong>Kontakt:</strong> <br />
|
Kevin Kandlbinder
|
||||||
Telefon: +49 4106 8068004<br />
|
<br />
|
||||||
E-Mail: <a href='mailto:contact@kevink.dev'>contact@kevink.dev</a><br /></p>
|
</p>
|
||||||
</article>
|
<p>
|
||||||
</section>
|
<strong>Kontakt:</strong> <br />
|
||||||
</Layout>
|
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 one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../../layouts/default";
|
import Layout from "../../layouts/default";
|
||||||
import { Trans, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from "gatsby";
|
import { graphql } from "gatsby";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query ($language: String!) {
|
query($language: String!) {
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -15,36 +15,80 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
export default function DisclaimerPage() {
|
export default function DisclaimerPage() {
|
||||||
|
const { t } = useI18next();
|
||||||
|
return (
|
||||||
|
<Layout title={t("disclaimer")}>
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<h1>
|
||||||
|
<Trans>disclaimer</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
const { t } = useI18next();
|
<h2>Haftung für Inhalte</h2>
|
||||||
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>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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<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>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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<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>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
|
||||||
<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>
|
wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
|
||||||
</article>
|
werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
|
||||||
</section>
|
trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
|
||||||
</Layout>
|
wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
|
||||||
);
|
Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
|
||||||
}
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../layouts/default";
|
import Layout from "../layouts/default";
|
||||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from 'gatsby'
|
import { graphql } from "gatsby";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import * as styles from "./projects.module.scss";
|
import * as styles from "./projects.module.scss";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query GetProjects($language: String) {
|
query GetProjects($language: String) {
|
||||||
allProjectsJson(filter: {lang: {eq: $language}}) {
|
allProjectsJson(filter: { lang: { eq: $language } }) {
|
||||||
nodes {
|
nodes {
|
||||||
lang
|
lang
|
||||||
urlname
|
urlname
|
||||||
name
|
name
|
||||||
image {
|
image {
|
||||||
childImageSharp {
|
childImageSharp {
|
||||||
resize(width: 400, quality: 90) {
|
resize(width: 400, quality: 90) {
|
||||||
src
|
src
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
shortDescription
|
||||||
}
|
}
|
||||||
shortDescription
|
|
||||||
}
|
}
|
||||||
}
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -32,27 +32,42 @@ query GetProjects($language: String) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
const ProjectsPage = ({ data }) => {
|
const ProjectsPage = ({ data }) => {
|
||||||
|
|
||||||
const { t } = useI18next();
|
const { t } = useI18next();
|
||||||
return (
|
return (
|
||||||
<Layout title={t("projects")} description={t("projectsDescription")}>
|
<Layout title={t("projects")} description={t("projectsDescription")}>
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans>projects</Trans></h1>
|
<h1>
|
||||||
|
<Trans>projects</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<p><Trans>projectsDescription</Trans></p>
|
<p>
|
||||||
|
<Trans>projectsDescription</Trans>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className={styles.projectList}>
|
<div className={styles.projectList}>
|
||||||
{data.allProjectsJson.nodes.map((project) => {
|
{data.allProjectsJson.nodes.map((project) => {
|
||||||
return (
|
return (
|
||||||
<Link className={styles.projectCard} key={project.lang + project.urlname} to={"/projects/" + project.urlname}>
|
<Link
|
||||||
<div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
|
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}>
|
<div className={styles.projectCardMeta}>
|
||||||
<span className={styles.projectCardTitle}>{project.name}</span>
|
<span className={styles.projectCardTitle}>
|
||||||
|
{project.name}
|
||||||
|
</span>
|
||||||
<span>{project.shortDescription}</span>
|
<span>{project.shortDescription}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -64,10 +79,10 @@ const ProjectsPage = ({ data }) => {
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ProjectsPage.propTypes = {
|
ProjectsPage.propTypes = {
|
||||||
data: PropTypes.object
|
data: PropTypes.object,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ProjectsPage;
|
export default ProjectsPage;
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,89 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
@import "../mixins";
|
@import "../mixins";
|
||||||
|
|
||||||
.projectList {
|
.projectList {
|
||||||
@include flexList;
|
@include flexList;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCard {
|
.projectCard {
|
||||||
@include cardGeneric;
|
@include cardGeneric;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
.projectCardActivityIndicator {
|
.projectCardActivityIndicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 12px;
|
margin: 12px;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
&.activityIndicatorGreen {
|
&.activityIndicatorGreen {
|
||||||
background: #26de81;
|
background: #26de81;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.activityIndicatorYellow {
|
&.activityIndicatorYellow {
|
||||||
background: #f7b731;
|
background: #f7b731;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.activityIndicatorRed {
|
&.activityIndicatorRed {
|
||||||
background: #fc5c65;
|
background: #fc5c65;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.activityIndicatorBlue {
|
&.activityIndicatorBlue {
|
||||||
background: #45aaf2;
|
background: #45aaf2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardImage {
|
.projectCardImage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardMeta {
|
.projectCardMeta {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(to bottom, transparent, black);
|
background: linear-gradient(to bottom, transparent, black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardTitle {
|
.projectCardTitle {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardCTA {
|
.projectCardCTA {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardCTA a {
|
.projectCardCTA a {
|
||||||
@include buttonBasic;
|
@include buttonBasic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardCTAContainer {
|
.projectCardCTAContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.projectCardCTAContainer {
|
.projectCardCTAContainer {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardCTA:nth-child(2) {
|
.projectCardCTA:nth-child(2) {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectCardCTAContainer>* {
|
.projectCardCTAContainer > * {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import Layout from "../layouts/default";
|
import Layout from "../layouts/default";
|
||||||
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
|
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next";
|
||||||
import { graphql } from 'gatsby'
|
import { graphql } from "gatsby";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import * as styles from "./social.module.scss";
|
import * as styles from "./social.module.scss";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query AllSocialsQuery($language: String!) {
|
query AllSocialsQuery($language: String!) {
|
||||||
allSocialsJson {
|
allSocialsJson {
|
||||||
nodes {
|
nodes {
|
||||||
image
|
image
|
||||||
|
|
@ -16,7 +16,7 @@ query AllSocialsQuery($language: String!) {
|
||||||
url
|
url
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
ns
|
ns
|
||||||
|
|
@ -25,42 +25,58 @@ query AllSocialsQuery($language: String!) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
const SocialPage = ({ data }) => {
|
const SocialPage = ({ data }) => {
|
||||||
|
const { t } = useI18next();
|
||||||
|
return (
|
||||||
|
<Layout title={t("social")} description={t("socialDescription")}>
|
||||||
|
<section>
|
||||||
|
<article>
|
||||||
|
<h1>
|
||||||
|
<Trans>social</Trans>
|
||||||
|
</h1>
|
||||||
|
|
||||||
const { t } = useI18next();
|
<p>
|
||||||
return (
|
<Trans i18nKey="socialDescriptionWithLink">
|
||||||
<Layout title={t("social")} description={t("socialDescription")}>
|
socialDescriptionWith<Link to="/friends">Link</Link>
|
||||||
<section>
|
</Trans>
|
||||||
<article>
|
</p>
|
||||||
<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) => {
|
||||||
<div className={styles.socialList}>
|
return (
|
||||||
{
|
<a
|
||||||
data.allSocialsJson.nodes.map((social) => {
|
className={styles.socialCard}
|
||||||
return (
|
href={social.url}
|
||||||
<a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer me" key={social.url}>
|
target="_blank"
|
||||||
<div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}>
|
rel="noreferrer me"
|
||||||
<span className={styles.socialName}>{social.platformName}</span>
|
key={social.url}
|
||||||
<span className={styles.socialUsername}>{social.platformHandle}</span>
|
>
|
||||||
</div>
|
<div
|
||||||
</a>
|
className={styles.socialImage}
|
||||||
);
|
style={{ backgroundImage: "url(" + social.image + ")" }}
|
||||||
})
|
>
|
||||||
}
|
<span className={styles.socialName}>
|
||||||
</div>
|
{social.platformName}
|
||||||
</article>
|
</span>
|
||||||
</section>
|
<span className={styles.socialUsername}>
|
||||||
</Layout>
|
{social.platformHandle}
|
||||||
);
|
</span>
|
||||||
}
|
</div>
|
||||||
|
</a>
|
||||||
SocialPage.propTypes = {
|
);
|
||||||
data: PropTypes.object.isRequired
|
})}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SocialPage;
|
SocialPage.propTypes = {
|
||||||
|
data: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SocialPage;
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
@import "../mixins";
|
@import "../mixins";
|
||||||
|
|
||||||
.socialList {
|
.socialList {
|
||||||
@include flexList;
|
@include flexList;
|
||||||
|
|
||||||
.socialCard {
|
.socialCard {
|
||||||
@include cardGeneric;
|
@include cardGeneric;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.socialImage {
|
.socialImage {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||||
|
|
||||||
.socialName {
|
.socialName {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socialUsername {
|
.socialUsername {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,42 @@
|
||||||
import React from "react"
|
import React from "react";
|
||||||
import { graphql } from "gatsby"
|
import { graphql } from "gatsby";
|
||||||
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
|
import { Trans, useTranslation } from "gatsby-plugin-react-i18next";
|
||||||
import Layout from "../layouts/default";
|
import Layout from "../layouts/default";
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import * as styles from "./project.module.scss";
|
import * as styles from "./project.module.scss";
|
||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query GetProject($urlname: String!, $lang: String!, $language: String!) {
|
query GetProject($urlname: String!, $lang: String!, $language: String!) {
|
||||||
allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
|
allProjectsJson(
|
||||||
nodes {
|
filter: { urlname: { eq: $urlname }, lang: { eq: $lang } }
|
||||||
lang
|
) {
|
||||||
urlname
|
nodes {
|
||||||
name
|
lang
|
||||||
links {
|
urlname
|
||||||
github
|
name
|
||||||
website
|
links {
|
||||||
|
github
|
||||||
|
website
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
publicURL
|
||||||
|
}
|
||||||
|
longDescription
|
||||||
|
shortDescription
|
||||||
}
|
}
|
||||||
image {
|
|
||||||
publicURL
|
|
||||||
}
|
|
||||||
longDescription
|
|
||||||
shortDescription
|
|
||||||
}
|
}
|
||||||
}
|
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
edges {
|
||||||
edges {
|
node {
|
||||||
node {
|
ns
|
||||||
ns
|
data
|
||||||
data
|
language
|
||||||
language
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
`;
|
||||||
`
|
|
||||||
|
|
||||||
const ProjectTemplate = ({ data }) => {
|
const ProjectTemplate = ({ data }) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
@ -42,45 +44,74 @@ const ProjectTemplate = ({ data }) => {
|
||||||
let projectName = project.name;
|
let projectName = project.name;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
|
<Layout
|
||||||
|
description={project.shortDescription}
|
||||||
|
title={t("project") + ": " + projectName}
|
||||||
|
transparentTopbar={true}
|
||||||
|
>
|
||||||
<section className={styles.projectHeader}>
|
<section className={styles.projectHeader}>
|
||||||
<div style={{ paddingTop: 0 }}>
|
<div style={{ paddingTop: 0 }}>
|
||||||
<div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
|
<div
|
||||||
|
className={styles.headerBackground}
|
||||||
|
style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}
|
||||||
|
></div>
|
||||||
<header>
|
<header>
|
||||||
<div className={styles.headerInner}>
|
<div className={styles.headerInner}>
|
||||||
<h1><Trans>project</Trans>: {projectName}</h1>
|
<h1>
|
||||||
|
<Trans>project</Trans>: {projectName}
|
||||||
|
</h1>
|
||||||
<span>{project.shortDescription}</span>
|
<span>{project.shortDescription}</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div className={styles.headerPlaceholder}></div>
|
<div className={styles.headerPlaceholder}></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{project.longDescription != null ?
|
{project.longDescription != null ? (
|
||||||
<section className={styles.projectAbout}>
|
<section className={styles.projectAbout}>
|
||||||
<article>
|
<article>
|
||||||
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
|
<h1>
|
||||||
|
<Trans projectName={projectName} i18nKey="projectAboutHeader">
|
||||||
|
projectAboutHeader{{ projectName }}
|
||||||
|
</Trans>
|
||||||
|
</h1>
|
||||||
<p>{project.longDescription}</p>
|
<p>{project.longDescription}</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
: null}
|
) : null}
|
||||||
{project.links !== null ?
|
{project.links !== null ? (
|
||||||
<section className={styles.projectLinks}>
|
<section className={styles.projectLinks}>
|
||||||
<div>
|
<div>
|
||||||
<h1>Links</h1>
|
<h1>Links</h1>
|
||||||
<div className={styles.linkList}>
|
<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.github !== 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}
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
: null}
|
) : null}
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ProjectTemplate.propTypes = {
|
ProjectTemplate.propTypes = {
|
||||||
data: PropTypes.object.isRequired
|
data: PropTypes.object.isRequired,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ProjectTemplate;
|
export default ProjectTemplate;
|
||||||
|
|
|
||||||
|
|
@ -1,92 +1,99 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
|
|
||||||
.projectHeader {
|
.projectHeader {
|
||||||
>div {
|
> div {
|
||||||
padding-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerBackground {
|
.headerBackground {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
background: linear-gradient(to bottom, rgba($background, .95), rgba($background, .25) 20%, rgba($background, .35) 80%, rgba($background, 1) 100%);
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
.headerInner {
|
rgba($background, 0.95),
|
||||||
max-width: $layoutWidth;
|
rgba($background, 0.25) 20%,
|
||||||
width: 100%;
|
rgba($background, 0.35) 80%,
|
||||||
height: 100%;
|
rgba($background, 1) 100%
|
||||||
margin: 0 auto;
|
);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
.headerInner {
|
||||||
text-shadow: 0 0 10px black, 0 0 20px black;
|
max-width: $layoutWidth;
|
||||||
padding: 10px 20px;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
* {
|
margin: 0 auto;
|
||||||
margin: 0;
|
display: flex;
|
||||||
color: white;
|
flex-direction: column;
|
||||||
font-size: 1.25em;
|
text-shadow: 0 0 10px black, 0 0 20px black;
|
||||||
}
|
padding: 10px 20px;
|
||||||
|
|
||||||
h1 {
|
* {
|
||||||
font-size: 2.2em;
|
margin: 0;
|
||||||
margin-top: auto;
|
color: white;
|
||||||
}
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
.headerPlaceholder {
|
margin-top: auto;
|
||||||
width: 100%;
|
}
|
||||||
height: 400px;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.headerPlaceholder {
|
||||||
.projectAbout, .projectLinks {
|
width: 100%;
|
||||||
&:nth-of-type(2) {
|
height: 400px;
|
||||||
> div, > article {
|
}
|
||||||
padding-top: 20px;
|
}
|
||||||
}
|
|
||||||
}
|
.projectAbout,
|
||||||
}
|
.projectLinks {
|
||||||
|
&:nth-of-type(2) {
|
||||||
.projectAbout {
|
> div,
|
||||||
background: #060606;
|
> article {
|
||||||
color: white;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.projectLinks {
|
}
|
||||||
.linkList {
|
|
||||||
display: flex;
|
.projectAbout {
|
||||||
justify-content: center;
|
background: #060606;
|
||||||
flex-wrap: wrap;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.projectLinks {
|
||||||
display: inline-block;
|
.linkList {
|
||||||
border: thin solid rgb(200, 200, 200);
|
display: flex;
|
||||||
border-radius: 5px;
|
justify-content: center;
|
||||||
padding: 10px 15px;
|
flex-wrap: wrap;
|
||||||
margin: 5px;
|
}
|
||||||
color: $textColor;
|
|
||||||
text-decoration-skip: none;
|
a {
|
||||||
text-decoration: underline dotted currentColor;
|
display: inline-block;
|
||||||
|
border: thin solid rgb(200, 200, 200);
|
||||||
i.fab,
|
border-radius: 5px;
|
||||||
i.fas,
|
padding: 10px 15px;
|
||||||
i.fa,
|
margin: 5px;
|
||||||
i.far,
|
color: $textColor;
|
||||||
i.fal {
|
text-decoration-skip: none;
|
||||||
display: inline;
|
text-decoration: underline dotted currentColor;
|
||||||
}
|
|
||||||
}
|
i.fab,
|
||||||
}
|
i.fas,
|
||||||
|
i.fa,
|
||||||
|
i.far,
|
||||||
|
i.fal {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue