43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import {FC} from "react";
|
|
import styles from "../styling/projects.module.scss";
|
|
import {TechnologyEnum} from "@/src/portfolio/helpers/Project";
|
|
|
|
type args = {
|
|
name : TechnologyEnum,
|
|
level? : ProficiencyLevel,
|
|
}
|
|
|
|
export enum ProficiencyLevel {
|
|
beginner = "Beginner",
|
|
intermediate = "Intermediate",
|
|
advanced = "Advanced",
|
|
expert = "Expert",
|
|
master = "Master",
|
|
}
|
|
|
|
|
|
const TechnologyDisplay : FC<args> = ({name, level}) => {
|
|
const level_to_emoji = {
|
|
[ProficiencyLevel.beginner]: "🌱",
|
|
[ProficiencyLevel.intermediate]: "🌳",
|
|
[ProficiencyLevel.advanced]: "🌟",
|
|
[ProficiencyLevel.expert]: "🚀",
|
|
[ProficiencyLevel.master]: "🧙♂️"
|
|
};
|
|
|
|
if (level) {
|
|
return (
|
|
<div id={name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
|
|
<b>{name} </b>
|
|
<span style={{float: "right", fontSize: "0.8em"}}>{level} {level_to_emoji[level]}</span>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<a href={"#"+name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
|
|
{name}
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default TechnologyDisplay; |