feat(cv): auto-linkify URLs in work segment titles, descriptions and content

Add Linkify component that detects https:// URLs in text and renders
them as clickable links colored with the segment's branchBorderColor.

Made-with: Cursor

src/content/kamil.js

@@ -28,6 +28,8 @@ 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",
       content: {
@@ -48,20 +50,24 @@ export const content_pl = [
       title: "Sii Sp. z o. o. - od 10.11.2022",
       firstElement: true,
       image: WorkSiiLogo,
+      branchBorderColor: "#0464a8",
       content: []
     },
     {
       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, 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",
       content: [
-        "Konserwacja & Ulepszanie pipeline'ów & job'ów (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Konserwacja & Ulepszanie pipeline'ów & job'ów CI/CD (Jenkins / Wind River Studio / Github Actions / Python / Bash / GitGerrit / Github)",
-        "Automtizacja ręcznych zadań (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Automatyzacja ręcznych zadań (Jenkins / Wind River Studio / Github Actions / Python / Bash)",
-        "Praca z Artifactory & Registry (JFrog)",
+        "Praca z Artifactory & Registry - konserwacja Artifactory + synchronizacja plików (pakiety, SDK i inne) z CI/CD (JFrog)",
-        "Praca z Mikroserwisami (Docker / Kubernetes)",
+        "Praca z Mikroserwisami - dostosowywanie środowisk konteneryzacyjnych do CI/CD (Docker / Kubernetes)",
+        "Migracja repozytoriów Git (GitGerrit -> Github)",
+        "Migracja procesów CI/CD do środowiska Enterprise (Wind River Studio -> Github Actions)"
       ],
     },
     {
@@ -80,6 +86,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Projekty Wewnętrzne - DevOps Engineer & Python Developer - od 01.11.2024 do 11.02.2025",
+      description: "Utrzymywałem i automatyzowałem infrastrukturę chmurową opartą o Terraform i Azure oraz środowisko mikroserwisowe Kubernetes. Wdrażałem zarządzanie konfiguracją z użyciem Ansible i Kubespray, dzięki czemu środowiska były powtarzalne i łatwiejsze do odtworzenia. Usprawniałem procesy CI/CD w Jenkinsie, zmniejszając liczbę działań ręcznych i zwiększając spójność wdrożeń.",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
@@ -107,6 +114,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Adobe Inc - DevOps Engineer & Site Reliability Engineer - od 01.12.2023 do 01.11.2024",
+      description: "Prowadziłem analizę przyczyn źródłowych awarii w środowiskach Adobe Experience Manager, identyfikując wąskie gardła wydajnościowe i przyczyny problemów usług. Analizowałem heap dumpy i thread dumpy Javy w celu wykrywania wycieków pamięci oraz problemów współbieżności. Tworzyłem i interpretowałem dashboardy obserwowalności w Splunk, New Relic i Grafanie, wspierając niezawodność systemów. Automatyzowałem analizę incydentów i zadania operacyjne przy użyciu Pythona i Basha, skracając czas reakcji na problemy.",
       image: WorkAdobeLogo,
       branchBorderColor: "#fa0c00",
       mainBorderColor: "#0464a8",
@@ -135,6 +143,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Techem GmbH - DevOps Engineer - od 30.05.2023 do 30.11.2023",
+      description: "Projektowałem i automatyzowałem workflow CI/CD dla testów powiązanych ze sprzętem, w tym procesy regresji i walidacji urządzeń IrDA. Budowałem pipeline'y do dostarczania reużywalnych pakietów Pythona wraz z prywatną dystrybucją paczek. Automatyzowałem raportowanie testów i walidację jakości kodu, zwiększając spójność wydań i ograniczając problemy integracyjne w procesie developmentu.",
       image: WorkTechemLogo,
       branchBorderColor: "#f87479",
       mainBorderColor: "#0464a8",
@@ -164,6 +173,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Projekty Wewnętrzne - DevOps Engineer - od 25.02.2023 do 27.05.2023",
+      description: "Utrzymywałem środowisko mikroserwisowe oparte na Kubernetes oraz serwery Linux w wewnętrznych projektach dostarczających oprogramowanie. Automatyzowałem provisioning i konfigurację serwerów przy użyciu Ansible i Kubespray. Usprawniałem procesy GitLab CI oraz raportowanie wdrożeń, zwiększając powtarzalność i przejrzystość workflow release'owego.",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
@@ -191,6 +201,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Infinidat Inc - Integration Developer - od 10.11.2022 do 24.02.2023",
+      description: "Budowałem i utrzymywałem środowiska integracyjne CI/CD w oparciu o Linux, Windows oraz infrastrukturę VMware. Wdrażałem węzły Jenkins i hosty zwirtualizowane wspierające procesy budowania oraz integracji aplikacji. Automatyzowałem zadania rutynowe i workflow troubleshootingowy przy użyciu Pythona, Basha, Ansible i Jenkinsa, poprawiając stabilność buildów i ograniczając ręczne debugowanie.",
       image: WorkInfinidatLogo,
       branchBorderColor: "#8fc5c6",
       mainBorderColor: "#0464a8",
@@ -214,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: []
     },
     {
@@ -226,6 +238,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Inżynier DevOps & Programista Python",
+      description: "Projektowałem i wdrażałem środowiska produkcyjne dla narzędzi MerchTech opartych o Python, Django i Django REST Framework. Zarządzałem infrastrukturą chmurową w AWS, OVH i DigitalOcean, w tym wdrożeniami kontenerowymi z użyciem Dockera i Docker Compose. Budowałem i utrzymywałem warstwę bazodanową oraz kolejkową dla narzędzi wewnętrznych, a także automatyzowałem infrastrukturę i wdrożenia przy użyciu Ansible i Jenkins.",
       image: "",
       branchBorderColor: "#f5c314",
       mainBorderColor: "#f5c314",
@@ -250,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: []
     },
     {
@@ -262,6 +276,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Praca Inżynierska - Graficzna baza układów dłoni na potrzeby systemu rozpoznawania Polskiego Języka Migowego (PJM)",
+      description: "Zaprojektowałem i zaimplementowałem rozproszoną aplikację do generowania i zarządzania realistycznym zbiorem danych układów dłoni na potrzeby rozpoznawania PJM. Zintegrowałem Django i Django REST Framework z Blenderem oraz MongoDB, w tym z magazynowaniem shardowanym. Zbudowałem synchroniczne i asynchroniczne API z użyciem Django Channels i Redis do nadzorowania renderingu w czasie rzeczywistym. Przygotowałem frontend w React oraz zautomatyzowałem wdrożenie przy użyciu Docker i Docker Compose.",
       image: "",
       branchBorderColor: "#015198",
       mainBorderColor: "#015198",
@@ -288,14 +303,14 @@ 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: [],
     },
     {
       type: "titleSegment",
-      title: "Inne Projekty",
+      title: "Projekty",
     },
     {
       type: "workSubSegment",
@@ -303,7 +318,6 @@ export const content_pl = [
       title: "DevOps",
       image: "",
       branchBorderColor: "#04009b",
-      mainBorderColor: null,
       firstElement: true,
       content: [],
     },
@@ -311,6 +325,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Klaster K8S na Serwerach Bare Metal (Hetzner / Terraform / Kubespray)",
+      description: "Zbudowałem i utrzymywałem produkcyjny klaster Kubernetes na serwerach bare metal z użyciem Terraform, Ansible i Kubespray. Zarządzałem pełnym stosem infrastruktury, obejmującym usługi wewnętrzne i publiczne, bazy danych, cache, storage, ingress, TLS oraz load balancing. Automatyzowałem codzienną administrację klastra przy pomocy Jenkins, Groovy, Bash, Python i Ansible.",
       image: "",
       branchBorderColor: "#8b0000",
       mainBorderColor: "#04009b",
@@ -334,6 +349,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Inne",
+      description: "Tworzyłem i utrzymywałem projekty poboczne rozwijające produktywność, automatyzację oraz własne narzędzia, w tym generator CV i system autokonfiguracji Linuxa. Projekty te wykorzystywałem do rozwijania umiejętności frontendowych, DevOpsowych i szeroko rozumianego developer experience w praktycznych zastosowaniach.",
       image: "",
       branchBorderColor: "#008b78",
       mainBorderColor: "#04009b",
@@ -358,10 +374,42 @@ export const content_pl = [
       firstElement: true,
       content: [],
     },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "00x097 Trade - Platforma analizy technicznej krypto & stock market z detekcją wzorców harmonicznych",
+      description: "Zaprojektowałem i zbudowałem pełnostackową platformę do analizy kryptowalut z naciskiem na automatyczną detekcję wzorców harmonicznych i wskaźniki techniczne. Backend oparty na FastAPI z asynchronicznym PostgreSQL (asyncpg), kolejką zadań Celery (RabbitMQ + Redis) oraz integracjami z API Binance, MEXC i Yahoo Finance. Frontend dostarcza interaktywny interfejs wykresów TradingView z poziomami Fibonacciego, wskaźnikami RSI, MACD, OBV oraz panelem wizualizacji wzorców harmonicznych. Wdrożony na Kubernetes (bare metal) z automatycznymi pipeline'ami synchronizacji i analizy. Aplikacja jest dostępna pod adresem: https://00x097.com",
+      image: "",
+      branchBorderColor: "rgb(153, 69, 255)",
+      mainBorderColor: "#ffd748",
+      content: [
+        "Backend oparty na FastAPI (Python) z REST API — kontrolery domenowe dla użytkowników, aktywów, giełd, analizy technicznej, systemu synchronizacji i zadań cron",
+        "Asynchroniczna warstwa bazodanowa PostgreSQL (asyncpg) z pulą połączeń i automatycznym zarządzaniem schematem",
+        "Kolejka zadań Celery z brokerem RabbitMQ i backendem wyników Redis do asynchronicznych workflow synchronizacji i analizy",
+        "Integracje z giełdami kryptowalut (Binance, MEXC, KuCoin) oraz giełdami akcji (Yahoo Finance) do synchronizacji danych klines/OHLCV",
+        "Automatyczna detekcja wzorców harmonicznych (pyharmonics) z poziomami zniesienia/rozszerzenia Fibonacciego, strefami PRZ/TP/SL",
+        "Obliczanie wskaźników technicznych — RSI, MACD, OBV (po stronie klienta i serwera)",
+        "Integracja z API OpenAI do analizy rynkowej wspomaganej AI oraz powiadomienia przez bota Telegram",
+        "Agregacja wiadomości z serwisów CoinDesk, CryptoPanic i GNews",
+        "Frontend oparty na React 18 z Redux Toolkit — interaktywne wykresy TradingView Lightweight Charts (świecowe, wolumen, wskaźniki)",
+        "Panel wizualizacji wzorców harmonicznych z opisami, scoringiem konfluencji i nakładką poziomów Fibonacciego",
+        "Kontroler cron oparty na APScheduler do okresowej synchronizacji danych i zbiorczej analizy technicznej aktywów",
+        "Object storage (MinIO) do przechowywania zrzutów wykresów i artefaktów analiz",
+        "Konteneryzacja oparta na manifestach K8S (serwery Bare Metal - Hetzner) (Ingress / Deployments / PV & PVC / ConfigMaps / Secrets)",
+        "Praca z narzędziami AI Agents (Cursor AI / Claude)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "rgb(153, 69, 255)",
+      mainBorderColor: "#ffd748",
+    },
     {
       type: "workSubSegment",
       tabs: 1,
       title: "XGPU - Aplikacja do udostępniania rozproszonych zasobów GPU do planowania i wykonywania zadań szkolenia AI i renderowania 3D",
+      description: "Zaprojektowałem i zbudowałem rozproszoną platformę GPU do zadań treningu AI i renderowania 3D. Stworzyłem backend w FastAPI z REST API i WebSocket API do planowania, wykonywania i monitorowania zadań w czasie rzeczywistym. Opracowałem logikę workerów dla treningu PyTorch DDP oraz renderingu w Blenderze. Przygotowałem system do skalowalnych wdrożeń z użyciem Docker i Kubernetes na infrastrukturze bare metal, wspieranych przez CI/CD oraz mieszane przechowywanie danych w SQL i NoSQL.",
       image: "",
       branchBorderColor: "#005707",
       mainBorderColor: "#ffd748",
@@ -375,7 +423,7 @@ export const content_pl = [
         "Frontend oparty na ReactJS i frameworku Gatsby",
         "Konteneryzacja oparta na manifestach Docker (lokalnie)",
         "Konteneryzacja oparta na manifestach K8S (serwery Bare Metal - Hetzner) (Ingress / Cert-Manager / Deployments / PV & PVC / etc.)",
-        "Praca z narzędziami AI Agents (Cursor AI / Copilot)",
+        "Praca z narzędziami AI Agents (Cursor AI / Claude)",
       ],
     },
     {
@@ -388,13 +436,13 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Przygotowanie AI Agents",
+      description: "Tworzyłem praktyczne agenty AI do podsumowywania wideo, generowania treści blogowych oraz automatycznej interpretacji sygnałów rynkowych. Zintegrowałem API modeli językowych z botami Telegram oraz zewnętrznymi usługami, takimi jak dostawcy transkryptów i API giełd krypto. Skupiałem się na workflow automatyzacyjnych, które łączą modele językowe z realnymi danymi operacyjnymi i kanałami dostarczania.",
       image: "",
       branchBorderColor: "#005fc5",
       mainBorderColor: "#ffd748",
       content: [
         "AI Agent do podsumowania wideo na podstawie wygenerowanego transkryptu z podanego URL (Telegram / API youtube-transcript.io / Python / API OpenAI)",
         "AI Agent do generowania treści bloga na podstawie planu dostarczonego w prompcie (Wordpress / Telegram / Python / API OpenAI)",
-        "AI Agent do interpretacji sygnałów rynku krypto i giełdy oraz automatycznego handlu (Telegram / Python / API OpenAI / API Mexc / API Kucoin / API Binance)",
       ],
     },
     {
@@ -407,6 +455,7 @@ export const content_pl = [
       type: "workSubSegment",
       tabs: 1,
       title: "Inne",
+      description: "Tworzyłem i utrzymywałem projekty poboczne rozwijające produktywność, automatyzację oraz własne narzędzia, w tym generator CV i system autokonfiguracji Linuxa. Projekty te wykorzystywałem do rozwijania umiejętności frontendowych, DevOpsowych i szeroko rozumianego developer experience w praktycznych zastosowaniach.",
       image: "",
       branchBorderColor: "#008b78",
       mainBorderColor: "#ffd748",
@@ -527,7 +576,7 @@ export const content_pl = [
       tabs: 0,
       title: "DevOps",
       image: "", //SkillsDevOpsLogo,
-      mainBorderColor: null,
+      branchBorderColor: "#2e8cb1",
       content: [],
     },
     {
@@ -713,6 +762,8 @@ 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",
       content: {
@@ -733,6 +784,7 @@ export const content_en = [
       title: "Sii Sp. z o. o. - from 10.11.2022",
       firstElement: true,
       image: WorkSiiLogo,
+      branchBorderColor: "#0464a8",
       content: []
     },
 //    {
@@ -745,14 +797,17 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Aptiv PLC - DevOps Engineer - from 11.02.2025",
+      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)",
+        "Pipelines & Jobs maintenance & improvements (Jenkins / Wind River Studio / Github Actions / Python / Bash / GitGerrit / Github)",
-        "Automtization of manual tasks (Jenkins / Wind River Studio / Python / Bash / GitGerrit)",
+        "Automation of manual tasks (Jenkins / Wind River Studio / Github Actions / Python / Bash)",
-        "Work with Artifactory & Registry (JFrog)",
+        "Work with Artifactory & Registry - Artifactory maintenance + files synchronization (packages, SDKs, etc.) with CI/CD (JFrog)",
-        "Work with Microservices (Docker / Kubernetes)",
+        "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)"
       ],
     },
     {
@@ -771,6 +826,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Inside Projects - DevOps Engineer & Python Developer - from 01.11.2024 to 11.02.2025",
+      description: "Maintained and automated cloud-based infrastructure (Terraform, Azure) and Kubernetes microservices environment. Implemented configuration management using Ansible and Kubespray, enabling reproducible environments. Improved CI/CD processes (Jenkins), reducing manual intervention and increasing deployment consistency.",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
@@ -798,6 +854,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Adobe Inc - DevOps Engineer & Site Reliability Engineer - from 01.12.2023 to 01.11.2024",
+      description: "Performed root cause analysis for production incidents in Adobe Experience Manager environments, identifying performance bottlenecks and service failures. Analyzed Java heap dumps and thread dumps to diagnose memory leaks and concurrency issues. Built and interpreted observability dashboards in Splunk, New Relic, and Grafana to improve reliability and troubleshooting. Automated investigation and routine operational tasks using Python and Bash, helping reduce incident response time.",
       image: WorkAdobeLogo,
       branchBorderColor: "#fa0c00",
       mainBorderColor: "#0464a8",
@@ -826,6 +883,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Techem GmbH - DevOps Engineer - from 30.05.2023 to 30.11.2023",
+      description: "Designed and automated CI/CD workflows for hardware-related testing, including regression and validation processes for IrDA devices. Built reusable Python package delivery pipelines with private package distribution. Automated test reporting and code quality validation, improving consistency of releases and reducing integration problems across the development workflow.",
       image: WorkTechemLogo,
       branchBorderColor: "#f87479",
       mainBorderColor: "#0464a8",
@@ -855,6 +913,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Inside Projects - DevOps Engineer - from 25.02.2023 to 27.05.2023",
+      description: "Maintained Kubernetes-based microservices infrastructure and Linux servers in internal delivery environments. Automated server provisioning and configuration using Ansible and Kubespray. Improved GitLab CI processes and deployment reporting, increasing repeatability and visibility of release workflows.",
       image: WorkSiiLogo,
       branchBorderColor: "#0464a8",
       mainBorderColor: "#0464a8",
@@ -882,6 +941,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Infinidat Inc - Integration Developer - from 10.11.2022 to 24.02.2023",
+      description: "Built and maintained CI/CD integration environments across Linux, Windows, and VMware-based infrastructure. Deployed Jenkins nodes and virtualized hosts to support build and integration processes. Automated routine operations and troubleshooting workflows using Python, Bash, Ansible, and Jenkins, improving build stability and reducing manual debugging effort.",
       image: WorkInfinidatLogo,
       //lastSubElement: true,
       branchBorderColor: "#8fc5c6",
@@ -906,6 +966,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: []
     },
     {
@@ -918,6 +979,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "DevOps Engineer & Python Developer",
+      description: "Designed and deployed production systems for data-heavy MerchTech applications using Python, Django, and Django REST Framework. Managed cloud infrastructure across AWS, OVH, and DigitalOcean, including containerized deployments with Docker and Docker Compose. Built and maintained database and queueing layers for internal tools, and automated infrastructure and deployment workflows using Ansible and Jenkins.",
       image: "",
       //lastSubElement: true,
       branchBorderColor: "#f5c314",
@@ -943,6 +1005,7 @@ export const content_en = [
       tabs: 0,
       title: "University of Rzeszów - Engineer Studying - IT - from 2017 to 2021",
       image: WorkURLogo,
+      branchBorderColor: "#015198",
       content: []
     },
     {
@@ -955,6 +1018,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Thesis - Graphical database of handshapes for the Polish Sign Language (PSL) gesture recognition system",
+      description: "Designed and implemented a distributed application for generating and managing realistic handshape datasets for Polish Sign Language recognition. Integrated Django and Django REST Framework with Blender and MongoDB, including sharded storage. Built synchronous and asynchronous APIs with Django Channels and Redis for real-time rendering supervision. Developed a React-based frontend and automated deployment with Docker and Docker Compose.",
       image: "",
       //lastSubElement: true,
       branchBorderColor: "#015198",
@@ -982,12 +1046,13 @@ 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: [],
     },
     {
       type: "titleSegment",
-      title: "Other Projects",
+      title: "Projects",
     },
     {
       type: "workSubSegment",
@@ -1003,6 +1068,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "K8S Cluster on Bare Metal Servers (Hetzner / Terraform / Kubespray)",
+      description: "Built and maintained a production-ready Kubernetes cluster on bare metal servers using Terraform, Ansible, and Kubespray. Managed the full infrastructure stack including internal and public services, databases, caching, storage, ingress, TLS, and load balancing. Automated day-to-day cluster operations with Jenkins, Groovy, Bash, Python, and Ansible.",
       image: "",
       branchBorderColor: "#8b0000",
       mainBorderColor: "#04009b",
@@ -1026,6 +1092,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Others",
+      description: "Built and maintained side projects focused on developer productivity, automation, and personal tooling, including a custom CV generator and Linux auto-configuration setup. Used these projects to improve frontend, DevOps, and developer-experience skills in real-world scenarios.",
       image: "",
       branchBorderColor: "#008b78",
       mainBorderColor: "#04009b",
@@ -1050,10 +1117,42 @@ export const content_en = [
       firstElement: true,
       content: [],
     },
+    {
+      type: "workSubSegment",
+      tabs: 1,
+      title: "00x097 Trade - Stock & Crypto Technical Analysis Platform with Harmonic Pattern Detection",
+      description: "Designed and built a full-stack cryptocurrency analysis platform focused on automated harmonic pattern detection and technical indicators. Backend built on FastAPI with async PostgreSQL (asyncpg), Celery task queue (RabbitMQ + Redis), and integrations with Binance, MEXC, and Yahoo Finance APIs. Frontend delivers an interactive TradingView-based charting interface with Fibonacci levels, RSI, MACD, OBV indicators, and a harmonic pattern visualization panel. Deployed on Kubernetes (bare metal) with automated sync and analysis pipelines. Application is available at: https://00x097.com",
+      image: "",
+      branchBorderColor: "rgb(153, 69, 255)",
+      mainBorderColor: "#ffd748",
+      content: [
+        "Backend based on FastAPI (Python) with REST API — domain controllers for users, assets, exchanges, technical analysis, sync system and cron jobs",
+        "Async PostgreSQL database layer (asyncpg) with connection pooling and automatic schema management",
+        "Celery task queue with RabbitMQ broker and Redis result backend for asynchronous sync and analysis workflows",
+        "Cryptocurrency exchange integrations (Binance, MEXC, KuCoin) or stock market exchanges (Yahoo Finance) for klines/OHLCV data synchronization",
+        "Automated harmonic pattern detection (pyharmonics) with Fibonacci retracement/extension levels, PRZ/TP/SL zones",
+        "Technical indicators computation — RSI, MACD, OBV (client-side and server-side)",
+        "OpenAI API integration for AI-powered market analysis and Telegram bot notifications",
+        "News aggregation from CoinDesk, CryptoPanic and GNews services",
+        "Frontend based on React 18 with Redux Toolkit — interactive TradingView Lightweight Charts (candlestick, volume, indicators)",
+        "Harmonic patterns visualization panel with pattern descriptions, confluence scoring and Fibonacci overlay rendering",
+        "APScheduler-based cron controller for periodic data synchronization and bulk technical analysis across assets",
+        "Object storage (MinIO) for chart snapshots and analysis artifacts",
+        "Containerisation based on K8S (Bare Metal Servers - Hetzner) Manifests (Ingress / Deployments / PV & PVC / ConfigMaps / Secrets)",
+        "Working with AI Agents Tools (Cursor AI / Claude)",
+      ],
+    },
+    {
+      type: "mergeBranchSegment",
+      tabs: 1,
+      branchBorderColor: "rgb(153, 69, 255)",
+      mainBorderColor: "#ffd748",
+    },
     {
       type: "workSubSegment",
       tabs: 1,
       title: "XGPU - Application for Sharing Distributed GPU Resources for Scheduling & Executing AI Training & 3D Rendering Tasks",
+      description: "Designed and built a distributed GPU computing platform for AI training and 3D rendering workloads. Implemented a FastAPI backend with REST and WebSocket APIs for real-time task scheduling, execution, and monitoring. Developed distributed worker logic for PyTorch DDP training and Blender rendering. Prepared the system for scalable deployment with Docker and Kubernetes on bare metal infrastructure, supported by CI/CD pipelines and mixed SQL/NoSQL data storage.",
       image: "",
       branchBorderColor: "#005707",
       mainBorderColor: "#ffd748",
@@ -1080,13 +1179,13 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "AI Agents Preparation",
+      description: "Developed practical AI agents for video summarization, blog content generation, and automated interpretation of market signals. Integrated LLM APIs with Telegram bots and external services such as transcript providers and crypto exchange APIs. Focused on automation workflows that combine language models with real operational data and delivery channels.",
       image: "",
       branchBorderColor: "#005fc5",
       mainBorderColor: "#ffd748",
       content: [
         "AI Agent for video summarization based on generated transcript via provided URL (Telegram / youtube-transcript.io API / Python / OpenAI API)",
         "AI Agent for generate blog content based on provided plan in prompt (Wordpress / Telegram / Python / OpenAI API)",
-        "AI Agent for crypto & stock market signals interpretation & auto trading (Telegram / Python / OpenAI API / Mexc API / Kucoin API / Binance API)",
       ],
     },
     {
@@ -1099,6 +1198,7 @@ export const content_en = [
       type: "workSubSegment",
       tabs: 1,
       title: "Others",
+      description: "Built and maintained side projects focused on developer productivity, automation, and personal tooling, including a custom CV generator and Linux auto-configuration setup. Used these projects to improve frontend, DevOps, and developer-experience skills in real-world scenarios.",
       image: "",
       branchBorderColor: "#008b78",
       mainBorderColor: "#ffd748",
@@ -1122,7 +1222,6 @@ export const content_en = [
       title: "DevOps",
       image: "",
       branchBorderColor: "#04009b",
-      mainBorderColor: null,
       firstElement: true,
       content: [],
     },
@@ -1218,7 +1317,7 @@ export const content_en = [
       tabs: 0,
       title: "DevOps",
       image: "", //SkillsDevOpsLogo,
-      mainBorderColor: null,
+      branchBorderColor: "#2e8cb1",
       content: [],
     },
     {
@@ -1311,7 +1410,7 @@ export const content_en = [
       tabs: 0,
       title: "Databases Configuration & Administration",
       image: "", //SkillsDatabasesLogo,
-      mainBorderColor: null,
+      branchBorderColor: "#1038a7",
       content: [],
     },
     {

src/pages/index.js

@@ -4,6 +4,20 @@ import { content_pl } from "../content/kamil"
 import { content_en } from "../content/kamil"
 import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
 
+const Linkify = ({ text, color }) => {
+  const urlRegex = /(https?:\/\/[^\s,)]+)/g;
+  const parts = text.split(urlRegex);
+  return parts.map((part, i) =>
+    urlRegex.test(part) ? (
+      <a key={i} href={part} target="_blank" rel="noopener noreferrer" style={{ color: color || "inherit" }}>
+        {part}
+      </a>
+    ) : (
+      part
+    )
+  );
+};
+
 const SimpleCaptchaWrapper = ({ onVerified, language }) => {
   const [error, setError] = React.useState(null);
 
@@ -169,7 +183,7 @@ const SegmentListNormal = ({ segment, tabs }) => {
   )
 }
 
-const SegmentListWork = ({ segment, tabs }) => {
+const SegmentListWork = ({ segment, tabs, borderSize }) => {
  return (
    <div
      style={{
@@ -178,7 +192,7 @@ const SegmentListWork = ({ segment, tabs }) => {
    >
      <div
        style={{
-           borderLeft: segment.mainBorderColor === null ? "" : "3.5px dotted " + segment.mainBorderColor,
+           borderLeft: segment.mainBorderColor === null ? "" : borderSize + " dotted " + segment.mainBorderColor,
            paddingLeft: tabs * 2.5 + "%",
            marginLeft: tabs * 2.5 + "%",
            marginTop: segment.firstElement === true ? "15px" : "",
@@ -196,25 +210,33 @@ const SegmentListWork = ({ segment, tabs }) => {
        }
        <div
          className="segment_content_title"
+         style={{
+          color: segment.branchBorderColor === undefined ? segment.mainBorderColor : segment.branchBorderColor,
+         }}
        >
          {
            segment.content.length > 0 ?
-             segment.title + ":"
+             <><Linkify text={segment.title} color={segment.branchBorderColor} />:</>
            :
              segment.lastElement === true ?
-                 segment.title + "."
+                 <><Linkify text={segment.title} color={segment.branchBorderColor} />.</>
              :
                segment.noElements === true ?
-                 segment.title + ","
+                 <><Linkify text={segment.title} color={segment.branchBorderColor} />,</>
                :
-                 segment.title + ":"
+                 <><Linkify text={segment.title} color={segment.branchBorderColor} />:</>
          }
        </div>
+         {segment.description && (
+           <div className="segment_description">
+             <Linkify text={segment.description} color={segment.branchBorderColor} />
+           </div>
+         )}
          {
            segment.content.length > 0 ?
              <ul
                  style={{
-                    borderLeft: segment.branchBorderColor === null ? "" : "3.5px dotted " + segment.branchBorderColor,
+                    borderLeft: segment.branchBorderColor === null ? "" : borderSize + " dotted " + segment.branchBorderColor,
                     marginBottom: segment.lastSubElement === true ? "30px" : "",
                     paddingBottom: segment.haveOneElement === true ? "30px" : "",
                  }}
@@ -223,8 +245,8 @@ const SegmentListWork = ({ segment, tabs }) => {
                segment.content.map(
                  (item, index) => {
                    return (
-                     <li key={ index }>
+                     <li key={ index } style={{ color: segment.branchBorderColor || "inherit" }}>
-                       { item + "," }
+                       <span style={{ color: "#a6a6a6" }}><Linkify text={item} color={segment.branchBorderColor} />,</span>
                      </li>
                    )
                  }
@@ -240,7 +262,7 @@ const SegmentListWork = ({ segment, tabs }) => {
 }
 
 
-const SegmentCreateBranch = ({ segment, tabs }) => {
+const SegmentCreateBranch = ({ segment, tabs, borderSize, borderRadius }) => {
   return (
     <div
       style={{
@@ -260,7 +282,7 @@ const SegmentCreateBranch = ({ segment, tabs }) => {
       </div>
       <div
         style={{
-           borderLeft: "3.5px dotted " + segment.mainBorderColor,
+           borderLeft: borderSize + " dotted " + segment.mainBorderColor,
            marginLeft: tabs * 2.5 + "%",
         }}
         className="segment_content_work"
@@ -269,10 +291,11 @@ const SegmentCreateBranch = ({ segment, tabs }) => {
           style={{
             width: tabs * 2.5 + "%",
             height: "20px",
-            marginLeft: "-3.5px",
+            marginLeft: "-" + borderSize,
-            borderRadius: "0 0 0 100%",
+            marginBottom: "-" + borderSize,
-            borderBottom: "3.5px dotted " + segment.branchBorderColor,
+            borderRadius: "0 0 0 " + borderRadius,
-            borderLeft: "3.5px dotted " + segment.branchBorderColor,
+            borderBottom: borderSize + " dotted " + segment.branchBorderColor,
+            borderLeft: borderSize + " dotted " + segment.branchBorderColor,
           }}
         >
         </div>
@@ -281,9 +304,9 @@ const SegmentCreateBranch = ({ segment, tabs }) => {
             width: "18px",
             height: "20px",
             marginLeft: tabs * 2.5 + "%",
-            borderRadius: "0 100% 0 0",
+            borderRadius: "0 " + borderRadius + " 0 0",
-            borderTop: "3.5px dotted " + segment.branchBorderColor,
+            borderTop: borderSize + " dotted " + segment.branchBorderColor,
-            borderRight: "3.5px dotted " + segment.branchBorderColor,
+            borderRight: borderSize + " dotted " + segment.branchBorderColor,
           }}
         >
         </div>
@@ -293,7 +316,7 @@ const SegmentCreateBranch = ({ segment, tabs }) => {
 }
 
 
-const SegmentMergeBranch = ({ segment, tabs }) => {
+const SegmentMergeBranch = ({ segment, tabs, borderSize, borderRadius }) => {
   return (
     <div
       style={{
@@ -302,7 +325,7 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
     >
       <div
         style={{
-           borderLeft: "3.5px dotted " + segment.mainBorderColor,
+           borderLeft: borderSize + " dotted " + segment.mainBorderColor,
            marginLeft: tabs * 2.5 + "%",
         }}
         className="segment_content_work"
@@ -312,9 +335,10 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
             width: "18px",
             height: "20px",
             marginLeft: tabs * 2.5 + "%",
-            borderRadius: "0 0 100% 0",
+            marginBottom: "-" + borderSize,
-            borderBottom: "3.5px dotted " + segment.branchBorderColor,
+            borderRadius: "0 0 " + borderRadius + " 0",
-            borderRight: "3.5px dotted " + segment.branchBorderColor,
+            borderBottom: borderSize + " dotted " + segment.branchBorderColor,
+            borderRight: borderSize + " dotted " + segment.branchBorderColor,
           }}
         >
         </div>
@@ -322,10 +346,10 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
           style={{
             width: tabs * 2.5 + "%",
             height: "20px",
-            marginLeft: "-3.5px",
+            marginLeft: "-" + borderSize,
-            borderRadius: "100% 0 0 0",
+            borderRadius: borderRadius + " 0 0 0",
-            borderTop: "3.5px dotted " + segment.branchBorderColor,
+            borderTop: borderSize + " dotted " + segment.branchBorderColor,
-            borderLeft: "3.5px dotted " + segment.branchBorderColor,
+            borderLeft: borderSize + " dotted " + segment.branchBorderColor,
           }}
         >
         </div>
@@ -356,9 +380,6 @@ const SegmentGeneral = ({ segment }) => {
         className="segment_image cover"
         alt={segment.title}
       />
-      <div className="segment_title segment_title_image">
-        {segment.title}
-      </div>
       {!isVerified ? (
         <SimpleCaptchaWrapper 
           onVerified={setIsVerified} 
@@ -388,6 +409,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>
   );
 };
@@ -408,6 +439,8 @@ const SegmentRODO = ({ segment }) => {
 
 const Segment = ({ index, segment }) => {
   const segment_index = "segment_" + index;
+  let borderSize = "2px";
+  let borderRadius = "75%";
 
   return (
     <div
@@ -439,6 +472,7 @@ const Segment = ({ index, segment }) => {
                   key={`work_${index}`}
                   segment={segment}
                   tabs={segment.tabs}
+                  borderSize={borderSize}
                 />
                 :
                 segment.type === "createBranchSegment" ?
@@ -446,6 +480,8 @@ const Segment = ({ index, segment }) => {
                       key={`create_${index}`}
                       segment={segment}
                       tabs={segment.tabs}
+                      borderSize={borderSize}
+                      borderRadius={borderRadius}
                     />
                 :
                   segment.type === "mergeBranchSegment" ?
@@ -453,6 +489,8 @@ const Segment = ({ index, segment }) => {
                         key={`merge_${index}`}
                         segment={segment}
                         tabs={segment.tabs}
+                        borderSize={borderSize}
+                        borderRadius={borderRadius}
                       />
                   :
                     segment.type === "RODOSegment" ?
@@ -490,7 +528,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)}>
@@ -515,3 +553,10 @@ const IndexPage = () => {
 }
 
 export default IndexPage
+
+export const Head = () => (
+  <>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Kamil Żuk - CV</title>
+  </>
+)

src/styles/general.scss

@@ -33,7 +33,10 @@ body {
 .global_segment {
     margin-left: auto;
     margin-right: auto;
-    width: 21cm;
+    max-width: 21cm;
+    width: 100%;
+    padding: 0 15px;
+    box-sizing: border-box;
 
     a:link {
         color: $background_color;
@@ -81,6 +84,7 @@ body {
         float: left;
         margin-top: 30px;
         width: 100%;
+        position: relative;
 
         .segment_image {
             float: left;
@@ -162,7 +166,7 @@ body {
         float: left;
         width: 100%;
         font-family: $regular_font_family;
-        font-size: $regular_font_size;
+        font-size: 10pt;
         text-align: justify;
 
         ul {
@@ -170,17 +174,21 @@ 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;
             width: 2em;
-            margin-left: -2.875em;
+            margin-left: -3.4em;
         }
 
 
@@ -190,12 +198,39 @@ body {
         }
     }
 
+    .segment_header_middle {
+        position: absolute;
+        bottom: 0;
+        left: 220px;
+        right: 220px;
+    }
+
     .segment_title_image {
-        float: left;
+        float: none;
-        margin-top: 100px;
         margin-left: -40px;
     }
 
+    .segment_description {
+        clear: both;
+        font-family: $regular_font_family;
+        font-size: 10pt;
+        font-style: italic;
+        color: darken($color, 15%);
+        text-align: justify;
+        margin: 4px 0 10px 18px;
+    }
+
+    .segment_description_general {
+        clear: none;
+        float: none;
+        width: auto;
+        overflow: visible;
+        margin: 8px 0 0 0;
+        padding: 0;
+        font-size: 9.5pt;
+        text-align: justify;
+    }
+
 
     .subitem {
         margin-left: 15px;
@@ -218,6 +253,8 @@ body {
     align-items: center;
     width: 210px;
     height: 250px;
+    padding: 0 10px;
+    box-sizing: border-box;
 
     p {
         text-align: center;
@@ -243,21 +280,23 @@ body {
     }
     
     .captcha-input {
-      width: 170px;
+      width: 100%;
       padding: 8px;
       margin-bottom: 10px;
       border: 1px solid $color;
       background-color: $background_color;
       color: $color;
       font-size: 9pt;
+      box-sizing: border-box;
     }
     
     .captcha-button {
-      width: 188px;
+      width: 100%;
       padding: 8px;
       background-color: $background_color;
       color: $color;
       border: 1px solid $color;
+      box-sizing: border-box;
       cursor: pointer;
       font-size: 9pt;
       
@@ -266,6 +305,11 @@ body {
       }
     }
     
+    canvas {
+      max-width: 100%;
+      height: auto !important;
+    }
+
     .error-message {
       color: #ff4444;
       margin-top: 10px;
@@ -274,3 +318,204 @@ body {
     }
   }
 }
+
+@media (max-width: 768px) {
+    .global_segment {
+        padding: 0 10px;
+
+        .title_bar {
+            font-size: 18pt;
+            width: 75%;
+        }
+
+        .language_bar {
+            width: 25%;
+            font-size: 18pt;
+        }
+
+        .segment_general {
+            .segment_image {
+                width: 140px;
+                height: 170px;
+            }
+
+            .segment_content_image {
+                width: 120px;
+                height: 150px;
+                padding: 10px;
+                font-size: 6pt;
+            }
+
+            .segment_header_middle {
+                left: 140px;
+                right: 150px;
+            }
+
+            .segment_title_image {
+                margin-left: -20px;
+                padding-top: 12.5px;
+                padding-bottom: 7.5px;
+                height: 30px;
+            }
+
+            .segment_description_general {
+                font-size: 8pt;
+            }
+        }
+
+        .segment_title {
+            width: 200px;
+            font-size: 16pt;
+            padding-top: 12.5px;
+            padding-bottom: 7.5px;
+            height: 30px;
+        }
+
+        .segment_content_work {
+            font-size: 9pt;
+
+            .segment_content_title {
+                margin-top: 12px;
+                margin-bottom: 12px;
+            }
+
+            ul li::before {
+                margin-left: -3.75em;
+            }
+        }
+
+        .segment_description {
+            font-size: 8.5pt;
+            margin: 6px 0 6px 14px;
+        }
+    }
+
+    .captcha-container .captcha-form {
+        width: 140px;
+        height: 170px;
+        font-size: 8pt;
+        padding: 0 8px;
+
+        p {
+            margin-top: 8px;
+            margin-bottom: 8px;
+            font-size: 8pt;
+        }
+
+        form {
+            margin-top: 8px;
+        }
+
+        .captcha-input {
+            margin-bottom: 8px;
+        }
+
+        .captcha-input, .captcha-button {
+            padding: 5px;
+            font-size: 7pt;
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    .global_segment {
+        .title_bar {
+            font-size: 15pt;
+        }
+
+        .language_bar {
+            font-size: 15pt;
+        }
+
+        .segment_general {
+            .segment_image {
+                width: 100px;
+                height: 125px;
+            }
+
+            .segment_content_image {
+                width: 90px;
+                height: 110px;
+                padding: 8px;
+                font-size: 4pt;
+            }
+
+            .segment_header_middle {
+                left: 95px;
+                right: 108px;
+            }
+
+            .segment_title_image {
+                margin-left: -10px;
+                padding-top: 10px;
+                padding-bottom: 0px;
+                height: 33px;
+            }
+
+            .segment_description_general {
+                font-size: 6.5pt;
+                margin: 6px 6px 6px 14px;
+            }
+        }
+
+        .segment_title {
+            width: 160px;
+            font-size: 13pt;
+            padding-top: 10px;
+            padding-bottom: 0px;
+            height: 33px;
+        }
+
+        .segment_content_work {
+            font-size: 8pt;
+
+            ul {
+                margin-left: 18px;
+            }
+
+            ul li {
+                padding-top: 5px;
+            }
+
+            ul li::before {
+                margin-left: -4.25em;
+            }
+        }
+
+        .segment_description {
+            font-size: 7.5pt;
+            margin: 6px 0 6px 14px;
+        }
+
+        .captcha-container .captcha-form {
+            width: 100px;
+            height: 125px;
+            font-size: 7pt;
+            padding: 0 6px;
+
+            p {
+                margin-top: 5px;
+                margin-bottom: 5px;
+                font-size: 7pt;
+            }
+
+            a {
+                padding-left: 20.5px;
+                padding-right: 20.5px;
+            }
+
+            form {
+                margin-top: 2px;
+            }
+
+            .captcha-input {
+                margin-bottom: 2px;
+            }
+
+            .captcha-input, .captcha-button {
+                padding: 4px;
+                font-size: 6pt;
+            }
+        }
+    }
+}