Add career path

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/"
+}

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/"
+}

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/"
+}

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/"
+}

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/"
+}

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"
+}

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"
+}

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`,

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",

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",

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,
-import { ArrowRight } from "lucide-react";
+    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>

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;
+            }
+        }
+    }
+}