feat(content + src): add createBranch segment interpretation + improve english content
-master
parent
7477ec796b
commit
5396ed9b8c
|
|
@ -407,6 +407,215 @@ export const content_en = [
|
||||||
"Date of Brith": "30.06.1997",
|
"Date of Brith": "30.06.1997",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "titleSegment",
|
||||||
|
title: "Experience",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 0,
|
||||||
|
title: "Sii Sp. z o. o. - from 10.11.2022",
|
||||||
|
firstElement: true,
|
||||||
|
image: WorkSiiLogo,
|
||||||
|
content: []
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: "createBranchSegment",
|
||||||
|
// tabs: 1,
|
||||||
|
// branchBorderColor: "#fa0c00",
|
||||||
|
// mainBorderColor: "#0464a8",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "Adobe Inc - DevOps Engineer & Site Reliability Engineer - from 01.12.2023",
|
||||||
|
image: WorkAdobeLogo,
|
||||||
|
branchBorderColor: "#fa0c00",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
content: [
|
||||||
|
"Adobe Experience Manager (AEM) Outage Root Cause Analysis (RCA) Preparation",
|
||||||
|
"Java Heap-Dumps & Thread-Dumps Analysis (Leak Suspects / Threads Operations Investigation)",
|
||||||
|
"SRE Dashboards Analysis (New Relic / Splunk / Grafana)",
|
||||||
|
"SRE Dashboards Creation (Splunk)",
|
||||||
|
"Automatization of Investigation & Routine Tasks (Bash / Python)",
|
||||||
|
"Infrastructure Behaviour Investigation (Kubernetes / Linux / AEM)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#fa0c00",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "createBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#f87479",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "Techem GmbH - DevOps Engineer - from 30.05.2023 to 30.11.2023",
|
||||||
|
image: WorkTechemLogo,
|
||||||
|
branchBorderColor: "#f87479",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
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.)"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#f87479",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "createBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#0464a8",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "Inside Projects - DevOps Engineer - from 25.02.2023 to 27.05.2023",
|
||||||
|
image: WorkSiiLogo,
|
||||||
|
branchBorderColor: "#0464a8",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
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)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#0464a8",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "createBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#8fc5c6",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "Infinidat Inc - Integration Developer - from 10.11.2022 to 24.02.2023",
|
||||||
|
image: WorkInfinidatLogo,
|
||||||
|
//lastSubElement: true,
|
||||||
|
branchBorderColor: "#8fc5c6",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
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)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#8fc5c6",
|
||||||
|
mainBorderColor: "#0464a8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 0,
|
||||||
|
title: "Sembot Sp. z o. o. - from 01.11.2020 to 30.10.2022",
|
||||||
|
image: WorkSembotLogo,
|
||||||
|
content: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "createBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#f5c314",
|
||||||
|
mainBorderColor: "#f5c314",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "DevOps Engineer & Python Developer",
|
||||||
|
image: "",
|
||||||
|
//lastSubElement: true,
|
||||||
|
branchBorderColor: "#f5c314",
|
||||||
|
mainBorderColor: "#f5c314",
|
||||||
|
content: [
|
||||||
|
"Server Administration (OVH / AWS / Digital Ocean)",
|
||||||
|
"Server Configuratiion (Nginx (Https-Protal) / Apache / Docker)",
|
||||||
|
"Routine 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)"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#f5c314",
|
||||||
|
mainBorderColor: "#f5c314",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 0,
|
||||||
|
title: "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021",
|
||||||
|
image: WorkURLogo,
|
||||||
|
content: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "createBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#015198",
|
||||||
|
mainBorderColor: "#015198",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 1,
|
||||||
|
title: "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system",
|
||||||
|
image: "",
|
||||||
|
//lastSubElement: true,
|
||||||
|
branchBorderColor: "#015198",
|
||||||
|
mainBorderColor: "#015198",
|
||||||
|
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",
|
||||||
|
"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 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",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "mergeBranchSegment",
|
||||||
|
tabs: 1,
|
||||||
|
branchBorderColor: "#015198",
|
||||||
|
mainBorderColor: "#015198",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "workSubSegment",
|
||||||
|
tabs: 0,
|
||||||
|
title: "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017",
|
||||||
|
image: WorkZSELogo,
|
||||||
|
noElements: true,
|
||||||
|
content: [],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "titleSegment",
|
type: "titleSegment",
|
||||||
title: "Tech Skills",
|
title: "Tech Skills",
|
||||||
|
|
@ -568,161 +777,6 @@ export const content_en = [
|
||||||
lastElement: true,
|
lastElement: true,
|
||||||
content: [],
|
content: [],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: "titleSegment",
|
|
||||||
title: "Experience",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 0,
|
|
||||||
title: "ZSE in Rzeszów / Technical School - IT - from 2013 to 2017",
|
|
||||||
image: WorkZSELogo,
|
|
||||||
firstElement: true,
|
|
||||||
noElements: true,
|
|
||||||
content: [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 0,
|
|
||||||
title: "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021",
|
|
||||||
image: WorkURLogo,
|
|
||||||
content: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 1,
|
|
||||||
title: "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system",
|
|
||||||
image: "",
|
|
||||||
branchBorderColor: "#015198",
|
|
||||||
mainBorderColor: "#015198",
|
|
||||||
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",
|
|
||||||
"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 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",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "mergeBranchSegment",
|
|
||||||
tabs: 1,
|
|
||||||
branchBorderColor: "#015198",
|
|
||||||
mainBorderColor: "#015198",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 0,
|
|
||||||
title: "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - from 01.11.2020 to 30.10.2022",
|
|
||||||
image: WorkSembotLogo,
|
|
||||||
branchBorderColor: "#f5c314",
|
|
||||||
content: [
|
|
||||||
"Server Administration (OVH / AWS / Digital Ocean)",
|
|
||||||
"Server Configuratiion (Nginx (Https-Protal) / Apache / Docker)",
|
|
||||||
"Routine 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)"
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 0,
|
|
||||||
title: "Sii Sp. z o. o. - from 10.11.2022",
|
|
||||||
image: WorkSiiLogo,
|
|
||||||
content: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 1,
|
|
||||||
title: "Infinidat Inc - Integration Developer - from 10.11.2022 to 24.02.2023",
|
|
||||||
image: WorkInfinidatLogo,
|
|
||||||
branchBorderColor: "#8fc5c6",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
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)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "mergeBranchSegment",
|
|
||||||
tabs: 1,
|
|
||||||
branchBorderColor: "#8fc5c6",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 1,
|
|
||||||
title: "Inside Projects - DevOps Engineer - from 25.02.2023 to 27.05.2023",
|
|
||||||
image: WorkSiiLogo,
|
|
||||||
branchBorderColor: "#0464a8",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
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)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "mergeBranchSegment",
|
|
||||||
tabs: 1,
|
|
||||||
branchBorderColor: "#0464a8",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 1,
|
|
||||||
title: "Techem GmbH - DevOps Engineer - from 30.05.2023 to 30.11.2023",
|
|
||||||
image: WorkTechemLogo,
|
|
||||||
branchBorderColor: "#f87479",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
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.)"
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "mergeBranchSegment",
|
|
||||||
tabs: 1,
|
|
||||||
branchBorderColor: "#f87479",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "workSubSegment",
|
|
||||||
tabs: 1,
|
|
||||||
title: "Adobe Inc - DevOps Engineer & Site Reliability Engineer - from 01.12.2023",
|
|
||||||
image: WorkAdobeLogo,
|
|
||||||
branchBorderColor: "#fa0c00",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
content: [
|
|
||||||
"Adobe Experience Manager (AEM) Outage Root Cause Analysis (RCA) Preparation",
|
|
||||||
"Java Heap-Dumps & Thread-Dumps Analysis (Leak Suspects / Threads Operations Investigation)",
|
|
||||||
"SRE Dashboards Analysis (New Relic / Splunk / Grafana)",
|
|
||||||
"SRE Dashboards Creation (Splunk)",
|
|
||||||
"Automatization of Investigation & Routine Tasks (Bash / Python)",
|
|
||||||
"Infrastructure Behaviour Investigation (Kubernetes / Linux / AEM)",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "mergeBranchSegment",
|
|
||||||
tabs: 1,
|
|
||||||
branchBorderColor: "#fa0c00",
|
|
||||||
mainBorderColor: "#0464a8",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: "titleSegment",
|
type: "titleSegment",
|
||||||
title: "Interests",
|
title: "Interests",
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,26 @@ import { content_en } from "../content/kamil"
|
||||||
|
|
||||||
const MiniWorkImage = ({ image }) => {
|
const MiniWorkImage = ({ image }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: "40px",
|
width: "40px",
|
||||||
height: "40px",
|
height: "40px",
|
||||||
float: "left",
|
float: "left",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={ image }
|
src={ image }
|
||||||
style={{
|
style={{
|
||||||
maxHeight: "100%",
|
maxHeight: "100%",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
objectPosition: "center",
|
objectPosition: "center",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,124 +33,179 @@ const MiniWorkImage = ({ image }) => {
|
||||||
const SegmentTitle = ({ segment }) => {
|
const SegmentTitle = ({ segment }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="segment_general"
|
className="segment_general"
|
||||||
>
|
>
|
||||||
<div className="segment_title">
|
<div className="segment_title">
|
||||||
{ segment.title }
|
{ segment.title }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const SegmentListNormal = ({ segment, tabs }) => {
|
const SegmentListNormal = ({ segment, tabs }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 100 - tabs * 5 + "%",
|
width: 100 - tabs * 5 + "%",
|
||||||
paddingLeft: tabs * 5 + "%",
|
paddingLeft: tabs * 5 + "%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="segment_content_normal"
|
className="segment_content_normal"
|
||||||
>
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
{
|
{
|
||||||
segment.content.length > 0 ?
|
segment.content.length > 0 ?
|
||||||
segment.title + ":"
|
segment.title + ":"
|
||||||
:
|
:
|
||||||
segment.title + ","
|
segment.title + ","
|
||||||
}
|
}
|
||||||
</li>
|
</li>
|
||||||
{
|
{
|
||||||
segment.content.length > 0 ?
|
segment.content.length > 0 ?
|
||||||
<ul>
|
<ul>
|
||||||
{
|
{
|
||||||
segment.content.map(
|
segment.content.map(
|
||||||
(item, index) => {
|
(item, index) => {
|
||||||
return (
|
return (
|
||||||
<li key={ index }>
|
<li key={ index }>
|
||||||
{ item + "," }
|
{ item + "," }
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
:
|
:
|
||||||
<></>
|
<></>
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const SegmentListWork = ({ segment, tabs }) => {
|
const SegmentListWork = ({ segment, tabs }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 100 - tabs * 5 + "%",
|
width: 100 - tabs * 5 + "%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
borderLeft: segment.mainBorderColor === null ? "" : "3.5px dotted " + segment.mainBorderColor,
|
borderLeft: segment.mainBorderColor === null ? "" : "3.5px dotted " + segment.mainBorderColor,
|
||||||
paddingLeft: tabs * 2.5 + "%",
|
paddingLeft: tabs * 2.5 + "%",
|
||||||
marginLeft: tabs * 2.5 + "%",
|
marginLeft: tabs * 2.5 + "%",
|
||||||
marginTop: segment.firstElement === true ? "15px" : "",
|
marginTop: segment.firstElement === true ? "15px" : "",
|
||||||
marginBottom: segment.noElements === true ? "15px" : "",
|
marginBottom: segment.noElements === true ? "15px" : "",
|
||||||
}}
|
}}
|
||||||
className="segment_content_work"
|
className="segment_content_work"
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
segment.image != "" ?
|
segment.image != "" ?
|
||||||
<MiniWorkImage
|
<MiniWorkImage
|
||||||
image={ segment.image }
|
image={ segment.image }
|
||||||
/>
|
/>
|
||||||
:
|
:
|
||||||
""
|
""
|
||||||
}
|
}
|
||||||
<div
|
<div
|
||||||
className="segment_content_title"
|
className="segment_content_title"
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
segment.content.length > 0 ?
|
segment.content.length > 0 ?
|
||||||
segment.title + ":"
|
segment.title + ":"
|
||||||
:
|
:
|
||||||
segment.lastElement === true ?
|
segment.lastElement === true ?
|
||||||
segment.title + "."
|
segment.title + "."
|
||||||
:
|
:
|
||||||
segment.noElements === true ?
|
segment.noElements === true ?
|
||||||
segment.title + ","
|
segment.title + ","
|
||||||
:
|
:
|
||||||
segment.title + ":"
|
segment.title + ":"
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
segment.content.length > 0 ?
|
segment.content.length > 0 ?
|
||||||
<ul
|
<ul
|
||||||
style={{
|
style={{
|
||||||
borderLeft: segment.branchBorderColor === null ? "" : "3.5px dotted " + segment.branchBorderColor,
|
borderLeft: segment.branchBorderColor === null ? "" : "3.5px dotted " + segment.branchBorderColor,
|
||||||
}}
|
marginBottom: segment.lastSubElement === true ? "30px" : "",
|
||||||
>
|
paddingBottom: segment.haveOneElement === true ? "30px" : "",
|
||||||
{
|
}}
|
||||||
segment.content.map(
|
>
|
||||||
(item, index) => {
|
{
|
||||||
return (
|
segment.content.map(
|
||||||
<li key={ index }>
|
(item, index) => {
|
||||||
{ item + "," }
|
return (
|
||||||
</li>
|
<li key={ index }>
|
||||||
)
|
{ item + "," }
|
||||||
}
|
</li>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</ul>
|
)
|
||||||
:
|
}
|
||||||
<></>
|
</ul>
|
||||||
}
|
:
|
||||||
</div>
|
<></>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const SegmentCreateBranch = ({ segment, tabs }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 100 - tabs * 5 + "%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="segment_content_work"
|
||||||
|
style={{
|
||||||
|
color: segment.branchBorderColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginLeft: tabs * 2.15 + "%",
|
||||||
|
marginTop: "-5px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderLeft: "3.5px dotted " + segment.mainBorderColor,
|
||||||
|
marginLeft: tabs * 2.5 + "%",
|
||||||
|
}}
|
||||||
|
className="segment_content_work"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: tabs * 2.5 + "%",
|
||||||
|
height: "20px",
|
||||||
|
marginLeft: "-3.5px",
|
||||||
|
borderRadius: "0 0 0 100%",
|
||||||
|
borderBottom: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
borderLeft: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "18px",
|
||||||
|
height: "20px",
|
||||||
|
marginLeft: tabs * 2.5 + "%",
|
||||||
|
borderRadius: "0 100% 0 0",
|
||||||
|
borderTop: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
borderRight: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -158,53 +213,53 @@ const SegmentListWork = ({ segment, tabs }) => {
|
||||||
|
|
||||||
const SegmentMergeBranch = ({ segment, tabs }) => {
|
const SegmentMergeBranch = ({ segment, tabs }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 100 - tabs * 5 + "%",
|
width: 100 - tabs * 5 + "%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
|
||||||
borderLeft: "3.5px dotted " + segment.mainBorderColor,
|
|
||||||
marginLeft: tabs * 2.5 + "%",
|
|
||||||
}}
|
|
||||||
className="segment_content_work"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "18px",
|
|
||||||
height: "30px",
|
|
||||||
marginLeft: tabs * 2.5 + "%",
|
|
||||||
borderRadius: "0 0 100% 0",
|
|
||||||
borderBottom: "3.5px dotted " + segment.branchBorderColor,
|
|
||||||
borderRight: "3.5px dotted " + segment.branchBorderColor,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: tabs * 2.5 + "%",
|
|
||||||
height: "30px",
|
|
||||||
marginLeft: "-3.5px",
|
|
||||||
borderRadius: "100% 0 0 0",
|
|
||||||
borderTop: "3.5px dotted " + segment.branchBorderColor,
|
|
||||||
borderLeft: "3.5px dotted " + segment.branchBorderColor,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="segment_content_work"
|
|
||||||
style={{
|
style={{
|
||||||
color: segment.branchBorderColor,
|
borderLeft: "3.5px dotted " + segment.mainBorderColor,
|
||||||
fontWeight: "bold",
|
marginLeft: tabs * 2.5 + "%",
|
||||||
marginLeft: tabs * 2.15 + "%",
|
}}
|
||||||
marginTop: "-5px",
|
className="segment_content_work"
|
||||||
}}
|
>
|
||||||
>
|
<div
|
||||||
x
|
style={{
|
||||||
</div>
|
width: "18px",
|
||||||
</div>
|
height: "20px",
|
||||||
|
marginLeft: tabs * 2.5 + "%",
|
||||||
|
borderRadius: "0 0 100% 0",
|
||||||
|
borderBottom: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
borderRight: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: tabs * 2.5 + "%",
|
||||||
|
height: "20px",
|
||||||
|
marginLeft: "-3.5px",
|
||||||
|
borderRadius: "100% 0 0 0",
|
||||||
|
borderTop: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
borderLeft: "3.5px dotted " + segment.branchBorderColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="segment_content_work"
|
||||||
|
style={{
|
||||||
|
color: segment.branchBorderColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginLeft: tabs * 2.15 + "%",
|
||||||
|
marginTop: "-5px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -212,8 +267,8 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
|
||||||
const SegmentGeneral = ({ segment }) => {
|
const SegmentGeneral = ({ segment }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="segment_general"
|
className="segment_general"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={ segment.image }
|
src={ segment.image }
|
||||||
className="segment_image cover"
|
className="segment_image cover"
|
||||||
|
|
@ -265,8 +320,8 @@ const SegmentGeneral = ({ segment }) => {
|
||||||
const SegmentRODO = ({ segment }) => {
|
const SegmentRODO = ({ segment }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="segment_general"
|
className="segment_general"
|
||||||
>
|
>
|
||||||
<div className="segment_content_normal foot_content">
|
<div className="segment_content_normal foot_content">
|
||||||
{ segment.content }
|
{ segment.content }
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -285,53 +340,61 @@ const Segment = ({ index, segment }) => {
|
||||||
key={ segment_index }
|
key={ segment_index }
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
segment.type === "generalTitleSegment" ?
|
segment.type === "generalTitleSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentGeneral
|
<SegmentGeneral
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
segment.type === "titleSegment" ?
|
segment.type === "titleSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentTitle
|
<SegmentTitle
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
segment.type === "subSegment" ?
|
segment.type === "subSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentListNormal
|
<SegmentListNormal
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
tabs={ segment.tabs }
|
tabs={ segment.tabs }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
segment.type === "workSubSegment" ?
|
segment.type === "workSubSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentListWork
|
<SegmentListWork
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
tabs={ segment.tabs }
|
tabs={ segment.tabs }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
segment.type === "mergeBranchSegment" ?
|
segment.type === "createBranchSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentMergeBranch
|
<SegmentCreateBranch
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
tabs={ segment.tabs }
|
tabs={ segment.tabs }
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
segment.type === "RODOSegment" ?
|
segment.type === "mergeBranchSegment" ?
|
||||||
<>
|
<>
|
||||||
<SegmentRODO
|
<SegmentMergeBranch
|
||||||
segment={ segment }
|
segment={ segment }
|
||||||
/>
|
tabs={ segment.tabs }
|
||||||
</>
|
/>
|
||||||
:
|
</>
|
||||||
<></>
|
:
|
||||||
}
|
segment.type === "RODOSegment" ?
|
||||||
|
<>
|
||||||
|
<SegmentRODO
|
||||||
|
segment={ segment }
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
:
|
||||||
|
<></>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue