From 53492a17cbc3bd637f3453c535db0f47d2e72149 Mon Sep 17 00:00:00 2001 From: sii42400 Date: Thu, 16 Apr 2026 14:49:22 +0200 Subject: [PATCH] feat(cv): parameterize border sizes and add missing branchBorderColors Extract borderSize and borderRadius into variables passed to branch/merge components for consistent, easily adjustable styling. Add branchBorderColor to segments that were missing it (Sii, Sembot, UR, ZSE, Skills DevOps, Skills Databases). Color segment titles to match their branch color. Made-with: Cursor --- src/content/kamil.js | 17 +++++++++----- src/pages/index.js | 54 +++++++++++++++++++++++++++----------------- 2 files changed, 44 insertions(+), 27 deletions(-) diff --git a/src/content/kamil.js b/src/content/kamil.js index 8dcc12c..6e14d6b 100644 --- a/src/content/kamil.js +++ b/src/content/kamil.js @@ -50,6 +50,7 @@ export const content_pl = [ title: "Sii Sp. z o. o. - od 10.11.2022", firstElement: true, image: WorkSiiLogo, + branchBorderColor: "#0464a8", content: [] }, { @@ -224,6 +225,7 @@ export const content_pl = [ tabs: 0, title: "Sembot Sp. z o. o. - od 01.11.2020 do 30.10.2022", image: WorkSembotLogo, + branchBorderColor: "#f5c314", content: [] }, { @@ -261,6 +263,7 @@ export const content_pl = [ tabs: 0, title: "Uniwersytet Rzeszowski - Studia inżynierskie - Informatyka - od 2017 do 2021", image: WorkURLogo, + branchBorderColor: "#015198", content: [] }, { @@ -300,7 +303,7 @@ 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, + branchBorderColor: "#2e8cb1", firstElement: true, noElements: true, content: [], @@ -315,7 +318,6 @@ export const content_pl = [ title: "DevOps", image: "", branchBorderColor: "#04009b", - mainBorderColor: null, firstElement: true, content: [], }, @@ -544,7 +546,7 @@ export const content_pl = [ tabs: 0, title: "DevOps", image: "", //SkillsDevOpsLogo, - mainBorderColor: null, + branchBorderColor: "#2e8cb1", content: [], }, { @@ -752,6 +754,7 @@ export const content_en = [ title: "Sii Sp. z o. o. - from 10.11.2022", firstElement: true, image: WorkSiiLogo, + branchBorderColor: "#0464a8", content: [] }, // { @@ -933,6 +936,7 @@ export const content_en = [ tabs: 0, title: "Sembot Sp. z o. o. - from 01.11.2020 to 30.10.2022", image: WorkSembotLogo, + branchBorderColor: "#f5c314", content: [] }, { @@ -971,6 +975,7 @@ export const content_en = [ tabs: 0, title: "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021", image: WorkURLogo, + branchBorderColor: "#015198", content: [] }, { @@ -1011,6 +1016,7 @@ export const content_en = [ tabs: 0, title: "ZSE in Rzeszów / Technical School - Information Technology - from 2013 to 2017", image: WorkZSELogo, + branchBorderColor: "#2e8cb1", noElements: true, content: [], }, @@ -1156,7 +1162,6 @@ export const content_en = [ title: "DevOps", image: "", branchBorderColor: "#04009b", - mainBorderColor: null, firstElement: true, content: [], }, @@ -1252,7 +1257,7 @@ export const content_en = [ tabs: 0, title: "DevOps", image: "", //SkillsDevOpsLogo, - mainBorderColor: null, + branchBorderColor: "#2e8cb1", content: [], }, { @@ -1345,7 +1350,7 @@ export const content_en = [ tabs: 0, title: "Databases Configuration & Administration", image: "", //SkillsDatabasesLogo, - mainBorderColor: null, + branchBorderColor: "#1038a7", content: [], }, { diff --git a/src/pages/index.js b/src/pages/index.js index b87af0b..83d7c06 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -169,7 +169,7 @@ const SegmentListNormal = ({ segment, tabs }) => { ) } -const SegmentListWork = ({ segment, tabs }) => { +const SegmentListWork = ({ segment, tabs, borderSize }) => { return (
{ >
{ }
{ segment.content.length > 0 ? @@ -219,7 +222,7 @@ const SegmentListWork = ({ segment, tabs }) => { segment.content.length > 0 ?
    { } -const SegmentCreateBranch = ({ segment, tabs }) => { +const SegmentCreateBranch = ({ segment, tabs, borderSize, borderRadius }) => { return (
    {
    { 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, + marginLeft: "-" + borderSize, + marginBottom: "-" + borderSize, + borderRadius: "0 0 0 " + borderRadius, + borderBottom: borderSize + " dotted " + segment.branchBorderColor, + borderLeft: borderSize + " dotted " + segment.branchBorderColor, }} >
    @@ -286,9 +290,9 @@ const SegmentCreateBranch = ({ segment, tabs }) => { 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, + borderRadius: "0 " + borderRadius + " 0 0", + borderTop: borderSize + " dotted " + segment.branchBorderColor, + borderRight: borderSize + " dotted " + segment.branchBorderColor, }} >
@@ -298,7 +302,7 @@ const SegmentCreateBranch = ({ segment, tabs }) => { } -const SegmentMergeBranch = ({ segment, tabs }) => { +const SegmentMergeBranch = ({ segment, tabs, borderSize, borderRadius }) => { return (
{ >
{ width: "18px", height: "20px", marginLeft: tabs * 2.5 + "%", - borderRadius: "0 0 100% 0", - borderBottom: "3.5px dotted " + segment.branchBorderColor, - borderRight: "3.5px dotted " + segment.branchBorderColor, + marginBottom: "-" + borderSize, + borderRadius: "0 0 " + borderRadius + " 0", + borderBottom: borderSize + " dotted " + segment.branchBorderColor, + borderRight: borderSize + " dotted " + segment.branchBorderColor, }} >
@@ -327,10 +332,10 @@ const SegmentMergeBranch = ({ segment, tabs }) => { 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, + marginLeft: "-" + borderSize, + borderRadius: borderRadius + " 0 0 0", + borderTop: borderSize + " dotted " + segment.branchBorderColor, + borderLeft: borderSize + " dotted " + segment.branchBorderColor, }} >
@@ -420,6 +425,8 @@ const SegmentRODO = ({ segment }) => { const Segment = ({ index, segment }) => { const segment_index = "segment_" + index; + let borderSize = "2px"; + let borderRadius = "75%"; return (
{ key={`work_${index}`} segment={segment} tabs={segment.tabs} + borderSize={borderSize} /> : segment.type === "createBranchSegment" ? @@ -458,6 +466,8 @@ const Segment = ({ index, segment }) => { key={`create_${index}`} segment={segment} tabs={segment.tabs} + borderSize={borderSize} + borderRadius={borderRadius} /> : segment.type === "mergeBranchSegment" ? @@ -465,6 +475,8 @@ const Segment = ({ index, segment }) => { key={`merge_${index}`} segment={segment} tabs={segment.tabs} + borderSize={borderSize} + borderRadius={borderRadius} /> : segment.type === "RODOSegment" ?