some badge styling

This commit is contained in:
2022-10-20 23:43:44 +02:00
parent 8226462acc
commit d280515d1e
3 changed files with 47 additions and 29 deletions

View File

@ -24,120 +24,120 @@ export interface SkillSet {
additional?: AdditionalSkill[];
}
export const skills = (size?: string): SkillSet => {
export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSet => {
return {
cards: [{
title: "Programming Languages",
skillBars: [{
name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={size || "2em"} />,
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
pct: 100
}, {
name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={size || "2em"} />,
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
pct: 100
}, {
name: "Java",
icon: <Icon path={mdiLanguageJava} size={size || "2em"} />,
icon: <Icon path={mdiLanguageJava} size={sizeCardIcons || "2em"} />,
pct: 80
}, {
name: "Python 3",
icon: <Icon path={mdiLanguagePython} size={size || "2em"} />,
icon: <Icon path={mdiLanguagePython} size={sizeCardIcons || "2em"} />,
pct: 95
}, {
name: "PHP",
icon: <Icon path={mdiLanguagePhp} size={size || "2em"} />,
icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons || "2em"} />,
pct: 50
}, {
name: "Bash",
icon: <Icon path={mdiBash} size={size || "2em"} />,
icon: <Icon path={mdiBash} size={sizeCardIcons || "2em"} />,
pct: 60
}, {
name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={size || "2em"} />,
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
pct: 60
}, {
name: "Rust",
icon: <Icon path={mdiLanguageRust} size={size || "2em"} />,
icon: <Icon path={mdiLanguageRust} size={sizeCardIcons || "2em"} />,
pct: 80
}, {
name: "C#",
icon: <Icon path={mdiLanguageCsharp} size={size || "2em"} />,
icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons || "2em"} />,
pct: 40
}]
}, {
title: "Web Technologies",
skillBars: [{
name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={size || "2em"} />,
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
pct: 100
}, {
name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={size || "2em"} />,
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
pct: 100
}, {
name: "React",
icon: <Icon path={mdiReact} size={size || "2em"} />,
icon: <Icon path={mdiReact} size={sizeCardIcons || "2em"} />,
pct: 80
}, {
name: "HTML5",
icon: <Html5 size={size || "2em"} />,
icon: <Html5 size={sizeCardIcons || "2em"} />,
pct: 80
}, {
name: "CSS3",
icon: <CssThree size={size || "2em"} />,
icon: <CssThree size={sizeCardIcons || "2em"} />,
pct: 90
}],
additional: [{
name: "Express",
icon: <Express size={size || "2em"} />
icon: <Express size={sizeBadgeIcons || "1em"} />
}, {
name: "Sass",
icon: <Sass size={size || "2em"} />
icon: <Sass size={sizeBadgeIcons || "1em"} />
}, {
name: "Spring Boot",
icon: <Springboot size={size || "2em"} />
icon: <Springboot size={sizeBadgeIcons || "1em"} />
}]
}, {
title: "Embedded Programming",
skillBars: [{
name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={size || "2em"} />,
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
pct: 60
}],
additional: [{
name: "Arduino",
icon: <Arduino size={size || "2em"} />
icon: <Arduino size={sizeBadgeIcons || "1em"} />
}, {
name: "ESP",
icon: <Espressif size={size || "2em"} />
icon: <Espressif size={sizeBadgeIcons || "1em"} />
}]
}, {
title: "Operating Systems",
skillBars: [],
additional: [{
name: "Windows",
icon: <Windows size={size || "2em"} />
icon: <Windows size={sizeBadgeIcons || "1em"} />
}, {
name: "Linux",
icon: <Linux size={size || "2em"} />
icon: <Linux size={sizeBadgeIcons || "1em"} />
}, {
name: "Android",
icon: <Android size={size || "2em"} />
icon: <Android size={sizeBadgeIcons || "1em"} />
}]
}, {
title: "Languages",
skillBars: [{
name: "German (native)",
icon: <span style={{ fontSize: size || "2em" }}>🇩🇪</span>,
icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇩🇪</span>,
pct: 100
}, {
name: "English (C1)",
icon: <span style={{ fontSize: size || "2em" }}>🇬🇧</span>,
icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇬🇧</span>,
pct: 90
}, {
name: "Russian (basics)",
icon: <span style={{ fontSize: size || "2em", fontFamily: "Arial" }}>🇷🇺</span>,
icon: <span style={{ fontSize: sizeCardIcons || "2em", fontFamily: "Arial" }}>🇷🇺</span>,
pct: 30
}],
additional: []