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

165
package-lock.json generated
View File

@@ -17,6 +17,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"react-transition-group": "^4.4.5",
"sharp": "^0.32.4",
"typescript": "5.1.3"
},
@@ -127,9 +128,9 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
},
"node_modules/@next/env": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.5.tgz",
"integrity": "sha512-SG/gKH6eij4vwQy87b/3mbpQ1X3x2vUdnpwq6/qL2IQWjtq58EY/UuNAp9CoEZoC9sI4L9AD1r+73Z9r4d3uug=="
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
"integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
},
"node_modules/@next/eslint-plugin-next": {
"version": "13.4.12",
@@ -141,9 +142,9 @@
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.5.tgz",
"integrity": "sha512-XvTzi2ASUN5bECFIAAcBiSoDb0xsq+KLj4F0bof4d4rdc+FgOqLvseGQaOXwVi1TIh5bHa7o4b6droSJMO5+2g==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
"integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
"cpu": [
"arm64"
],
@@ -156,9 +157,9 @@
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.5.tgz",
"integrity": "sha512-NQdqal/VKAqlJTuzhjZmNtdo8QSqwmfO7b2xJSAengTEVxQvsH76oGEzQeIv8Ci4NP6DysAFtFrJq++TmIxcUA==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
"integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
"cpu": [
"x64"
],
@@ -171,9 +172,9 @@
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.5.tgz",
"integrity": "sha512-nB8TjtpJCXtzIFjYOMbnQu68ajkA8QK58TreHjTGojSQjsF0StDqo5zFHglVVVHrd8d3N/+EjC18yFNSWnd/ZA==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
"integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
"cpu": [
"arm64"
],
@@ -186,9 +187,9 @@
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.5.tgz",
"integrity": "sha512-W126XUW599OV3giSH9Co40VpT8VAOT47xONVHXZaYEpeca0qEevjj6WUr5IJu/8u+XGWm5xI1S0DYWjR6W+olw==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
"integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
"cpu": [
"arm64"
],
@@ -201,9 +202,9 @@
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.5.tgz",
"integrity": "sha512-ZbPLO/oztQdtjGmWvGhRmtkZ6j9kQqg65kiO7F7Ijj7ojTtu3hh/vY+XRsHa/4Cse6HgyJ8XGZJMGoLb8ecQfQ==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
"integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
"cpu": [
"x64"
],
@@ -216,9 +217,9 @@
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.5.tgz",
"integrity": "sha512-f+/h8KMNixVUoRB+2vza8I+jsthJ4KcvopGUsDIUHe7Q4t+m8nKwGFBeyNu9qNIenYK5g5QYEsSwYFEqZylrTQ==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
"integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
"cpu": [
"x64"
],
@@ -231,9 +232,9 @@
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.5.tgz",
"integrity": "sha512-dvtPQZ5+J+zUE1uq7gP853Oj63e+n0T1ydZ/yRdVh7d8zW9ZFuC9fFrg3MqP1cv1NPPur8rrTqDKN2mRBkSSBw==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
"integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
"cpu": [
"arm64"
],
@@ -246,9 +247,9 @@
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.5.tgz",
"integrity": "sha512-gK9zwGe25x31S4AjPy3Bf2niQvHIAbmwgkzmqWG3OmD4K2Z/Dh2ju4vuyzPzIt0pwQe4B520meP9NizTBmVWSg==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
"integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
"cpu": [
"ia32"
],
@@ -261,9 +262,9 @@
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.5.tgz",
"integrity": "sha512-iyNQVc7eGehrik9RJt9xGcnO6b/pi8C7GCfg8RGenx1IlalEKbYRgBJloF7DQzwlrV47E9bQl8swT+JawaNcKA==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
"integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
"cpu": [
"x64"
],
@@ -345,9 +346,9 @@
"integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA=="
},
"node_modules/@swc/helpers": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
"integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
"integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
"dependencies": {
"tslib": "^2.4.0"
}
@@ -1117,8 +1118,7 @@
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
"dev": true
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@@ -1284,6 +1284,15 @@
"node": ">=6.0.0"
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -3043,9 +3052,9 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/nanoid": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"funding": [
{
"type": "github",
@@ -3076,39 +3085,37 @@
"dev": true
},
"node_modules/next": {
"version": "13.4.5",
"resolved": "https://registry.npmjs.org/next/-/next-13.4.5.tgz",
"integrity": "sha512-pfNsRLVM9e5Y1/z02VakJRfD6hMQkr24FaN2xc9GbcZDBxoOgiNAViSg5cXwlWCoMhtm4U315D7XYhgOr96Q3Q==",
"version": "13.5.6",
"resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
"integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
"dependencies": {
"@next/env": "13.4.5",
"@swc/helpers": "0.5.1",
"@next/env": "13.5.6",
"@swc/helpers": "0.5.2",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001406",
"postcss": "8.4.14",
"postcss": "8.4.31",
"styled-jsx": "5.1.1",
"watchpack": "2.4.0",
"zod": "3.21.4"
"watchpack": "2.4.0"
},
"bin": {
"next": "dist/bin/next"
},
"engines": {
"node": ">=16.8.0"
"node": ">=16.14.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "13.4.5",
"@next/swc-darwin-x64": "13.4.5",
"@next/swc-linux-arm64-gnu": "13.4.5",
"@next/swc-linux-arm64-musl": "13.4.5",
"@next/swc-linux-x64-gnu": "13.4.5",
"@next/swc-linux-x64-musl": "13.4.5",
"@next/swc-win32-arm64-msvc": "13.4.5",
"@next/swc-win32-ia32-msvc": "13.4.5",
"@next/swc-win32-x64-msvc": "13.4.5"
"@next/swc-darwin-arm64": "13.5.6",
"@next/swc-darwin-x64": "13.5.6",
"@next/swc-linux-arm64-gnu": "13.5.6",
"@next/swc-linux-arm64-musl": "13.5.6",
"@next/swc-linux-x64-gnu": "13.5.6",
"@next/swc-linux-x64-musl": "13.5.6",
"@next/swc-win32-arm64-msvc": "13.5.6",
"@next/swc-win32-ia32-msvc": "13.5.6",
"@next/swc-win32-x64-msvc": "13.5.6"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
"fibers": ">= 3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.3.0"
@@ -3117,9 +3124,6 @@
"@opentelemetry/api": {
"optional": true
},
"fibers": {
"optional": true
},
"sass": {
"optional": true
}
@@ -3436,9 +3440,9 @@
}
},
"node_modules/postcss": {
"version": "8.4.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
"integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
@@ -3447,10 +3451,14 @@
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"nanoid": "^3.3.4",
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
@@ -3626,6 +3634,21 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -3917,9 +3940,9 @@
}
},
"node_modules/sharp": {
"version": "0.32.4",
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
"integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
"version": "0.32.6",
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
"hasInstallScript": true,
"dependencies": {
"color": "^4.2.3",
@@ -4535,14 +4558,6 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zod": {
"version": "3.21.4",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
"integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
}
}
}

1
package.json
View File

@@ -18,6 +18,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"react-transition-group": "^4.4.5",
"sharp": "^0.32.4",
"typescript": "5.1.3"
},

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

28
src/styles/main.scss
View File

@@ -41,4 +41,32 @@ body {
.splide__slide {
display: flex;
}
.accordion-content-enter {
opacity: 0;
height: 0;
overflow: hidden;
}
.accordion-content-enter-active {
opacity: 1;
height: auto;
transition: opacity 300ms, height 300ms;
}
.accordion-content-exit {
opacity: 1;
height: auto;
}
.accordion-content-exit-active {
opacity: 0;
height: 0;
transition: opacity 300ms, height 300ms;
overflow: hidden;
}
.accordion-header {
text-align: center;
}