c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Styling styling styling

Browse Source
This commit is contained in:
Daniel Kluge
2022-10-23 17:23:05 +02:00
parent 6f4ba59faf
commit 62c5ef0c25
3 changed files with 146 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
data/skills.tsx
View File

@ -1,5 +1,5 @@
import Icon from "@mdi/react";
import { mdiBash, mdiLanguageCpp, mdiLanguageCsharp, mdiLanguageJava, mdiLanguageJavascript, mdiLanguagePhp, mdiLanguagePython, mdiLanguageRust, mdiLanguageTypescript, mdiReact } from "@mdi/js";
import { mdiBash, mdiLanguageCpp, mdiLanguageCsharp, mdiLanguageJava, mdiLanguageJavascript, mdiLanguagePhp, mdiLanguagePython, mdiLanguageRust, mdiLanguageTypescript, mdiReact, mdiTranslateVariant } from "@mdi/js";
import { Android, Arduino, CssThree, Espressif, Express, Html5, Linux, Sass, Springboot, Windows } from "@icons-pack/react-simple-icons";
export interface Skill {
@ -13,10 +13,17 @@ export interface AdditionalSkill {
icon?: JSX.Element;
}
export interface CardColors {
background: string;
bars: string;
heading: string;
}
export interface SkillCard {
title: string;
skillBars: Skill[];
additional?: AdditionalSkill[];
colors?: CardColors;
}
export interface SkillSet {
@ -25,119 +32,137 @@ export interface SkillSet {
}
export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSet => {
sizeCardIcons = sizeCardIcons || "2em";
sizeBadgeIcons = sizeBadgeIcons || "1em";
return {
cards: [{
title: "Programming Languages",
skillBars: [{
name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} />,
pct: 100
}, {
name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} />,
pct: 100
}, {
name: "Java",
icon: <Icon path={mdiLanguageJava} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageJava} size={sizeCardIcons} />,
pct: 80
}, {
name: "Python 3",
icon: <Icon path={mdiLanguagePython} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguagePython} size={sizeCardIcons} />,
pct: 95
}, {
name: "PHP",
icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons} />,
pct: 50
}, {
name: "Bash",
icon: <Icon path={mdiBash} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiBash} size={sizeCardIcons} />,
pct: 60
}, {
name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} />,
pct: 60
}, {
name: "Rust",
icon: <Icon path={mdiLanguageRust} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageRust} size={sizeCardIcons} />,
pct: 80
}, {
name: "C#",
icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons} />,
pct: 40
}]
}],
/*colors: {
background: "#690000",
bars: "#fff",
heading: "#fff"
}*/
}, {
title: "Web Technologies",
skillBars: [{
name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} />,
pct: 100
}, {
name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} />,
pct: 100
}, {
name: "React",
icon: <Icon path={mdiReact} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiReact} size={sizeCardIcons} />,
pct: 80
}, {
name: "HTML5",
icon: <Html5 size={sizeCardIcons || "2em"} />,
icon: <Html5 size={sizeCardIcons} />,
pct: 80
}, {
name: "CSS3",
icon: <CssThree size={sizeCardIcons || "2em"} />,
icon: <CssThree size={sizeCardIcons} />,
pct: 90
}],
additional: [{
name: "Express",
icon: <Express size={sizeBadgeIcons || "1em"} />
icon: <Express size={sizeBadgeIcons} />
}, {
name: "Sass",
icon: <Sass size={sizeBadgeIcons || "1em"} />
icon: <Sass size={sizeBadgeIcons} />
}, {
name: "Spring Boot",
icon: <Springboot size={sizeBadgeIcons || "1em"} />
}]
icon: <Springboot size={sizeBadgeIcons} />
}],
/*colors: {
background: "#2196f3",
bars: "#217fff",
heading: "#2043ff"
}*/
}, {
title: "Embedded Programming",
skillBars: [{
name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} />,
pct: 60
}],
additional: [{
name: "Arduino",
icon: <Arduino size={sizeBadgeIcons || "1em"} />
icon: <Arduino size={sizeBadgeIcons} />
}, {
name: "ESP",
icon: <Espressif size={sizeBadgeIcons || "1em"} />
}]
icon: <Espressif size={sizeBadgeIcons} />
}],
/*colors: {
background: "#EA8585",
bars: "#E53E3E",
heading: "#661C1C"
}*/
}, {
title: "Operating Systems",
skillBars: [],
additional: [{
name: "Windows",
icon: <Windows size={sizeBadgeIcons || "1em"} />
icon: <Windows size={sizeBadgeIcons} />
}, {
name: "Linux",
icon: <Linux size={sizeBadgeIcons || "1em"} />
icon: <Linux size={sizeBadgeIcons} />
}, {
name: "Android",
icon: <Android size={sizeBadgeIcons || "1em"} />
icon: <Android size={sizeBadgeIcons} />
}]
}, {
title: "Languages",
skillBars: [{
name: "German (native)",
icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇩🇪</span>,
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />,
pct: 100
}, {
name: "English (C1)",
icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇬🇧</span>,
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />,
pct: 90
}, {
name: "Russian (basics)",
icon: <span style={{ fontSize: sizeCardIcons || "2em", fontFamily: "Arial" }}>🇷🇺</span>,
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />,
pct: 30
}],
additional: []