feat(cv): restyle layout — dynamic header, colored markers, smaller fonts

Move generalTitleSegment title to "About me"/"O mnie" with bottom-anchored
syringe layout for title+description between photo and contact. Bullet
markers now inherit branchBorderColor per segment. Reduce work segment
font size and list spacing for denser content. Update Aptiv PLC description
and sync missing EN content items.

Made-with: Cursor
master
sii42400 2026-04-16 12:51:24 +02:00
parent eea44c1c50
commit 506ee49237
3 changed files with 52 additions and 32 deletions

View File

@ -28,6 +28,7 @@ export const content_pl = [
{
type: "generalTitleSegment",
title: "Kamil Żuk",
description_title: "O Mnie",
description: "Inżynier DevOps & Backend specjalizujący się w skalowalnych systemach, automatyzacji i architekturach rozproszonych (Kubernetes, CI/CD, Python). Doświadczony w budowaniu systemów produkcyjnych i platform wewnętrznych.",
image: MePng,
content_language: "pl",
@ -55,7 +56,7 @@ export const content_pl = [
type: "workSubSegment",
tabs: 1,
title: "Aptiv PLC - DevOps Engineer - od 11.02.2025",
description: "Utrzymuję i rozwijam pipeline'y CI/CD (Jenkins, Wind River Studio) wspierające systemy oparte na mikroserwisach. Automatyzuję powtarzalne zadania inżynierskie w Pythonie i Bashu, ograniczając pracę manualną i zwiększając niezawodność wdrożeń. Pracuję z konteneryzacją (Docker, Kubernetes) oraz zarządzaniem artefaktami (JFrog), dbając o skalowalne i stabilne procesy dostarczania oprogramowania.",
description: "Utrzymuję i rozwijam pipeline'y CI/CD (Jenkins, Wind River Studio, Github Actions) wspierające systemy oparte na mikroserwisach. Automatyzuję powtarzalne zadania inżynierskie w Pythonie i Bashu, ograniczając pracę manualną i zwiększając niezawodność wdrożeń. Pracuję z konteneryzacją (Docker, Kubernetes), zarządzaniem artefaktami (JFrog) oraz migracją repozytoriów i procesów CI/CD do środowiska Enterprise (Github).",
image: WorkAptivLogo,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
@ -306,7 +307,7 @@ export const content_pl = [
},
{
type: "titleSegment",
title: "Inne Projekty",
title: "Projekty",
},
{
type: "workSubSegment",
@ -729,6 +730,7 @@ export const content_en = [
{
type: "generalTitleSegment",
title: "Kamil Żuk",
description_title: "About Me",
description: "DevOps & Backend Engineer specializing in scalable systems, automation and distributed architectures (Kubernetes, CI/CD, Python). Experienced in building production-grade systems and internal platforms.",
image: MePng,
content_language: "en",
@ -762,15 +764,17 @@ export const content_en = [
type: "workSubSegment",
tabs: 1,
title: "Aptiv PLC - DevOps Engineer - from 11.02.2025",
description: "Maintained and optimized CI/CD pipelines (Jenkins, Wind River Studio) supporting microservices-based systems. Automated repetitive engineering tasks using Python and Bash, reducing manual workload and improving deployment reliability. Worked with containerized environments (Docker, Kubernetes) and artifact management (JFrog), ensuring scalable and stable delivery processes.",
description: "Maintaining and improving CI/CD pipelines (Jenkins, Wind River Studio, Github Actions) supporting microservices-based systems. Automating repetitive engineering tasks using Python and Bash, reducing manual workload and improving deployment reliability. Working with containerized environments (Docker, Kubernetes), artifact management (JFrog), and migrating repositories and CI/CD processes to Enterprise environment (Github).",
image: WorkAptivLogo,
branchBorderColor: "#000000",
mainBorderColor: "#0464a8",
content: [
"Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Automtization of manual tasks (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
"Work with Artifactory & Registry (JFrog)",
"Work with Microservices (Docker / Kubernetes)",
"Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Github Actions / Python / Bash / GitGerrit / Github)",
"Automation of manual tasks (Jenkins / Wind River Studio / Github Actions / Python / Bash)",
"Work with Artifactory & Registry - Artifactory maintenance + files synchronization (packages, SDKs, etc.) with CI/CD (JFrog)",
"Work with Microservices - adapting containerized environments for CI/CD (Docker / Kubernetes)",
"Git repositories migration (GitGerrit -> Github)",
"CI/CD processes migration to Enterprise environment (Wind River Studio -> Github Actions)"
],
},
{
@ -1012,7 +1016,7 @@ export const content_en = [
},
{
type: "titleSegment",
title: "Other Projects",
title: "Projects",
},
{
type: "workSubSegment",

View File

@ -228,8 +228,8 @@ const SegmentListWork = ({ segment, tabs }) => {
segment.content.map(
(item, index) => {
return (
<li key={ index }>
{ item + "," }
<li key={ index } style={{ color: segment.branchBorderColor || "inherit" }}>
<span style={{ color: "#a6a6a6" }}>{ item + "," }</span>
</li>
)
}
@ -361,14 +361,6 @@ const SegmentGeneral = ({ segment }) => {
className="segment_image cover"
alt={segment.title}
/>
<div className="segment_title segment_title_image">
{segment.title}
</div>
{segment.description && (
<div className="segment_description segment_description_general">
{segment.description}
</div>
)}
{!isVerified ? (
<SimpleCaptchaWrapper
onVerified={setIsVerified}
@ -398,6 +390,16 @@ const SegmentGeneral = ({ segment }) => {
)}
</div>
)}
<div className="segment_header_middle">
<div className="segment_title segment_title_image">
{segment.description_title}
</div>
{segment.description && (
<div className="segment_description segment_description_general">
{segment.description}
</div>
)}
</div>
</div>
);
};
@ -500,7 +502,7 @@ const IndexPage = () => {
<>
<div className="global_segment">
<div className="title_bar">
Curriculum Vitae
{content[0]["title"]}
</div>
<div className="language_bar">
<div onClick={e => swap_content(e)}>

View File

@ -81,6 +81,7 @@ body {
float: left;
margin-top: 30px;
width: 100%;
position: relative;
.segment_image {
float: left;
@ -162,7 +163,7 @@ body {
float: left;
width: 100%;
font-family: $regular_font_family;
font-size: $regular_font_size;
font-size: 10pt;
text-align: justify;
ul {
@ -170,12 +171,16 @@ body {
margin-bottom: 0;
list-style-type: none;
margin-left: 18px;
padding-bottom: 15px;
padding-bottom: 10px;
}
ul li {
padding-top: 8px;
}
ul li::before {
content: "+ >";
color: $div_background_color;
color: inherit;
background-color: $background_color;
font-weight: bold;
display: inline-block;
@ -190,29 +195,38 @@ body {
}
}
.segment_header_middle {
position: absolute;
bottom: 0;
left: 220px;
right: 220px;
}
.segment_title_image {
float: left;
margin-top: 100px;
float: none;
width: 250px;
margin-left: -40px;
}
.segment_description {
float: left;
width: 100%;
clear: both;
font-family: $regular_font_family;
font-size: 10pt;
font-style: italic;
color: darken($color, 15%);
text-align: justify;
margin-top: 2px;
margin-bottom: 4px;
padding-left: 18px;
margin: 4px 0 10px 18px;
}
.segment_description_general {
padding-left: 0;
margin-top: 8px;
font-size: 10.5pt;
clear: none;
float: none;
width: auto;
overflow: visible;
margin: 8px 0 0 0;
padding: 0;
font-size: 9.5pt;
text-align: justify;
}