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

some badge styling

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-20 23:43:44 +02:00
parent 8226462acc
commit d280515d1e
3 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
data/skills.tsx
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: []

8
pages/me.tsx
View File

@ -25,10 +25,14 @@ const SkillBar: NextPage<{ skill: Skill }> = ({ skill }) => {
const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
return <div className={styles.card}>
<h3>{card.title}</h3>
<div className={styles.skillBarsSet}>
{card.skillBars.sort((bar1, bar2) => bar2.pct - bar1.pct).map((skill, i) =>
<SkillBar key={i} skill={skill} />
)}<br/>
{card.additional?.map((skill, i) => <Badge additional={skill} key={i} />)}
)}
</div><br />
<div className={styles.badgeSet}>
{card.additional?.map((skill, i) => <Badge additional={skill} key={i} />)}
</div>
</div>;
};

14
styles/Blog/AboutMe.module.scss
View File

@ -20,6 +20,20 @@
}
}
.badgeSet {
display: flex;
flex-direction: row;
}
.badge {
display: grid;
grid-template-columns: 1em auto;
column-gap: 5px;
border: 1px solid var(--blog_content-border);
border-radius: 0.5em;
padding: 5px;
}
@keyframes barFill {
0% {
width: 1em;