Patryk-Kuchta/Portfolio
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

skills section overhaul

Browse Source
This commit is contained in:
Patryk Kuchta
2024-04-11 17:28:22 +01:00
parent 24a59f9164
commit b50fd99ac0
11 changed files with 412 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/portfolio/data/modulesTaken.ts Normal file
View File

@@ -0,0 +1,66 @@
export const modulesTaken : {
name: string,
level: "PG" | "UG",
score: number
}[] = [
{
name: "Automatic Speech Recognition",
level: "PG",
score: -1
},
{
name: "Reinforcement Learning",
level: "PG",
score: -1
},
{
name: "Natural Language Understanding",
level: "PG",
score: -1
},
{
name: "Machine Learning Practical",
level: "PG",
score: -1
},
{
name: "Accelerated Natural Language Processing",
level: "PG",
score: 81
},
{
name: "Knowledge Graphs",
level: "PG",
score: 76
},
{
name: "Natural Computing",
level: "PG",
score: 81
},
{
name: "Algorithms and Data Structures",
level: "UG",
score: 94
},
{
name: "Operating Systems",
level: "UG",
score: 94
},
{
name: "Data Mining",
level: "UG",
score: 94
},
{
name: "Computability, Complexity and Algorithms",
level: "UG",
score: 91
},
{
name: "Neural Networks and Deep Learning",
level: "UG",
score: 86
}
];

105
src/portfolio/data/skillsData.ts Normal file
View File

@@ -0,0 +1,105 @@
import {SkillEnum} from "@/src/portfolio/helpers/Project";
import {ProficiencyLevel} from "@/src/portfolio/helpers/SkillDisplay";
export const skillsInCategories = {
"Programming Languages": [
{
name: SkillEnum.python,
level: ProficiencyLevel.master
},
{
name: SkillEnum.typescript,
level: ProficiencyLevel.expert
},
{
name: SkillEnum.javascript,
level: ProficiencyLevel.expert
},
{
name: SkillEnum.java,
level: ProficiencyLevel.advanced
},
{
name: SkillEnum.cpp,
level: ProficiencyLevel.intermediate
},
{
name: SkillEnum.php,
level: ProficiencyLevel.beginner
}
],
"Frameworks/Libraries": [
{
name: SkillEnum.pytorch,
level: ProficiencyLevel.master
},
{
name: SkillEnum.numpy,
level: ProficiencyLevel.master
},
{
name: SkillEnum.plt,
level: ProficiencyLevel.advanced
},
{
name: SkillEnum.spaCy,
level: ProficiencyLevel.intermediate
},
{
name: SkillEnum.tensorflow,
level: ProficiencyLevel.beginner
},
{
name: SkillEnum.react,
level: ProficiencyLevel.master
},
{
name: SkillEnum.graphql,
level: ProficiencyLevel.expert
},
{
name: SkillEnum.express,
level: ProficiencyLevel.advanced
}
],
"Human languages": [
{
name: SkillEnum.english,
level: ProficiencyLevel.master
},
{
name: SkillEnum.polish,
level: ProficiencyLevel.master
},
{
name: SkillEnum.german,
level: ProficiencyLevel.advanced
}
],
"Miscellaneous": [
{
name: SkillEnum.latex,
level: ProficiencyLevel.master
},
{
name: SkillEnum.webscrape,
level: ProficiencyLevel.master
},
{
name: SkillEnum.research,
level: ProficiencyLevel.expert
},
{
name: SkillEnum.photoshop,
level: ProficiencyLevel.advanced
},
{
name: SkillEnum.videoEditing,
level: ProficiencyLevel.advanced
},
{
name: SkillEnum.design3d,
level: ProficiencyLevel.beginner
}
]
};

29
src/portfolio/helpers/Accordion.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React, {FC, useState} from "react";
import { CSSTransition } from "react-transition-group";
type args = {
title : string,
children : React.ReactNode,
}
const Accordion : FC<args> = ({ title, children }) => {
const [isOpen, setIsOpen] = useState(false);
const toggleAccordion = () => {
setIsOpen(!isOpen);
};
return (
<div className="accordion">
<div className="accordion-header" onClick={toggleAccordion}>
<h2>{title} {isOpen ? "-" : "+"}</h2>
<span></span>
</div>
<CSSTransition in={isOpen} timeout={0} classNames="accordion-content" unmountOnExit>
<div className="accordion-content">{children}</div>
</CSSTransition>
</div>
);
};
export default Accordion;

2
src/portfolio/helpers/SkillDisplay.tsx
View File

