From 5707a42744b2c5d2c8c6af27e15f57f85cdac388 Mon Sep 17 00:00:00 2001
From: sii42400 <sii42400@adobe.com>
Date: Thu, 16 Apr 2026 14:03:45 +0200
Subject: [PATCH] feat(cv): add responsive layout with viewport scaling and
 captcha fixes

Fluid container (max-width instead of fixed width), media queries for
768px and 480px breakpoints that proportionally scale the photo, captcha,
titles and description while preserving the desktop float/absolute layout.
Captcha inputs use percentage widths with border-box sizing so they stay
inside their container at all sizes.

Made-with: Cursor
---
 src/pages/index.js      |   7 ++
 src/styles/general.scss | 200 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 202 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 06b743a..b87af0b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -527,3 +527,10 @@ const IndexPage = () => {
 }
 
 export default IndexPage
+
+export const Head = () => (
+  <>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Kamil Żuk - CV</title>
+  </>
+)
diff --git a/src/styles/general.scss b/src/styles/general.scss
index bbb4f3d..3f93e0d 100644
--- a/src/styles/general.scss
+++ b/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;
@@ -185,7 +188,7 @@ body {
             font-weight: bold;
             display: inline-block;
             width: 2em;
-            margin-left: -2.875em;
+            margin-left: -3.4em;
         }
 
 
@@ -204,7 +207,6 @@ body {
 
     .segment_title_image {
         float: none;
-        width: 250px;
         margin-left: -40px;
     }
 
@@ -251,6 +253,8 @@ body {
     align-items: center;
     width: 210px;
     height: 250px;
+    padding: 0 10px;
+    box-sizing: border-box;
 
     p {
         text-align: center;
@@ -276,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;
       
@@ -299,6 +305,11 @@ body {
       }
     }
     
+    canvas {
+      max-width: 100%;
+      height: auto !important;
+    }
+
     .error-message {
       color: #ff4444;
       margin-top: 10px;
@@ -307,3 +318,182 @@ 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: 8pt;
+            }
+
+            .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;
+        }
+
+        .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: 7pt;
+            }
+
+            .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;
+            }
+        }
+
+        .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;
+            }
+
+            .captcha-input, .captcha-button {
+                padding: 4px;
+                font-size: 6pt;
+            }
+        }
+    }
+}