From b50fd99ac0b03cae4fefdcf026300f69b6392d96 Mon Sep 17 00:00:00 2001 From: Patryk Kuchta Date: Thu, 11 Apr 2024 17:28:22 +0100 Subject: [PATCH] skills section overhaul --- package-lock.json | 165 ++++++++++-------- package.json | 1 + src/portfolio/data/modulesTaken.ts | 66 +++++++ src/portfolio/data/skillsData.ts | 105 +++++++++++ src/portfolio/helpers/Accordion.tsx | 29 +++ src/portfolio/helpers/SkillDisplay.tsx | 2 +- src/portfolio/sections/SkillsAndLinks.tsx | 72 ++++---- src/portfolio/styling/extraLinks.module.scss | 21 --- src/portfolio/styling/projects.module.scss | 2 +- src/portfolio/styling/skillsLinks.module.scss | 54 ++++++ src/styles/main.scss | 28 +++ 11 files changed, 412 insertions(+), 133 deletions(-) create mode 100644 src/portfolio/data/modulesTaken.ts create mode 100644 src/portfolio/data/skillsData.ts create mode 100644 src/portfolio/helpers/Accordion.tsx delete mode 100644 src/portfolio/styling/extraLinks.module.scss create mode 100644 src/portfolio/styling/skillsLinks.module.scss diff --git a/package-lock.json b/package-lock.json index eee85d3..bd8ccc6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" - } } } } diff --git a/package.json b/package.json index 332759c..9ea781e 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/portfolio/data/modulesTaken.ts b/src/portfolio/data/modulesTaken.ts new file mode 100644 index 0000000..b01dde0 --- /dev/null +++ b/src/portfolio/data/modulesTaken.ts @@ -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 + } +]; \ No newline at end of file diff --git a/src/portfolio/data/skillsData.ts b/src/portfolio/data/skillsData.ts new file mode 100644 index 0000000..fe135c3 --- /dev/null +++ b/src/portfolio/data/skillsData.ts @@ -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 + } + ] +}; diff --git a/src/portfolio/helpers/Accordion.tsx b/src/portfolio/helpers/Accordion.tsx new file mode 100644 index 0000000..81be3c1 --- /dev/null +++ b/src/portfolio/helpers/Accordion.tsx @@ -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 = ({ title, children }) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleAccordion = () => { + setIsOpen(!isOpen); + }; + + return ( +
+
+

{title} {isOpen ? "-" : "+"}

+ +
+ +
{children}
+ +
+ ); +}; + +export default Accordion; diff --git a/src/portfolio/helpers/SkillDisplay.tsx b/src/portfolio/helpers/SkillDisplay.tsx index e15ca4e..ed1bbb5 100644 --- a/src/portfolio/helpers/SkillDisplay.tsx +++ b/src/portfolio/helpers/SkillDisplay.tsx @@ -27,7 +27,7 @@ const SkillDisplay : FC = ({name, level}) => { if (level) { return ( -
+
{name}   {level} {level_to_emoji[level]}
diff --git a/src/portfolio/sections/SkillsAndLinks.tsx b/src/portfolio/sections/SkillsAndLinks.tsx index a2923a6..19ac6ba 100644 --- a/src/portfolio/sections/SkillsAndLinks.tsx +++ b/src/portfolio/sections/SkillsAndLinks.tsx @@ -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 (
-
-

Programming Languages

- - - - - - +
+
+ Press the "+" to expand a section ðŸ‘€ +
+
+ { + Object.entries(skillsInCategories).map(([category, skills]) => { + console.log(skills); + return + { + skills.map((skill) => { + return ; + }) + } + ; + }) + } -

Frameworks/Libraries

- Artificial Intelligence/Data Analysis - - - - - + + { + modulesTaken.map(({name, level, score}) => { + return
+ {name}   + + {score>=0? score + "%" : "🔮"} {level} + +
; + }) + } + +
- Web Development - - - - -

Human Languages

- - - - -

Miscellaneous

- - - - - -

Find out more about me:

diff --git a/src/portfolio/styling/extraLinks.module.scss b/src/portfolio/styling/extraLinks.module.scss deleted file mode 100644 index f0e5a27..0000000 --- a/src/portfolio/styling/extraLinks.module.scss +++ /dev/null @@ -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%; -} - diff --git a/src/portfolio/styling/projects.module.scss b/src/portfolio/styling/projects.module.scss index 2fb5451..f937425 100644 --- a/src/portfolio/styling/projects.module.scss +++ b/src/portfolio/styling/projects.module.scss @@ -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; diff --git a/src/portfolio/styling/skillsLinks.module.scss b/src/portfolio/styling/skillsLinks.module.scss new file mode 100644 index 0000000..5b0c746 --- /dev/null +++ b/src/portfolio/styling/skillsLinks.module.scss @@ -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; + } + } + } +} + + + diff --git a/src/styles/main.scss b/src/styles/main.scss index 3f6fb66..f8e88ed 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; } \ No newline at end of file