@@ -27,7 +27,7 @@ const SkillDisplay : FC<args> = ({name, level}) => {
if (level) {
return (
<div id={name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
<div id={name.toLowerCase()} className={styles.technology}>
<b>{name}&nbsp;&nbsp;</b>
<span style={{float: "right", fontSize: "0.8em"}}>{level} {level_to_emoji[level]}</span>
</div>

72
src/portfolio/sections/SkillsAndLinks.tsx
View File

@@ -1,6 +1,8 @@
import styles from "../styling/extraLinks.module.scss";
import SkillDisplay, {ProficiencyLevel} from "@/src/portfolio/helpers/SkillDisplay";
import {SkillEnum} from "@/src/portfolio/helpers/Project";
import styles from "../styling/skillsLinks.module.scss";
import SkillDisplay from "@/src/portfolio/helpers/SkillDisplay";
import Accordion from "@/src/portfolio/helpers/Accordion";
import {skillsInCategories} from "@/src/portfolio/data/skillsData";
import {modulesTaken} from "@/src/portfolio/data/modulesTaken";
const SkillsAndLinks = () => {
const moreInfoLinks = [
@@ -31,40 +33,40 @@ const SkillsAndLinks = () => {
return (
<div className={styles.section} id={"skills"}>
<div data-aos = {"fade-left"} className={styles.otherLinks}>
<h2>Programming Languages</h2>
<SkillDisplay name={SkillEnum.python} level={ProficiencyLevel.master} />
<SkillDisplay name={SkillEnum.typescript} level={ProficiencyLevel.expert} />
<SkillDisplay name={SkillEnum.javascript} level={ProficiencyLevel.expert} />
<SkillDisplay name={SkillEnum.java} level={ProficiencyLevel.advanced} />
<SkillDisplay name={SkillEnum.cpp} level={ProficiencyLevel.intermediate} />
<SkillDisplay name={SkillEnum.php} level={ProficiencyLevel.beginner} />
<div data-aos = {"fade-left"} className={styles.skills}>
<div>
<i>Press the &quot;+&quot; to expand a section</i>&nbsp;👀
</div>
<div className={styles.innerskills}>
{
Object.entries(skillsInCategories).map(([category, skills]) => {
console.log(skills);
return <Accordion title={category} key={category}>
{
skills.map((skill) => {
return <SkillDisplay {...skill} key={skill.name} />;
})
}
</Accordion>;
})
}
<h2>Frameworks/Libraries</h2>
<b>Artificial Intelligence/Data Analysis</b>
<SkillDisplay name={SkillEnum.pytorch} level={ProficiencyLevel.master} />
<SkillDisplay name={SkillEnum.numpy} level={ProficiencyLevel.master} />
<SkillDisplay name={SkillEnum.plt} level={ProficiencyLevel.advanced} />
<SkillDisplay name={SkillEnum.spaCy} level={ProficiencyLevel.intermediate} />
<SkillDisplay name={SkillEnum.tensorflow} level={ProficiencyLevel.beginner} />
<Accordion title={"Modules Taken"}>
{
modulesTaken.map(({name, level, score}) => {
return <div id={name.toLowerCase()}
className={styles.technology}
key={name}>
<b>{name}&nbsp;&nbsp;</b>
<span style={{float: "right", fontSize: "0.8em"}}>
{score>=0? score + "%" : "🔮"} <i>{level}</i>
</span>
</div>;
})
}
</Accordion>
</div>
<b>Web Development</b>
<SkillDisplay name={SkillEnum.react} level={ProficiencyLevel.master} />
<SkillDisplay name={SkillEnum.graphql} level={ProficiencyLevel.expert} />
<SkillDisplay name={SkillEnum.express} level={ProficiencyLevel.advanced} />
<h2>Human Languages</h2>
<SkillDisplay name={SkillEnum.english} level={ProficiencyLevel.master}/>
<SkillDisplay name={SkillEnum.polish} level={ProficiencyLevel.master}/>
<SkillDisplay name={SkillEnum.german} level={ProficiencyLevel.advanced}/>
<h2>Miscellaneous</h2>
<SkillDisplay name={SkillEnum.latex} level={ProficiencyLevel.master}/>
<SkillDisplay name={SkillEnum.webscrape} level={ProficiencyLevel.master}/>
<SkillDisplay name={SkillEnum.research} level={ProficiencyLevel.expert}/>
<SkillDisplay name={SkillEnum.photoshop} level={ProficiencyLevel.advanced}/>
<SkillDisplay name={SkillEnum.videoEditing} level={ProficiencyLevel.advanced}/>
<SkillDisplay name={SkillEnum.design3d} level={ProficiencyLevel.beginner}/>
</div>
<div data-aos = {"fade-right"} className={styles.otherLinks}>
<h2>Find out more about me:</h2>

21
src/portfolio/styling/extraLinks.module.scss
View File

@@ -1,21 +0,0 @@
@import "@/src/styles/helpers.scss";
.section {
@include lightSection;
@include regularFont;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 3em 6em;
}
.section .otherLinks{
margin: auto 1em;
}
.section .otherLinks h2{
font-size: 115%;
}

2
src/portfolio/styling/projects.module.scss
View File

@@ -7,7 +7,7 @@
.technology {
font-family: 'Ubuntu Mono', monospace;
font-size: 1.4em;
font-size: 1em;
color: $black;
margin: 0.1em;
padding: 0.1em 0.3em;

54
src/portfolio/styling/skillsLinks.module.scss Normal file
View File

@@ -0,0 +1,54 @@
@import "@/src/styles/helpers.scss";
.section {
@include lightSection;
@include regularFont;
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 0 6em 3em;
.skills {
display: flex;
flex-direction: column;
text-align: center;
.innerskills {
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: $mediumGap;
flex-wrap: wrap;
flex-basis: 60%;
}
flex-wrap: wrap;
flex-basis: 60%;
}
.otherLinks{
margin: auto 1em;
padding: 1em 2em;
background-color: $black;
color: $white;
h2{
font-size: 115%;
}
a {
color: $white;
text-decoration: none;
&:hover {
color: $strong_red;
font-style: italic;
}
}
}
}