upgrade page to other language (english) && make swapper && upgrade content

src/pages/index.js

@@ -1,13 +1,14 @@
 import * as React from "react"
 import "../styles/general.scss"
-import MePng from "../images/me.png"
+import MePng from "../images/me_1.jpg"
+
 
 const SegmentWithImage = ({ segment }) => {
   return (
     <div>
       <img 
         src={ MePng } 
-        className="segment_image"
+        className="segment_image cover"
       />
       <div className="segment_title segment_title_image">
         { segment.title }
@@ -169,7 +170,7 @@ const Segment = ({ index, segment }) => {
 
 const IndexPage = () => {
 
-  let content = [
+  let content_pl = [
     {
       title: "Kamil Żuk",
       image: "me.png",
@@ -188,6 +189,9 @@ const IndexPage = () => {
           "Python - Django / Django REST Framework / Channels 3.0",
           "Javascript - ReactJS / Redux Toolkit",
         ],
+        "Konfiguracja Serwerów": [
+          "Apache / Nginx (Https-Portal)"
+        ],
         "Obsługa Narzędzi DevOps": [
           "Jenkins / Ansible / Docker / Docker-Compose / Docker Swarm / Kubernetes / Automatyzacja w Bash",
         ],
@@ -220,12 +224,16 @@ const IndexPage = () => {
           }
         ],
         "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - od 01.11.2020": [
-          "Obowiązki związane z administracją serwerów (OVH / AWS / Digital Ocean)",
+          {
-          "Obowiązki związane z automatyzacją operacji rutynowych (Ansible / Jenkins pipeline / Bash scripts)",
+            "Obowiązki": [
-          "Obowiązki związane z wdrażaniem produkcyjnym oprogramowania zorientowanego na kontenerach (Docker / Docker-Compose / Docker Swarm)",
+              "Administracja serwerów (OVH / AWS / Digital Ocean)",
-          "Obowiązki związane z konfiguracją serwerową (Nginx / Apache / Docker)",
+              "Konfiguracja serwerów (Nginx (Https-Portal) / Apache / Docker)",
-          "Obowiązki związane z programowaniem narzędzi marchtech (Python / Django / Django REST Framework)",
+              "Automatyzacja operacji rutynowych (Ansible / Jenkins pipeline / Bash scripts)",
-          "Obowiązki związane z implementacją i konfiguracją baz danych do obsługi narzędzi marchtech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
+              "Wdrażanie produkcyjne oprogramowania zorientowanego na kontenerach (Docker / Docker-Compose / Docker Swarm)",
+              "Programowanie narzędzi MarchTech (Python / Django / Django REST Framework)",
+              "Implementacja, konfiguracja oraz administracja baz danych do obsługi narzędzi MarchTech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
+            ]
+          }
         ]
       }
     },
@@ -233,11 +241,11 @@ const IndexPage = () => {
       title: "Zainteresowania",
       content: {
         "Web3.0": [
-          "Blockchain / Cryptography",
+          "Blockchain / Cryptography / Smart Contracts",
         ],
         "Artificial Intelligence / Machine Learning": "",
         "IT Security": "",
-        "Grafika Trójwymiarowa & Dwuwymiarowa": "",
+        "Grafika 3D & 2D": "",
       }
     },
     {
@@ -246,9 +254,118 @@ const IndexPage = () => {
     }
   ]
 
+  let content_en = [
+    {
+      title: "Kamil Żuk",
+      image: "me.png",
+      content: {
+        "E-mail": "zukkamil.44@gmail.com",
+        "Github": "github.com/tbs093a",
+        "Education": "Higher / Engineer",
+        "Place of Residence": "Rzeszów / Poland",
+        "Date of Brith": "30.06.1997",
+      }
+    },
+    {
+      title: "Tech Skills",
+      content: {
+        "Programming": [
+          "Python - Django / Django REST Framework / Channels 3.0",
+          "Javascript - ReactJS / Redux Toolkit",
+        ],
+        "Server Configuration": [
+          "Apache / Nginx (Https-Portal)"
+        ],
+        "DevOps Tools": [
+          "Jenkins / Ansible / Docker / Docker-Compose / Docker Swarm / Kubernetes / Bash",
+        ],
+        "Configuration & Administration": [
+          "SQL - MariaDB / MySQL / PostgreSQL",
+          "NoSQL - MongoDb / ElasticSearch / Redis"
+        ],
+        "English": [
+          "B2 Level",
+        ],
+      }
+    },
+    {
+      title: "Experience",
+      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": [
+              "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",
+              "Sync Django REST Framework API implementation for ready materials and 3D object files managment",
+              "Async Django + Channels 3.0 + Redis  API implementation for live rendering proccess managment",
+              "ReactJS / Gatsby + Redux Toolkit client application implementation for simple sync & async backend application functionality control",
+              "Application deployment in distributed from 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": [
+          {
+            "Responsibilities": [
+              "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 / Docker Swarm)",
+              "MarchTech tools implementation (Python / Django / Django REST Framework)",
+              "Production databases implementation & configuration & administration for MarchTech tools (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      title: "Interests",
+      content: {
+        "Web3.0": [
+          "Blockchain / Cryptography / Smart Contracts",
+        ],
+        "Artificial Intelligence / Machine Learning": "",
+        "IT Security": "",
+        "3D & 2D Graph Design": "",
+      }
+    },
+    {
+      title: "",
+      content: "I agree to the processing of personal data provided in this document for realising the recruitment process pursuant to the Personal Data Protection Act of 10 May 2018 (Journal of Laws 2018, item 1000) and in agreement with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)."
+    }
+  ]
+
+  let eng_ = "🇬🇧"
+  let pol_ = "🇵🇱"
+
+  const [content_swapper, set_content_swap] = React.useState(eng_);
+  const [content, set_content] = React.useState(content_pl);
+
+  const swap_content = (event) => {
+    event.preventDefault()
+    if (content_swapper === eng_) {
+      set_content_swap(pol_)
+      set_content(content_en)
+    } else if (content_swapper === pol_) {
+      set_content_swap(eng_)
+      set_content(content_pl)
+    }
+  }
+
   return (
     <>
       <div className="global_segment">
+        <div className="title_bar">
+          Curriculum Vitae
+        </div>
+        <div className="language_bar">
+          <div onClick={ e => swap_content(e) }>
+            { content_swapper }
+          </div>
+        </div>
         {
           content.map( (value, index) => {
               return (

src/styles/general.scss

@@ -63,6 +63,23 @@ $foot_font_size: 9.8pt;
         margin-left: -2em;  
     }
 
+    .title_bar {
+        margin-top: 20px;
+        width: 80%;
+        float: left;
+        text-align: left;
+        font-family: $title_font_family;
+        font-size: 24pt;
+    }
+
+    .language_bar {
+        margin-top: 20px;
+        width: 20%;
+        float: left;
+        text-align: right;
+        font-size: 24pt;
+    }
+
     .segment_general {
         float: left;
         margin-top: 30px;
@@ -77,6 +94,11 @@ $foot_font_size: 9.8pt;
             background-color: $div_background_color;
         }
 
+        .cover {
+            object-fit: cover;
+            object-position: top;
+        }
+
         .segment_content {
             float: left;
             width: 100%;
@@ -120,7 +142,7 @@ $foot_font_size: 9.8pt;
         .segment_title_image {
             float: left;
             margin-top: 100px;
-            margin-left: -50px;
+            margin-left: -40px;
         }
 
     }