mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-28 17:56:51 +02:00
Add career path
This commit is contained in:
GitHub
parent
d15dda5e09
commit
daa9ca870d
12 changed files with 403 additions and 35 deletions
17
content/career/2012-edu-goetheschule.json
Normal file
17
content/career/2012-edu-goetheschule.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"type": "education",
|
||||
"title": {
|
||||
"en": "Goethe Primary School",
|
||||
"de": "Goethe Grundschule"
|
||||
},
|
||||
"sortDate": "2012-06-01 00:00",
|
||||
"startDate": {
|
||||
"en": "August 2008",
|
||||
"de": "August 2008"
|
||||
},
|
||||
"endDate": {
|
||||
"en": "June 2012",
|
||||
"de": "Juni 2012"
|
||||
},
|
||||
"externalLink": "http://www.goethe-schule-quickborn.de/"
|
||||
}
|
||||
21
content/career/2017-edu-schueleruni.json
Normal file
21
content/career/2017-edu-schueleruni.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"type": "education",
|
||||
"title": {
|
||||
"en": "FH-Wedel \"Schüleruni\"",
|
||||
"de": "FH-Wedel Schüleruni"
|
||||
},
|
||||
"sortDate": "2018-03-01 00:00",
|
||||
"startDate": {
|
||||
"en": "December 2017",
|
||||
"de": "Dezember 2017"
|
||||
},
|
||||
"endDate": {
|
||||
"en": "March 2018",
|
||||
"de": "März 2018"
|
||||
},
|
||||
"description": {
|
||||
"en": "The \"Schüleruni\"-program was a short dive into a study of computer sciences for school students.",
|
||||
"de": "Die Schüleruni war ein kurzer Einblick in ein Informatikstudium für Schüler."
|
||||
},
|
||||
"externalLink": "https://www.fh-wedel.de/wir/organisation/pressestelle/news/news/article/erste-schueleruni-endet-erfolgreich/"
|
||||
}
|
||||
17
content/career/2017-exp-carstens-carstens.json
Normal file
17
content/career/2017-exp-carstens-carstens.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"type": "job-experience",
|
||||
"title": {
|
||||
"en": "Carstens & Carstens Partnerschaft mbB",
|
||||
"de": "Carstens & Carstens Partnerschaft mbB"
|
||||
},
|
||||
"sortDate": "2017-03-01 00:00",
|
||||
"startDate": {
|
||||
"en": "March 2017",
|
||||
"de": "März 2017"
|
||||
},
|
||||
"description": {
|
||||
"de": "Schülerpraktikum mit Erfahrungen im Webdesign, Buchhaltung und administrativer Arbeit",
|
||||
"en": "Student internship with experiences in webdesign, accounting and administrative work"
|
||||
},
|
||||
"externalLink": "https://recht-und-steuern-carstens.de/"
|
||||
}
|
||||
21
content/career/2018-exp-henning-kahl.json
Normal file
21
content/career/2018-exp-henning-kahl.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"type": "job-experience",
|
||||
"title": {
|
||||
"en": "Henning-Kahl",
|
||||
"de": "Henning-Kahl"
|
||||
},
|
||||
"sortDate": "2018-07-01 00:00",
|
||||
"startDate": {
|
||||
"en": "June 2018",
|
||||
"de": "Juni 2018"
|
||||
},
|
||||
"endDate": {
|
||||
"en": "July 2018",
|
||||
"de": "Juli 2018"
|
||||
},
|
||||
"description": {
|
||||
"de": "Unabhängige Web-Entwicklung und Consulting",
|
||||
"en": "Independent web-development and consulting"
|
||||
},
|
||||
"externalLink": "https://hkhs.de/"
|
||||
}
|
||||
17
content/career/2019-exp-edeka-nord.json
Normal file
17
content/career/2019-exp-edeka-nord.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"type": "job-experience",
|
||||
"title": {
|
||||
"en": "Edeka Nord",
|
||||
"de": "Edeka Nord"
|
||||
},
|
||||
"sortDate": "2019-03-01 00:00",
|
||||
"startDate": {
|
||||
"en": "March 2019",
|
||||
"de": "März 2019"
|
||||
},
|
||||
"description": {
|
||||
"de": "Schülerpraktikum mit Erfahrungen in SAP-Administration und -Programmierung, UNIX-Administration, Monitoring und IT-Hilfestellung",
|
||||
"en": "Student internship with experiences in SAP-administration and -development, UNIX-administration, monitoring and IT-support"
|
||||
},
|
||||
"externalLink": "https://verbund.edeka/nord/"
|
||||
}
|
||||
17
content/career/2021-edu-elsensee-gymnasium.json
Normal file
17
content/career/2021-edu-elsensee-gymnasium.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"type": "education",
|
||||
"title": {
|
||||
"en": "Elsensee-Gymnasium",
|
||||
"de": "Elsensee-Gymnasium"
|
||||
},
|
||||
"sortDate": "2021-06-01 00:00",
|
||||
"startDate": {
|
||||
"en": "August 2012",
|
||||
"de": "August 2012"
|
||||
},
|
||||
"endDate": {
|
||||
"en": "June 2021",
|
||||
"de": "Juni 2021"
|
||||
},
|
||||
"externalLink": "https://www.elsensee-gymnasium.de"
|
||||
}
|
||||
21
content/career/present-edu-fh-wedel.json
Normal file
21
content/career/present-edu-fh-wedel.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"type": "education",
|
||||
"title": {
|
||||
"en": "University of Applied Science Wedel",
|
||||
"de": "Fachhochschule Wedel"
|
||||
},
|
||||
"sortDate": "2021-10-04 13:30",
|
||||
"startDate": {
|
||||
"en": "October 2021",
|
||||
"de": "Oktober 2021"
|
||||
},
|
||||
"endDate": {
|
||||
"en": "Present",
|
||||
"de": "Jetzt"
|
||||
},
|
||||
"description": {
|
||||
"en": "Bachelor of business informatics",
|
||||
"de": "Bachelor in Wirtschaftsinformatik"
|
||||
},
|
||||
"externalLink": "https://www.fh-wedel.de"
|
||||
}
|
||||
|
|
@ -73,6 +73,13 @@ module.exports = {
|
|||
name: `blogContent`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
path: `${__dirname}/content/career`,
|
||||
name: `careerContent`,
|
||||
},
|
||||
},
|
||||
"gatsby-plugin-mdx",
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@
|
|||
"donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
|
||||
"moreProjects": "Mehr Projekte erkunden",
|
||||
"featuredProjects": "Vorgestellte Projekte",
|
||||
"mySkills": "Meine Fähigkeiten"
|
||||
"mySkills": "Meine Fähigkeiten",
|
||||
"myCareer": "Mein Werdegang",
|
||||
"birth": "Geboren 03.11.2001"
|
||||
},
|
||||
"social": {
|
||||
"title": "Soziales",
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@
|
|||
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||
"moreProjects": "Explore more Projects",
|
||||
"featuredProjects": "Featured Projects",
|
||||
"mySkills": "My Skills"
|
||||
"mySkills": "My Skills",
|
||||
"myCareer": "My Career-Path",
|
||||
"birth": "Born 03.11.2001"
|
||||
},
|
||||
"social": {
|
||||
"title": "Social",
|
||||
|
|
|
|||
|
|
@ -10,9 +10,13 @@ import { graphql } from "gatsby";
|
|||
import { MDXRenderer } from "gatsby-plugin-mdx";
|
||||
import { GatsbyImage } from "gatsby-plugin-image";
|
||||
|
||||
import anime from "animejs";
|
||||
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Briefcase,
|
||||
ExternalLink,
|
||||
GraduationCap,
|
||||
Loader,
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const query = graphql`
|
||||
|
|
@ -64,43 +68,42 @@ export const query = graphql`
|
|||
}
|
||||
name
|
||||
}
|
||||
|
||||
career: allCareerJson(sort: { order: DESC, fields: sortDate }) {
|
||||
nodes {
|
||||
id
|
||||
type
|
||||
sortDate
|
||||
title {
|
||||
de
|
||||
en
|
||||
}
|
||||
startDate {
|
||||
de
|
||||
en
|
||||
}
|
||||
endDate {
|
||||
de
|
||||
en
|
||||
}
|
||||
description {
|
||||
de
|
||||
en
|
||||
}
|
||||
externalLink
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const AboutPage = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
anime({
|
||||
targets: [
|
||||
"." + styles.profileCard + " > span",
|
||||
"." + styles.profileCard + " a",
|
||||
],
|
||||
opacity: [0, 1],
|
||||
translateX: [100, 0],
|
||||
duration: 250,
|
||||
delay: anime.stagger(20),
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImageDummy],
|
||||
translateX: [0, -3],
|
||||
translateY: [0, 3],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
anime({
|
||||
targets: ["." + styles.profileImage],
|
||||
translateX: [0, 4],
|
||||
translateY: [0, -4],
|
||||
duration: 250,
|
||||
easing: "easeInOutCirc",
|
||||
});
|
||||
}, []);
|
||||
let file = props.data.file;
|
||||
|
||||
const career = props.data.career.nodes;
|
||||
const lang = i18n.language;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={t("about.title")}
|
||||
|
|
@ -210,6 +213,84 @@ const AboutPage = (props) => {
|
|||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<h1>
|
||||
<Trans>about.myCareer</Trans>
|
||||
</h1>
|
||||
|
||||
<div className={styles.careerContainer}>
|
||||
<div className={styles.birth}>
|
||||
<Loader /> <Trans>about.birth</Trans>
|
||||
</div>
|
||||
<div className={styles.mainline}></div>
|
||||
|
||||
{career.map((careerEntry) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
styles.entry +
|
||||
" " +
|
||||
styles["entryType" + careerEntry.type]
|
||||
}
|
||||
key={careerEntry.id}
|
||||
>
|
||||
<div className={styles.entryContent}>
|
||||
<span className={styles.date}>
|
||||
{careerEntry.startDate &&
|
||||
careerEntry.startDate[lang]
|
||||
? careerEntry.startDate[lang]
|
||||
: ""}
|
||||
{careerEntry.endDate &&
|
||||
careerEntry.endDate[lang]
|
||||
? " - " +
|
||||
careerEntry.endDate[lang]
|
||||
: ""}
|
||||
</span>
|
||||
<span className={styles.title}>
|
||||
{careerEntry.type ==
|
||||
"education" && (
|
||||
<GraduationCap />
|
||||
)}
|
||||
{careerEntry.type ==
|
||||
"job-experience" && (
|
||||
<Briefcase />
|
||||
)}
|
||||
{careerEntry.title[lang]}
|
||||
</span>
|
||||
{careerEntry.description &&
|
||||
careerEntry.description[lang] && (
|
||||
<p>
|
||||
{
|
||||
careerEntry.description[
|
||||
lang
|
||||
]
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
{careerEntry.externalLink && (
|
||||
<a
|
||||
href={careerEntry.externalLink}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<ExternalLink />
|
||||
{(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
let url = new URL(
|
||||
careerEntry.externalLink
|
||||
);
|
||||
return url.hostname;
|
||||
})()}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Link className={styles.donationSection} to="/donate">
|
||||
<div>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -349,3 +349,148 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.careerContainer {
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.birth {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 7.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> svg {
|
||||
margin-right: $layoutPadding;
|
||||
}
|
||||
}
|
||||
|
||||
.mainline {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 17px;
|
||||
width: 5px;
|
||||
height: calc(100% - 40px);
|
||||
background-color: $accentColor;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: $accentColor;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
|
||||
}
|
||||
|
||||
/*&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: $accentColor;
|
||||
border-radius: 100px;
|
||||
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
|
||||
}*/
|
||||
}
|
||||
|
||||
.entry {
|
||||
position: relative;
|
||||
margin: 20px 10px;
|
||||
|
||||
--entry-color: #{$accentColor};
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
transform: translate(0, -50%);
|
||||
content: " ";
|
||||
border: 5px solid var(--entry-color);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 10px;
|
||||
transform: translate(0, -50%);
|
||||
content: " ";
|
||||
background-color: var(--entry-color);
|
||||
width: 25px;
|
||||
height: 5px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
> .entryContent {
|
||||
margin-left: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
color: var(--entry-color);
|
||||
font-size: 1.7em;
|
||||
font-weight: 700;
|
||||
margin-bottom: $layoutPadding;
|
||||
align-items: center;
|
||||
|
||||
> svg {
|
||||
margin-right: 10px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--entry-color);
|
||||
text-decoration: underline dotted currentColor;
|
||||
|
||||
> svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: $layoutPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.entryTypeeducation {
|
||||
--entry-color: #5070ff;
|
||||
@media (prefers-color-scheme: light) {
|
||||
--entry-color: #2347e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue