frontpage/pages/me.tsx

70 lines
1.9 KiB
TypeScript
Raw Normal View History

2022-10-18 23:40:27 +02:00
import type { NextPage } from "next";
import Layout from "../components/Blog/Layout";
2022-10-20 13:40:58 +02:00
import * as phosphorIcons from "phosphor-react";
2022-10-18 23:40:27 +02:00
import styles from "../styles/Blog/AboutMe.module.scss";
2022-10-20 13:40:58 +02:00
import skills from "../data/skills.json";
2022-10-18 23:40:27 +02:00
2022-10-20 13:40:58 +02:00
interface Skill {
name: string;
icons: string[];
pct: number;
}
interface AdditionalSkills {
name: string;
icon: string;
}
interface SkillCard {
title: string;
skillBars: Skill[];
additional?: AdditionalSkills[];
}
interface SkillSet {
cards: SkillCard[];
additional: AdditionalSkills[];
}
const getIcon = (iconName: string, key?: number) => {
const Icon = phosphorIcons[iconName as keyof typeof phosphorIcons] as any;
if (!Icon) return null;
else return <Icon key={key} />;
};
const SkillBar: NextPage<{ skill: Skill }> = ({ skill }) => {
return <div className={styles.bar}>
<div className={styles.barName}>{skill.name}{skill.icons.map(getIcon)}</div>
<div className={styles.barPct}>{skill.pct}%</div>
</div>;
};
const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
return <div className={styles.card}>
<h3>{card.title}</h3>
{card.skillBars.map((skill, i) =>
<SkillBar key={i} skill={skill} />
)}
</div>;
2022-10-18 23:40:27 +02:00
};
const AboutMe: NextPage = () => {
const age = new Date().getFullYear() - 1998 - (new Date().getMonth() < 10 ? 1 : 0);
return <Layout>
<h1>This is me.</h1>
<p className={styles.preText}>
2022-10-19 11:09:22 +02:00
Hi! My name is <strong>Daniel</strong> and I&apos;m an automation engineer from Germany.
2022-10-18 23:40:27 +02:00
</p>
<p>
2022-10-19 11:09:22 +02:00
I&apos;m currently studying <strong>Information Systems Engineering</strong> at the <strong>TU Dresden</strong><br/>
Currently I&apos;m {age} years old.
2022-10-18 23:40:27 +02:00
</p>
2022-10-20 13:40:58 +02:00
{skills.cards.map((card, i) => <SkillCard key={i} card={card} />)}
2022-10-18 23:40:27 +02:00
</Layout>;
};
export default AboutMe;