feat(cv): upgrade skills section

-

src/content/kamil.js

@@ -1,4 +1,16 @@
 import MePng from "../images/me_1.jpg"
+
+import SkillsPythonLogo from "../images/skills_python_logo.png"
+import SkillsDevOpsLogo from "../images/skills_devops_logo.png"
+import SkillsBashLogo from "../images/skills_bash_logo.png"
+import SkillsContainersLogo from "../images/skills_containers_logo.png"
+import SkillsNginxLogo from "../images/skills_nginx_logo.png"
+import SkillsCloudProvidersLogo from "../images/skills_cloud_providers_logo.png"
+import SkillsDatabasesLogo from "../images/skills_databases_logo.png"
+import SkillsRelationDbLogo from "../images/skills_relation_db_logo.png"
+import SkillsDocumentDbLogo from "../images/skills_document_db_logo.png"
+import SkillsEnglishLogo from "../images/skills_english_logo.png"
+
 import WorkZSELogo from "../images/work_zse_logo.png"
 import WorkURLogo from "../images/work_ur_logo.png"
 import WorkSembotLogo from "../images/work_sembot_logo.png"
@@ -6,6 +18,9 @@ import WorkSiiLogo from "../images/work_sii_logo.png"
 import WorkInfinidatLogo from "../images/work_infinidat_logo.png"
 import WorkTechemLogo from "../images/work_techem_logo.png"
 
