expanding the skill set

src/portfolio/data/workExperienceData.ts

@@ -15,7 +15,8 @@ const workExperienceData : WorkExperienceArgs[] = [
 		company: "Softwire",
 		city: "London",
 		country: "United Kingdom",
-		startDate: "June 2023"
+		startDate: "June 2023",
+		endDate: "August 2023"
 	},
 	{
 		industry: "Education",

src/portfolio/helpers/Project.tsx

@@ -14,6 +14,16 @@ export interface ProjectArguments {
 }
 
 export enum TechnologyEnum {
+	java = "java",
+	pytorch = "pytorch",
+	numpy = "numpy",
+	plt = "matplotlib",
+	tensorflow = "tensorflow",
+	webscrape = "web scraping",
+	graphql = "graphQL",
+	spaCy = "spaCy",
+	cpp = "c++",
+	php = "php",
 	typescript = "typescript",
 	react = "react",
 	html = "html",
@@ -24,10 +34,15 @@ export enum TechnologyEnum {
 	python = "python",
 	linux = "linux",
 	design3d = "3d design",
-	videoEditing = "video editing",
-	photoshop = "photograph editing",
+	videoEditing = "video-editing",
+	photoshop = "photo-editing",
 	machineLearning = "machine learning",
-	computerVision = "computer vision"
+	computerVision = "computer vision",
+	latex = "LATEX",
+	research = "research",
+	polish = "Polish",
+	german = "German",
+	english = "English",
 }
 
 const Project = ({imagePath, title, text, tech, github, access} : ProjectArguments) => {

src/portfolio/helpers/TechnologyDisplay.tsx

@@ -1,20 +1,35 @@
 import {FC} from "react";
-import ProgressBar from "@/src/portfolio/helpers/ProgressBar";
 import styles from "../styling/projects.module.scss";
 import {TechnologyEnum} from "@/src/portfolio/helpers/Project";
 
 type args = {
     name : TechnologyEnum,
-    customScore? : string,
-    score? : number
+    level? : ProficiencyLevel,
 }
 
-const TechnologyDisplay : FC<args> = ({name, score, customScore}) => {
-	if (score) {
+export enum ProficiencyLevel {
+	beginner = "Beginner",
+	intermediate = "Intermediate",
+	advanced = "Advanced",
+	expert = "Expert",
+	master = "Master",
+}
+
+
+const TechnologyDisplay : FC<args> = ({name, level}) => {
+	const level_to_emoji = {
+		[ProficiencyLevel.beginner]: "🌱",
+		[ProficiencyLevel.intermediate]: "🌳",
+		[ProficiencyLevel.advanced]: "🌟",
+		[ProficiencyLevel.expert]: "🚀",
+		[ProficiencyLevel.master]: "🧙‍♂️"
+	};
+
+	if (level) {
 		return (
 			<div id={name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
-				{name}
-				<ProgressBar percentage={score} customScore={customScore}/>
+				<b>{name}&nbsp;&nbsp;</b>
+				<span style={{float: "right", fontSize: "0.8em"}}>{level} {level_to_emoji[level]}</span>
 			</div>
 		);
 	}

src/portfolio/sections/SkillsAndLinks.tsx

@@ -1,4 +1,6 @@
 import styles from "../styling/extraLinks.module.scss";
+import TechnologyDisplay, {ProficiencyLevel} from "@/src/portfolio/helpers/TechnologyDisplay";
+import {TechnologyEnum} from "@/src/portfolio/helpers/Project";
 
 const SkillsAndLinks = () => {
 	const moreInfoLinks = [
@@ -30,7 +32,41 @@ const SkillsAndLinks = () => {
 	return (
 		<div className={styles.section} id={"skills"}>
 			<div data-aos = {"fade-left"} className={styles.otherLinks}>
+				<h2>Programming Languages</h2>
+				<TechnologyDisplay name={TechnologyEnum.python} level={ProficiencyLevel.master} />
+				<TechnologyDisplay name={TechnologyEnum.typescript} level={ProficiencyLevel.expert} />
+				<TechnologyDisplay name={TechnologyEnum.javascript} level={ProficiencyLevel.expert} />
+				<TechnologyDisplay name={TechnologyEnum.java} level={ProficiencyLevel.advanced} />
+				<TechnologyDisplay name={TechnologyEnum.cpp} level={ProficiencyLevel.intermediate} />
+				<TechnologyDisplay name={TechnologyEnum.php} level={ProficiencyLevel.beginner} />
 
+				<h2>Frameworks/Libraries</h2>
+				<b>Artificial Intelligence/Data Analysis</b>
+				<TechnologyDisplay name={TechnologyEnum.pytorch} level={ProficiencyLevel.master} />
+				<TechnologyDisplay name={TechnologyEnum.numpy} level={ProficiencyLevel.master} />
+				<TechnologyDisplay name={TechnologyEnum.plt} level={ProficiencyLevel.advanced} />
+				<TechnologyDisplay name={TechnologyEnum.spaCy} level={ProficiencyLevel.intermediate} />
+				<TechnologyDisplay name={TechnologyEnum.tensorflow} level={ProficiencyLevel.beginner} />
+
+				<b>Web Development</b>
+				<TechnologyDisplay name={TechnologyEnum.react} level={ProficiencyLevel.master} />
+				<TechnologyDisplay name={TechnologyEnum.graphql} level={ProficiencyLevel.expert} />
+				<TechnologyDisplay name={TechnologyEnum.express} level={ProficiencyLevel.advanced} />
+
+				<h2>Human Languages</h2>
+				<TechnologyDisplay name={TechnologyEnum.english} level={ProficiencyLevel.master}/>
+				<TechnologyDisplay name={TechnologyEnum.polish} level={ProficiencyLevel.master}/>
+				<TechnologyDisplay name={TechnologyEnum.german} level={ProficiencyLevel.advanced}/>
+
+				<h2>Miscellaneous</h2>
+				<TechnologyDisplay name={TechnologyEnum.latex} level={ProficiencyLevel.master}/>
+				<TechnologyDisplay name={TechnologyEnum.webscrape} level={ProficiencyLevel.master}/>
+				<TechnologyDisplay name={TechnologyEnum.research} level={ProficiencyLevel.expert}/>
+				<TechnologyDisplay name={TechnologyEnum.photoshop} level={ProficiencyLevel.advanced}/>
+				<TechnologyDisplay name={TechnologyEnum.videoEditing} level={ProficiencyLevel.advanced}/>
+				<TechnologyDisplay name={TechnologyEnum.design3d} level={ProficiencyLevel.beginner}/>
+			</div>
+			<div data-aos = {"fade-right"} className={styles.otherLinks}>
 				<h2>Find out more about me:</h2>
 				<ul>
 					{
@@ -46,8 +82,6 @@ const SkillsAndLinks = () => {
 						)
 					}
 				</ul>
-			</div>
-			<div data-aos = {"fade-right"} className={styles.otherLinks}>
 				<h2>Contact me through:</h2>
 				<ul>
 					{
@@ -64,31 +98,6 @@ const SkillsAndLinks = () => {
 					}
 				</ul>
 			</div>
-			{/*
-					<h2>Programming Languages</h2>
-					<Skill name={"Java"} score={95} />
-					<Skill name={"Python"} score={90} />
-					<Skill name={"JavaScript"} score={85} />
-					<Skill name={"Typescript"} score={80} />
-					<Skill name={"C++"} score={60} />
-					<Skill name={"PHP"} score={30} />
-					<h2>Human Languages</h2>
-					<Skill name={"English"} score={80} customScore={"Fluent"}/>
-					<Skill name={"Polish"} score={100} customScore={"Native"}/>
-					<Skill name={"German"} score={65} customScore={"Intermediate"}/>
-				</div>
-				<div className={"col-md-4"}>
-					<h2>Other Skills</h2>
-					<Skill name={"HTML"} score={100} />
-					<Skill name={"CSS"} score={100} />
-					<Skill name={"SQL"} score={95} />
-					<Skill name={"React.js"} score={90} />
-					<Skill name={"Bootstrap"} score={70} />
-					<Skill name={"Photo-editing"} score={65} />
-					<Skill name={"Express.js"} score={60} />
-					<Skill name={"Linux"} score={55} />
-					<Skill name={"3D Design"} score={50} />
-					*/}
 		</div>
 	);
 };