diff --git a/content/career/2012-edu-goetheschule.json b/content/career/2012-edu-goetheschule.json new file mode 100644 index 0000000..1cd53dd --- /dev/null +++ b/content/career/2012-edu-goetheschule.json @@ -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/" +} \ No newline at end of file diff --git a/content/career/2017-edu-schueleruni.json b/content/career/2017-edu-schueleruni.json new file mode 100644 index 0000000..3e87d1b --- /dev/null +++ b/content/career/2017-edu-schueleruni.json @@ -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/" +} \ No newline at end of file diff --git a/content/career/2017-exp-carstens-carstens.json b/content/career/2017-exp-carstens-carstens.json new file mode 100644 index 0000000..ab9ab12 --- /dev/null +++ b/content/career/2017-exp-carstens-carstens.json @@ -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/" +} \ No newline at end of file diff --git a/content/career/2018-exp-henning-kahl.json b/content/career/2018-exp-henning-kahl.json new file mode 100644 index 0000000..81d006f --- /dev/null +++ b/content/career/2018-exp-henning-kahl.json @@ -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/" +} \ No newline at end of file diff --git a/content/career/2019-exp-edeka-nord.json b/content/career/2019-exp-edeka-nord.json new file mode 100644 index 0000000..41c8967 --- /dev/null +++ b/content/career/2019-exp-edeka-nord.json @@ -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/" +} \ No newline at end of file diff --git a/content/career/2021-edu-elsensee-gymnasium.json b/content/career/2021-edu-elsensee-gymnasium.json new file mode 100644 index 0000000..ebcac41 --- /dev/null +++ b/content/career/2021-edu-elsensee-gymnasium.json @@ -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" +} \ No newline at end of file diff --git a/content/career/present-edu-fh-wedel.json b/content/career/present-edu-fh-wedel.json new file mode 100644 index 0000000..f8fd85f --- /dev/null +++ b/content/career/present-edu-fh-wedel.json @@ -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" +} \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 26735f4..5e2da60 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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`, diff --git a/locales/de/translation.json b/locales/de/translation.json index 24f3248..b065550 100644 --- a/locales/de/translation.json +++ b/locales/de/translation.json @@ -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", diff --git a/locales/en/translation.json b/locales/en/translation.json index b507ec8..8d18a2e 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -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", diff --git a/src/pages/about.js b/src/pages/about.js index 5160b25..8237036 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -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 ( { +
+
+

+ about.myCareer +

+ +
+
+ about.birth +
+
+ + {career.map((careerEntry) => { + return ( +
+
+ + {careerEntry.startDate && + careerEntry.startDate[lang] + ? careerEntry.startDate[lang] + : ""} + {careerEntry.endDate && + careerEntry.endDate[lang] + ? " - " + + careerEntry.endDate[lang] + : ""} + + + {careerEntry.type == + "education" && ( + + )} + {careerEntry.type == + "job-experience" && ( + + )} + {careerEntry.title[lang]} + + {careerEntry.description && + careerEntry.description[lang] && ( +

+ { + careerEntry.description[ + lang + ] + } +

+ )} + {careerEntry.externalLink && ( + + + {(() => { + // eslint-disable-next-line no-undef + let url = new URL( + careerEntry.externalLink + ); + return url.hostname; + })()} + + )} +
+
+ ); + })} +
+
+
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 7ba587e..ced41d9 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -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; + } + } + } +}