+import InterestsBlockchainLogo from "../images/interests_blockchain_logo.png"
+import InterestsBlenderLogo from "../images/interests_blender_logo.png"
+
 
 export const content_pl = [
     {
@@ -25,47 +40,163 @@ export const content_pl = [
       title: "Umiejętności",
     },
 	{
-	  type: "subSegment",
+	  type: "workSubSegment",
 	  tabs: 0,
-	  title: "Programowanie",
+	  title: "Programowanie - Python",
+	  image: "", //SkillsPythonLogo,
+	  branchBorderColor: "#ffd748",
+	  mainBorderColor: null,
+	  firstElement: true,
 	  content: [
-        "Python - Django / Django REST Framework / Channels 3.0",
+		"Django",
-        "Javascript - ReactJS / Redux Toolkit",
+		"Django REST Framework",
+		"Channels 3.0",
+		"Celery (Task Manager)",
+		"Asyncio",
 	  ],
 	},
 	{
-	  type: "subSegment",
+	  type: "workSubSegment",
 	  tabs: 0,
-	  title: "Konfiguracja Serwerów",
+	  title: "DevOps",
+	  image: "", //SkillsDevOpsLogo,
+	  mainBorderColor: null,
+	  content: [],
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Automatyzacja",
+	  image: "", //SkillsBashLogo,
+	  branchBorderColor: "#4aa720",
+	  mainBorderColor: "#2e8cb1",
 	  content: [
-        "Apache / Nginx (Https-Portal)"
+		"Jenkins (CI/CD / Automatyzacja Procesów (Job's) / GitOps)",
+		"Ansible (Automatyzacja konfiguracji środowisk developerskich / serwerowych)",
+		"Bash / ZSH (Linux)",
+		"Powershell (Windows)",
 	  ],
 	},
 	{
-	  type: "subSegment",
+      type: "mergeBranchSegment",
-	  tabs: 0,
+	  tabs: 1,
-      title: "Obsługa Narzędzi DevOps",
+	  branchBorderColor: "#4aa720",
+	  mainBorderColor: "#2e8cb1", 
+	},
+
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Konteneryzacja",
+	  image: "", //SkillsContainersLogo,
+	  branchBorderColor: "#00b7ff",
+	  mainBorderColor: "#2e8cb1",
 	  content: [
-        "Jenkins / Ansible / Docker / Docker-Compose / Automatyzacja w Bash",
+		"Docker",
+		"Docker-Compose (Mikroserwisy zorientowane na pojedyńcze serwery lub debugowanie)",
+		"MiniKube (Lokalne debugowanie manifestów K8S)",
+		"Kubernetes (Helm / Cert-Manager / Ingress / K9S)",
 	  ],
 	},
 	{
-	  type: "subSegment",
+      type: "mergeBranchSegment",
+	  tabs: 1,
+	  branchBorderColor: "#00b7ff",
+	  mainBorderColor: "#2e8cb1", 
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Konfiguracja",
+	  image: "", //SkillsNginxLogo,
+	  branchBorderColor: "#d90000",
+	  mainBorderColor: "#2e8cb1",
+	  content: [
+		"Apache",
+		"Nginx (https-portal)",
+	  ],
+	},
+	{
+      type: "mergeBranchSegment",
+	  tabs: 1,
+	  branchBorderColor: "#d90000",
+	  mainBorderColor: "#2e8cb1", 
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Obsługa Cloud Provider'ów",
+	  image: "", //SkillsCloudProvidersLogo,
+	  branchBorderColor: "#f96900",
+	  mainBorderColor: "#2e8cb1",
+	  content: [
+		"Hetzner",
+		"OVH",
+		"AWS",
+	  ],
+	},
+	{
+      type: "mergeBranchSegment",
+	  tabs: 1,
+	  branchBorderColor: "#f96900",
+	  mainBorderColor: "#2e8cb1", 
+	},
+	{
+	  type: "workSubSegment",
 	  tabs: 0,
 	  title: "Konfiguracja & Administracja Baz Danych",
+	  image: "", //SkillsDatabasesLogo,
+	  mainBorderColor: null,
+	  content: [],
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Bazy Relacyjne (SQL)",
+	  image: "", //SkillsRelationDbLogo,
+	  branchBorderColor: "#7b00b3",
+	  mainBorderColor: "#1038a7",
 	  content: [
-        "SQL - MariaDB / MySQL / PostgreSQL",
+		"MariaDB",
-        "NoSQL - MongoDb / ElasticSearch / Redis"
+		"MySQL",
+		"PostgreSQL",
 	  ],
 	},
 	{
-	  type: "subSegment",
+      type: "mergeBranchSegment",
-	  tabs: 0,
+	  tabs: 1,
-      title: "Język Angielski",
+	  branchBorderColor: "#7b00b3",
+	  mainBorderColor: "#1038a7", 
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Bazy Dokumentowe (NoSQL)",
+	  image: "", //SkillsDocumentDbLogo,
+	  branchBorderColor: "#047900",
+	  mainBorderColor: "#1038a7",
 	  content: [
-        "Poziom B2",
+		"MongoDB (Sharded Cluster)",
+		"ElasticSearch (ElasticSearch / Kibana / Logstash)",
+		"Redis (Cache / Task Queue)",
+		"RabbitMQ (Task Queue)",
 	  ],
 	},
+	{
+      type: "mergeBranchSegment",
+	  tabs: 1,
+	  branchBorderColor: "#047900",
+	  mainBorderColor: "#1038a7", 
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 0,
+	  title: "Angielski - Poziom B2",
+	  image: "", //SkillsEnglishLogo,
+	  mainBorderColor: null,
+	  lastElement: true,
+	  content: [],
+	},	
 	{
 	  type: "titleSegment",
       title: "Doświadczenie",
@@ -75,6 +206,8 @@ export const content_pl = [
 	  tabs: 0,
 	  title: "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017",
 	  image: WorkZSELogo,
+	  mainBorderColor: null,
+	  firstElement: true,
 	  noElements: true,
 	  content: [],
 	},
@@ -116,6 +249,7 @@ export const content_pl = [
       title: "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - od 01.11.2020 do 30.10.2022",
 	  image: WorkSembotLogo,
 	  branchBorderColor: "#f5c314",
+	  mainBorderColor: null, 
 	  content: [
         "Administracja serwerów (OVH / AWS / Digital Ocean)",
         "Konfiguracja serwerów (Nginx (Https-Portal) / Apache / Docker)",
@@ -130,6 +264,7 @@ export const content_pl = [
 	  tabs: 0,
 	  title: "Sii Sp. z o. o. - od 10.11.2022",
       image: WorkSiiLogo,
+	  mainBorderColor: null,
 	  content: [],
 	},
 	{
@@ -203,20 +338,30 @@ export const content_pl = [
       title: "Zainteresowania",
     },
 	{
-	  type: "subSegment",
+	  type: "workSubSegment",
 	  tabs: 0,
 	  title: "Web3.0",
-	  image: "",
+	  image: "", //InterestsBlockchainLogo,
+	  firstElement: true,
+	  branchBorderColor: "black",
+	  mainBorderColor: null,
 	  content: [
-        "Blockchain / Cryptography / Smart Contracts",
+		"Blockchain",
+		"Cryptography",
+		"Smart Contracts",
       ],
 	},
 	{
-	 type: "subSegment",
+	  type: "workSubSegment",
 	  tabs: 0,
-     title: "Grafika 3D & 2D",
+	  title: "Grafika 2D & 3D",
-	 image: "",
+	  image: "", //InterestsBlenderLogo, 
-	 content: [],
+	  branchBorderColor: "#ff7021",
+	  mainBorderColor: null,
+	  content: [
+		"Blender",
+		"Midjurney",
+      ],
 	},
     {
 	  type: "RODOSegment",
@@ -293,6 +438,7 @@ export const content_en = [
 	  tabs: 0,
 	  title: "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017",
 	  image: WorkZSELogo,
+	  firstElement: true,
 	  noElements: true,
 	  content: [],
 	},

src/pages/index.js

@@ -96,10 +96,10 @@ const SegmentListWork = ({ segment, tabs }) => {
    >
 	 <div
 	   style={{ 
-		   borderLeft: "3.5px dotted " + segment.mainBorderColor,
+		   borderLeft: segment.mainBorderColor === null ? "" : "3.5px dotted " + segment.mainBorderColor,
 		   paddingLeft: tabs * 2.5 + "%",
 		   marginLeft: tabs * 2.5 + "%",
-		   marginTop: segment.noElements === true ? "30px" : "",
+		   marginTop: segment.firstElement === true ? "15px" : "",
 		   marginBottom: segment.noElements === true ? "15px" : "",
 	   }}
 	   className="segment_content_work"
@@ -118,6 +118,9 @@ const SegmentListWork = ({ segment, tabs }) => {
 	     {
 	       segment.content.length > 0 ?
 		     segment.title + ":"
+           :
+			 segment.lastElement === true ?
+			     segment.title + "."
 			 :
 			   segment.noElements === true ?
 		         segment.title + ","
@@ -129,7 +132,7 @@ const SegmentListWork = ({ segment, tabs }) => {
 	       segment.content.length > 0 ?
 		     <ul
 		     	style={{
-	         		borderLeft: "3.5px dotted " + segment.branchBorderColor,
+					borderLeft: segment.branchBorderColor === null ? "" : "3.5px dotted " + segment.branchBorderColor,
 	     	    }}
 		     >
 			 {