mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-06 12:42:01 +02:00
Add career path
This commit is contained in:
GitHub
parent
d15dda5e09
commit
daa9ca870d
12 changed files with 403 additions and 35 deletions
|
|
@ -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
Add a link
Reference in a new issue