kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-28 17:56:51 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

115
content/skills.json Normal file
View file

@ -0,0 +1,115 @@
[
{
"name": "Gatsby",
"href": "https://gatsbyjs.com/",
"type": "framework"
},
{
"name": "React",
"href": "https://reactjs.org/",
"type": "framework"
},
{
"name": "JavaScript",
"type": "language"
},
{
"name": "HTML",
"type": "language"
},
{
"name": "NodeJS",
"href": "https://nodejs.org/",
"type": "language"
},
{
"name": "CSS",
"type": "language"
},
{
"name": "SCSS / Sass",
"href": "https://sass-lang.com/",
"type": "language"
},
{
"name": "Java",
"type": "language"
},
{
"name": "TypeScript",
"href": "https://www.typescriptlang.org/",
"type": "language"
},
{
"name": "GoLang",
"href": "https://golang.org/",
"type": "language"
},
{
"name": "MySQL",
"type": "language"
},
{
"name": "Cloudflare Workers",
"href": "https://workers.cloudflare.com/",
"type": "platform"
},
{
"name": "Cloudflare Pages",
"href": "https://pages.cloudflare.com/",
"type": "platform"
},
{
"name": "Ubuntu Linux",
"href": "https://ubuntu.com/",
"type": "os"
},
{
"name": "Manjaro Linux",
"href": "https://manjaro.org/",
"type": "os"
},
{
"name": "Debian Linux",
"href": "https://www.debian.org/",
"type": "os"
},
{
"name": "Microsoft Windows",
"type": "os"
},
{
"name": "JetBrains IDEs",
"href": "https://www.jetbrains.com/",
"type": "program"
},
{
"name": "Visual Studio Code",
"href": "https://code.visualstudio.com/",
"type": "program"
},
{
"name": "Yarn",
"href": "https://yarnpkg.com/",
"type": "program"
},
{
"name": "NPM",
"href": "https://www.npmjs.com/",
"type": "program"
},
{
"name": "Docker",
"href": "https://www.docker.com/",
"type": "program"
},
{
"name": "LibreOffice",
"href": "https://libreoffice.org/",
"type": "program"
},
{
"name": "Microsoft Office",
"type": "program"
}
]

3
locales/de/translation.json
View file

@ -31,5 +31,6 @@
"seeMore": "Mehr erkunden",
"donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
"donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
"sponsorGitHub": "Über GitHub unterstützen"
"sponsorGitHub": "Über GitHub unterstützen",
"mySkills": "Meine Fähigkeiten"
}

3
locales/en/translation.json
View file

@ -31,5 +31,6 @@
"seeMore": "See more",
"donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
"donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
"sponsorGitHub": "Sponsor using GitHub"
"sponsorGitHub": "Sponsor using GitHub",
"mySkills": "My Skills"
}

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;
}
}
}
}