kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-13 00:46:56 +02:00
Code Issues Projects Releases Wiki Activity

Add Skills

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-09-24 12:07:10 +00:00
parent 543e7887dd
commit 43a05ac0e5
5 changed files with 210 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/pages/index.js
View file

@ -27,6 +27,13 @@ export const query = graphql`
contactMastodonHref
}
}
allSkillsJson(sort: {fields: type, order: ASC}) {
nodes {
name
type
href
}
}
allProjectsJson(
filter: { lang: { eq: $language }, featured: { gte: 0 } }
sort: { fields: featured, order: ASC }
@ -179,9 +186,25 @@ const IndexPage = (props) => {
</div>
</div>
</section>
<section className="aboutSection">
<section className={styles.aboutSection}>
<article>
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
<div className={styles.aboutText}>
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
</div>
<div className={styles.skills}>
<h2><Trans>mySkills</Trans></h2>
<div className={styles.skillList}>
{
props.data.allSkillsJson.nodes.map((skill) => {
return (
skill.href ?
<a className={styles.skill + " " + styles["skill_"+skill.type]} href={skill.href} target="_blank" rel="noreferrer">{skill.name}</a> :
<span className={styles.skill + " " + styles["skill_"+skill.type]}>{skill.name}</span>
)
})
}
</div>
</div>
</article>
</section>
<a

66
src/pages/index.module.scss
View file

@ -191,3 +191,69 @@
margin-top: 40px;
padding: 10px 20px;
}
.aboutSection {
> article {
display: flex;
align-items: center;
> div {
width: calc(50% - 40px);
flex-shrink: 0;
}
.aboutText {
margin-right: 20px;
}
.skills {
margin-left: 20px;
.skillList {
display: flex;
flex-wrap: wrap;
justify-content: center;
.skill {
border: thin solid currentColor;
border-radius: 100px;
padding: 5px 10px;
margin: 5px;
&.skill_framework {
color: #e52b3e;
}
&.skill_language {
color: #6848da;
}
&.skill_platform {
color: #e5752b;
}
&.skill_os {
color: #2b66e5;
}
&.skill_program {
color: #18bb20;
}
}
}
}
@media(max-width: 900px) {
flex-direction: column;
> div {
width: 100%;
}
.skills, .aboutText {
margin-left: 0;
margin-right: 0;
}
}
}
}