feat(upgrades): tottaly upgrade everything

remove stochastic way of rendering segments, use normal way (split on segments)

package.json

@@ -8,7 +8,7 @@
     "gatsby"
   ],
   "scripts": {
-    "develop": "gatsby develop",
+    "develop": "gatsby develop -p 8888 -H 0.0.0.0",
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",

src/pages/index.js

@@ -10,11 +10,118 @@ import WorkInfinidatLogo from "../images/work_infinidat_logo.png"
 import WorkTechemLogo from "../images/work_techem_logo.png"
 
 
-const SegmentWithImage = ({ segment }) => {
+
+const MiniWorkImage = ({ image }) => {
   return (
-    <div>
     <img
-        src={ MePng } 
+	  src={ image }
+	  style="height: 25px; width: 25px; margin-right: 5px;"
+	/>
+  )
+}
+
+
+const SegmentTitle = ({ segment }) => {
+  return (
+    <div
+	  className="segment_general"
+	  >
+	  <div className="segment_title">
+        { segment.title }
+      </div>
+	</div>
+  )
+}
+
+
+const SegmentListNormal = ({ segment, tabs }) => {
+  return (
+	<div
+	  style={{ 
+		width: 100 - tabs * 5 + "%",
+		marginLeft: tabs * 5 + "%",
+	  }}
+	  >
+	  <div className="segment_content">
+	  	<ul>
+		  <li>
+	  	    {
+			  segment.content.length > 0 ?
+			    segment.title + ":" 
+			  :
+			    segment.title + ","
+		    }
+	      </li>
+	      <ul>
+	  	    {
+			  segment.content.length > 0 ?
+			    segment.content.map( 
+				  (item, index) => {	
+			        return (
+				      <li key={ index }>
+				        { item + "," }
+				      </li>
+			        )
+			      }
+				)
+			  :
+			    <></>
+		    }
+	      </ul>
+		</ul>
+	  </div>
+	</div>
+  )
+}
+
+const SegmentListWork = ({ segment, tabs }) => {
+ return (
+   <div
+	 style={{ 
+		width: 100 - tabs * 5 + "%",
+		marginLeft: tabs * 5 + "%",
+	 }}
+	 >
+	 <div className="segment_content">
+	   <ul>
+	     <li>
+	  	    {
+			  segment.content.length > 0 ?
+			    segment.title + ":" 
+			  :
+			    segment.title + ","
+		    }
+	      </li>
+	      <ul>
+	  	    {
+			  segment.content.length > 0 ?
+			    segment.content.map( 
+				  (item, index) => {	
+			        return (
+				      <li key={ index }>
+				        { item + "," }
+				      </li>
+			        )
+			      }
+				)
+		      :
+		        <></>
+		    }
+	      </ul>
+	    </ul>
+	  </div>
+    </div>
+  )
+}
+
+
+const SegmentGeneral = ({ segment }) => {
+  return (
+    <div
+	  className="segment_general"
+	  >
+      <img 
+        src={ segment.image } 
         className="segment_image cover"
       />
       <div className="segment_title segment_title_image">
@@ -60,134 +167,12 @@ const SegmentWithImage = ({ segment }) => {
   )
 }
 
-const MiniWorkImage = {{ image }} => {
-  return (
-    <img
-	  src={ image }
-	  style="height: 25px; width: 25px; margin-right: 5px;"
-	/>
-  )
-}
-
-const SegmentNormal = ({ segment }) => {
-  return (
-    <div>
-      <div className="segment_title">
-        { segment.title }
-      </div>
-      <div className="segment_content">
-        <ul>
-          {
-            typeof segment.content === "object" ?
-              Object.keys(segment.content).map( (key) => {
-                  return (
-                    <li key={ "item_" + key }>
-                      { 
-                        typeof segment.content[key] === "object" ?
-                          segment.content[key].length === 1 ?
-						  	return (
-							  <>
-							    <MiniWorkImage
-							      image={ segment.content[key][0]['image'] }
-							    />
-							    { key + "," }
-							  </>
-							)
-						  :
-						  	return (
-							  <>
-							    <MiniWorkImage
-							      image={ segment.content[key][0]['image'] }
-							    />
-							    { key + ": " }
-							  </>
-							)
-                        :
-                          key + ","
-                      }
-                      <ul>
-                        { 
-                          typeof segment.content[key] === "object" ?
-                            segment.content[key].slice(1).map( (value, index) => { 
-                                return (
-                                  <li key={ index }>
-                                    { 
-                                      typeof value === "object" ?
-                                        Object.keys( value ).map( ( key_two, index_two) => {
-                                            return (
-                                              <>
-												<MiniWorkImage
-												  image={ value[key_two][0]['image'] }
-												/>
-                                                { key_two + ": " }
-                                                <ul key={ index_two }>
-                                                  {
-                                                    typeof value === "object" ?
-													  Object.keys( value[key_two] ).slice(1).map( (key_three, index_three) => {
-													    return (
-															<>
-															  { key_three + ": " }
-															  <ul key={ index_three }>
-															    {
-																  typeof value[key_two][key_three] === "object" ?
-																	value[key_two][key_three].map( (item, index_three) => {
-																	  return (
-                                                            		    <li>      
-                                                              		      { item + "," }
-                                                            		    </li>
-                                                          			  )
-																	}
-																  :
-																	""
-																}
-															  </ul>
-															</>
-														)
-													  }
-													:
-                                                      value[key_two].map( (item, index_three) => {
-                                                          return (
-                                                            <li>      
-                                                              { item + "," }
-                                                            </li>
-                                                          )
-                                                        }
-                                                      )
-                                                    :
-                                                      value + ","
-                                                  }
-                                                </ul>
-                                              </>
-                                            )
-                                          }
-                                        )
-                                      :
-                                        value + ","
-                                    }
-                                  </li>
-                                )
-                              } 
-                            )
-                          :
-                            ""
-                        }
-                      </ul>
-                    </li>
-                  )
-                }
-              )
-            :
-              "lol"
-          }
-        </ul>
-      </div>
-    </div>
-  )
-}
 
 const SegmentRODO = ({ segment }) => {
   return (
-    <div>
+    <div
+	  className="segment_general"
+	  >
       <div className="segment_content foot_content">
         { segment.content }
       </div>
@@ -202,24 +187,48 @@ const Segment = ({ index, segment }) => {
 
   return (
     <div  
-      className="segment_general"
       id={ segment_index }
       key={ segment_index }
     >
       {
-        "image" in segment ?
+		segment.type === "generalTitleSegment" ?
-          <SegmentWithImage
+		  <>
+		    <SegmentGeneral
               segment={ segment }
           	/>
+		  </>
 		: 
-          segment.title === "" ?
+		  segment.type === "titleSegment" ?
+			<>
+			  <SegmentTitle
+			    segment={ segment }
+			  />
+			</>
+		  :
+		    segment.type === "subSegment" ?
+		      <>
+			    <SegmentListNormal
+				  segment={ segment }
+				  tabs={ segment.tabs }
+				/>
+			  </>
+			: 
+		      segment.type === "workSubSegment" ?
+			    <>
+			      <SegmentListWork
+				    segment={ segment }
+				    tabs={ segment.tabs }
+				  />
+				</>
+			  :
+		        segment.type === "RODOSegment" ?
+			      <>
 			        <SegmentRODO
               	      segment={ segment }
             	    />
+				  </>
 			    :
-            <SegmentNormal
+				  <></>
-              segment={ segment }
-            />  
 	  }
     </div>
   )
@@ -230,8 +239,9 @@ const IndexPage = () => {
 
   let content_pl = [
     {
+	  type: "generalTitleSegment",
       title: "Kamil Żuk",
-      image: "me.png",
+      image: MePng,
       content: {
         "E-mail": "zukkamil.44@gmail.com",
         "Github": "github.com/tbs093a",
@@ -241,41 +251,75 @@ const IndexPage = () => {
       }
     },
     {
+	  type: "titleSegment",
       title: "Umiejętności",
-      content: {
+    },
-        "Programowanie": [
+	{
+	  type: "subSegment",
+	  tabs: 0,
+	  title: "Programowanie",
+	  content: [
         "Python - Django / Django REST Framework / Channels 3.0",
         "Javascript - ReactJS / Redux Toolkit",
       ],
-        "Konfiguracja Serwerów": [
+	},
+	{
+	  type: "subSegment",
+	  tabs: 0,
+	  title: "Konfiguracja Serwerów",
+	  content: [
         "Apache / Nginx (Https-Portal)"
       ],
-        "Obsługa Narzędzi DevOps": [
+	},
+	{
+	  type: "subSegment",
+	  tabs: 0,
+      title: "Obsługa Narzędzi DevOps",
+	  content: [
         "Jenkins / Ansible / Docker / Docker-Compose / Automatyzacja w Bash",
       ],
-        "Konfiguracja & Administracja Baz Danych": [
+	},
+	{
+	  type: "subSegment",
+	  tabs: 0,
+	  title: "Konfiguracja & Administracja Baz Danych",
+	  content: [
         "SQL - MariaDB / MySQL / PostgreSQL",
         "NoSQL - MongoDb / ElasticSearch / Redis"
       ],
-        "Język Angielski": [
+	},
+	{
+	  type: "subSegment",
+	  tabs: 0,
+      title: "Język Angielski",
+	  content: [
         "Poziom B2",
       ],
-      }
 	},
     {
+	  type: "titleSegment",
       title: "Doświadczenie",
-      content: {
-        "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017": [
-		  {
-		    "image": WorkZSELogo,
-		  }
-		],
-        "Uniwersytet Rzeszowski - Studia Inżynierskie - Informatyka - od 2017 do 2021": [
-		  {
-			"image": WorkURLogo,
     },
 	{
-            "Praca Inżynierska - Graficzna baza układów dłoni na potrzeby systemu rozpoznawania Polskiego Języka Migowego (PJM)": [
+	  type: "workSubSegment",
+	  tabs: 0,
+	  title: "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017",
+	  image: WorkZSELogo,
+	  content: [],
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 0,
+	  title: "Uniwersytet Rzeszowski - Studia Inżynierskie - Informatyka - od 2017 do 2021",
+	  image: WorkURLogo,
+	  content: [],
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Praca Inżynierska - Graficzna baza układów dłoni na potrzeby systemu rozpoznawania Polskiego Języka Migowego (PJM)",
+	  image: "",
+	  content: [
 	    "integracja Django / Django REST Framework z oprogramowaniem Blender",
         "integracja Djnago / Django REST Framework z bazą danych MongoDb podzielonej na fragmenty (shards)",
         "implementacja protokołu WebSocket (moduł Channles 3.0) do monitorowania procesu renderowania układów dłoni w czasie rzeczywistym",
@@ -285,35 +329,49 @@ const IndexPage = () => {
         "wdrożenie aplikacji w formie rozproszonej dzięki narzędziom konteneryzacji i orkiestracji Docker + Docker-Compose",
         "implementacja skryptów Bash automatyzujących migrację / konfigurację wszystkich środowisk konteneryzacyjnych na podstawie zmeinnych środowiskowych",
         "wykonanie modelu trójwymiarowgo dłoni przeznaczonego do renderowania realistycznych próbek (zdjęć) układów dłoni, jako materiały do nauki systemu rozpoznawania PJM",
-            ]
-          }
 	  ],
-        "Sembot Sp. z o. o. - od 01.11.2020 do 30.10.2022": [
-		  {
-			"image": WorkSembotLogo,
 	},
 	{
-            "DevOps Engineer & Python Developer": [
+	  type: "workSubSegment",
+	  tabs: 0,
+	  title: "Sembot Sp. z o. o. - od 01.11.2020 do 30.10.2022",
+	  image: WorkSembotLogo,
+	  content: [],
+	},
+    {
+	  type: "workSubSegment",
+	  tabs: 1,
+      title: "DevOps Engineer & Python Developer",
+	  image: "",
+	  content: [
         "Administracja serwerów (OVH / AWS / Digital Ocean)",
         "Konfiguracja serwerów (Nginx (Https-Portal) / Apache / Docker)",
         "Automatyzacja operacji rutynowych (Ansible / Jenkins pipeline / Bash scripts)",
         "Wdrażanie produkcyjne oprogramowania zorientowanego na kontenerach (Docker / Docker-Compose)",
         "Programowanie narzędzi MerchTech (Python / Django / Django REST Framework)",
         "Implementacja, konfiguracja oraz administracja baz danych do obsługi narzędzi MerchTech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
-            ]
-          }
       ],
-        "Sii Sp. z o. o. - od 10.11.2022": [
-          {
-			"image": WorkSiiLogo,
     },
     {
-            "Infinidat Inc - od 10.11.2022 do 24.02.2023": [
+	  type: "workSubSegment",
-			  {
+	  tabs: 0,
-                "image": WorkInfinidatLogo,
+	  title: "Sii Sp. z o. o. - od 10.11.2022",
+      image: WorkSiiLogo,
+	  content: [],
 	},
 	{
-			    "Integration Developer": [
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Infinidat Inc - od 10.11.2022 do 24.02.2023",
+	  image: WorkInfinidatLogo,
+	  content: [],
+	},
+	{
+	  type: "workSubSegment",
+	  tabs: 2,
+	  title: "Integration Developer",
+	  image: "",
+	  content: [
 	    "Utrzymywanie infrastruktury serwerów (VMware / Vcenter / Vsphere / ESXi)",
         "Wdrażanie hostów / węzłów Jenkinsa (Jenkins nodes - z różnymi wersjami distro Linux'a oraz Windows'a) pod budowę i integrację aplikacji (CI/CD)",
         "Wdrażanie hostów Vcenter / Vsphere / ESXi",
@@ -322,27 +380,39 @@ const IndexPage = () => {
         "Automatyzacja rutynowych czynności (Bash / Python / Ansible / Jenkins)",
       ],
 	},
-			],
-			"Projekty Wewnętrzne - od 25.02.2023 do 27.05.2023": [
 	{
-			    "image": WorkSiiLogo,
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Projekty Wewnętrzne - od 25.02.2023 do 27.05.2023",
+	  image: WorkSiiLogo,
+	  content: [],
 	},
 	{
-			    "DevOps Engineer": [
+	  type: "workSubSegment",
+	  tabs: 2,
+	  title: "DevOps Engineer",
+	  image: "",
+	  content: [
 	    "Utrzymywanie infrastruktury mikroserwisów (Docker / Kubernetes / Helm)",
 		"Utrzymywanie infrastruktury serwerów (Linux)",
 		"Automatyzacja konfiguracji serwerów (Ansible / Kubespray / Bash)",
-				  "Ulepszanie / Utrzymywanie procesów zautomatyzowanych (Gitlab-CI),
+		"Ulepszanie / Utrzymywanie procesów zautomatyzowanych (Gitlab-CI)",
 		"Automatyzacja raportowania przebiegu wdrożenia CI/CD (Gitlab-CI / SonarQube)",
 	  ],
 	},
-			],
-			"Techem GmbH - od 30.05.2023": [
 	{
-			    "Image": WorkTechemLogo,
+	  type: "workSubSegment",
+	  tabs: 1,
+	  title: "Techem GmbH - od 30.05.2023",
+	  image: WorkTechemLogo,
+	  content: [],
 	},
 	{
-			    "DevOps Engineer": [
+	  type: "workSubSegment",
+	  tabs: 2,
+	  title: "DevOps Engineer",
+	  image: "",
+	  content: [
 	    "Utrzymywanie Infrastruktury mikroserwisów (Docker / Docker Compose)",
 	    "Utrzymywanie Infrastruktury serwerów (Jenkins Agent - Windows / Jenkins Master - Linux)",
 	    "Automatyzacja konfiguracji serwerów (Ansible / Bash / Powershell)",
@@ -352,21 +422,28 @@ const IndexPage = () => {
 	    "Automatyzacja procesów walidujących kod (Pre-commit / Black Formatter / Flake8 / MyPY / etc.)"
 	  ],
 	},
-			],
+	{
-          }
+	  type: "titleSegment",
-        ]
+      title: "Zainteresowania",
-      }
     },
 	{
-      title: "Zainteresowania",
+	  type: "subSegment",
-      content: {
+	  tabs: 0,
-        "Web3.0": [
+      title: "Web3.0",
+	  image: "",
+	  content: [
         "Blockchain / Cryptography / Smart Contracts",
       ],
-        "Grafika 3D & 2D": "",
-      }
 	},
 	{
+	 type: "subSegment",
+	 tabs: 0,
+     title: "Grafika 3D & 2D",
+	 image: "",
+	 content: [],
+	},
+    {
+	  type: "RODOSegment",
       title: "",
       content: "Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb niezbędnych do realizacji procesu rekrutacji zgodnie z Rozporządzeniem Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO)."
     }
@@ -386,33 +463,57 @@ const IndexPage = () => {
     },
     {
       title: "Tech Skills",
-      content: {
+      content: [
-        "Programming": [
+		{
+		  title: "Programming",
+		  content: [
             "Python - Django / Django REST Framework / Channels 3.0",
             "Javascript - ReactJS / Redux Toolkit",
           ],
-        "Server Configuration": [
+		},
+		{
+		  title: "Server Configuration",
+		  content: [
             "Apache / Nginx (Https-Portal)"
           ],
-        "DevOps Tools": [
+		},
-          "Jenkins / Ansible / Docker / Docker-Compose / Bash",
+		{
+          title: "DevOps Tools",
+		  content: [
+            "Jenkins / Ansible / Docker / Docker-Compose / Automatyzacja w Bash",
           ],
-        "Configuration & Administration": [
+		},
+		{
+		  title: "Configuration & Administration",
+		  content: [
             "SQL - MariaDB / MySQL / PostgreSQL",
             "NoSQL - MongoDb / ElasticSearch / Redis"
           ],
-        "English": [
+		},
+		{
+          title: "English",
+		  content: [
             "B2 Level",
           ],
-      }
+		},
+	  ]
     },
     {
       title: "Experience",
-      content: {
+      content: [
-        "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017": "",
-        "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021": [
 		{
-            "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system": [
+		  title: "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017",
+		  image: WorkZSELogo,
+		  content: [],
+		},
+		{
+		  title: "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021",
+		  image: WorkURLogo,
+		  content: [
+		    {
+	          title: "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system",
+			  image: "",
+			  content: [
 			    "Django / Django REST Framework integration with 3D objects editor software - Blender",
                 "Djnago / Django REST Framework integration with MongoDb sharded database",
                 "WebSocket (Channles 3.0 module) implementation for single proccess of handshape render monitoring",
@@ -422,43 +523,106 @@ const IndexPage = () => {
                 "Application deployment in distributed form as containers with Docker + Docker-Compose tools",
                 "Bash scripts implementation for routain operations automatization like databases migration & all app containers configuration",
                 "Made 3D hand model for realistic materials (handshapes) rendering as images for learning PSL recognition system",
-            ]
-          }
 			  ],
-        "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - from 01.11.2020 to 30.10.2022": [
+			},
+		  ],
+		},
 		{
-            "Responsibilities": [
+		  title: "Sembot Sp. z o. o. - from 01.11.2020 to 30.10.2022",
+		  image: WorkSembotLogo,
+		  content: [
+            {
+              title: "DevOps Engineer & Python Developer",
+			  image: "",
+			  content: [
                 "Server Administration (OVH / AWS / Digital Ocean)",
                 "Server Configuratiion (Nginx (Https-Protal) / Apache / Docker)",
                 "Routain operations automation (Ansible / Jenkins pipeline / Bash scripts)",
                 "Applications deployment oriented on containers (Docker / Docker-Compose)",
                 "MerchTech tools implementation (Python / Django / Django REST Framework)",
                 "Production databases implementation & configuration & administration for MerchTech tools (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
-            ]
-          }
               ],
-        "Sii Sp. z o. o. - Integration Developer - from 10.11.2022": [
+            },
+          ],
+	    },
 		{
-            "Responsibilities": [
+		  title: "Sii Sp. z o. o. - from 10.11.2022",
+          image: WorkSiiLogo,
+		  content: [
+		    {
+              title: "Infinidat Inc - from 10.11.2022 to 24.02.2023",
+			  image: WorkInfinidatLogo,
+			  contnet: [
+			    {
+			      title: "Integration Developer",
+				  image: "",
+				  content: [
 				    "Infrastructure maintaining (VMware / Vcenter / Vsphere / ESXi)",
                     "Jenkins nodes implamentation (with different Linux and Windows distros versions) for applications building and integration (CI/CD process)",
                     "Vcenter / Vsphere / ESXi hosts deployment",
                     "Problems solving on integration stage (tests / code fixing & repairing)",
                     "Integration processes & solution improvements (Jenkins pipeline / Gitlab / Python / Bash)",
                     "Routine operations automation (Bash / Python / Ansible / Jenkins)",
-            ]
+                  ],
-          }
+			    },
-        ]
+			  ],
-      }
+			},
+			{
+			  title: "Inside Projects - from 25.02.2023 to 27.05.2023",
+		      image: WorkSiiLogo, 
+			  content: [
+				{
+			      title: "DevOps Engineer",
+				  image: "",
+				  content: [
+			        "Microservices infrastructure maintenance (Docker / Kubernetes / Helm)",
+				    "Servers infrastructure maintenance (Linux)",
+				    "Automatization of servers configuration (Ansible / Kubespray / Bash)",
+				    "Upgrading / maintainance of automatic processes (Gitlab-CI)",
+				    "Automatization of CI/CD process reporting (Gitlab-CI / SonarQube)",
+			      ],
+			    },
+			  ],
+			},
+			{
+			  title: "Techem GmbH - from 30.05.2023",
+			  image: WorkTechemLogo,
+			  content: [
+			    {
+			      title: "DevOps Engineer",
+				  image: "",
+				  content: [
+				    "Microservices infrastructure maintenance (Docker / Docker Compose)",
+				    "Servers infrastructure maintenance (Jenkins Agent - Windows / Jenkins Master - Linux)",
+				    "Automatization of servers configuration (Ansible / Bash / Powershell)",
+				    "Automatization of IrDA devices tests invoking on CI/CD environment (Regression, Merge Request, Commit) (Jenkins CI/CD / Bash / Powershell / Python - TOX)",
+				    "Automatization of re-used python packages building & collecting process (Jenkins CI/CD / Private PyPI / Python)",
+				    "Automatization of tests reporting (Jenkins CI/CD / Test-Result-Analyzer / Jira Xray)",
+				    "Automatization of code validation processes (Pre-commit / Black Formatter / Flake8 / MyPY / etc.)"
+			      ],
+			    },
+			  ],
+            },
+          ],
+        },
+      ],
 	},
     {
       title: "Interests",
-      content: {
+      content: [
-        "Web3.0": [
+		{
+          title: "Web3.0",
+		  image: "",
+		  content: [
             "Blockchain / Cryptography / Smart Contracts",
           ],
-        "3D & 2D Graph Design": "",
+		},
-      }
+		{
+          title: "3D & 2D Graph Design",
+		  image: "",
+		  content: [],
+		},
+	  ]
     },
     {
       title: "",
@@ -638,11 +802,11 @@ const IndexPage = () => {
     }
   ]
 
-  let eng_ = "Wersja po Angielsku 🇬🇧"
+  let eng_ = "🇬🇧"
-  let pol_ = "Polish Version 🇵🇱"
+  let pol_ = "🇵🇱"
 
-  const [content_swapper, set_content_swap] = React.useState(pol_);
+  const [content_swapper, set_content_swap] = React.useState(eng_);
-  const [content, set_content] = React.useState(content_en);
+  const [content, set_content] = React.useState(content_pl);
 
   const swap_content = (event) => {
     event.preventDefault()

src/styles/general.scss

@@ -99,14 +99,6 @@ $foot_font_size: 9.8pt;
             object-position: top;
         } 
 
-        .segment_content {
-            float: left;
-            width: 100%;
-            font-family: $regular_font_family;
-            font-size: $regular_font_size;
-            text-align: justify;
-        }
-
         .foot_content {
             font-size: $foot_font_size;
         }
@@ -126,6 +118,7 @@ $foot_font_size: 9.8pt;
                 margin-top: 5px;
             }
         }
+    }
 
 	.segment_title {
 		float: left;
@@ -139,13 +132,26 @@ $foot_font_size: 9.8pt;
         background-color: $div_background_color;
     }
   
+	.segment_content {
+        float: left;
+        width: 100%;
+        font-family: $regular_font_family;
+        font-size: $regular_font_size;
+        text-align: justify;
+
+		ul {
+			margin-top: 0;
+			margin-bottom: 0;
+			list-style-type: none;
+		}
+    }
+  
     .segment_title_image {
         float: left;
         margin-top: 100px;
         margin-left: -40px;
     }
 
-    }
 
     .subitem {
         margin-left: 15px;