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

8
pages/me.tsx
View File

@ -25,10 +25,14 @@ const SkillBar: NextPage<{ skill: Skill }> = ({ skill }) => {
const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => { const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
return <div className={styles.card}> return <div className={styles.card}>
<h3>{card.title}</h3> <h3>{card.title}</h3>
<div className={styles.skillBarsSet}>
{card.skillBars.sort((bar1, bar2) => bar2.pct - bar1.pct).map((skill, i) => {card.skillBars.sort((bar1, bar2) => bar2.pct - bar1.pct).map((skill, i) =>
<SkillBar key={i} skill={skill} /> <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>; </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 { @keyframes barFill {
0% { 0% {
width: 1em; width: 1em;