From 674b91e615952e75604e8e45197af9b92dc2099d Mon Sep 17 00:00:00 2001
From: MoxiFoxi411 <matic.ivesic@gmail.com>
Date: Thu, 23 Oct 2025 08:34:45 +0200
Subject: [PATCH 1/3] Added new font 'Inter' and some changes on <ul>

---
 src/app.css         | 2 +-
 src/app.html        | 3 +++
 src/lib/Main.svelte | 4 ++++
 3 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/app.css b/src/app.css
index 5159f9d..bd722a7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,7 @@
 body {
     background-color: #0a0d0f; 
     color: #e5e4ea;    
-    font-family: sans-serif;
+    font-family: "Inter", sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
diff --git a/src/app.html b/src/app.html
index f273cc5..aab379d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,9 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/Main.svelte b/src/lib/Main.svelte
index 183f425..ebd8106 100644
--- a/src/lib/Main.svelte
+++ b/src/lib/Main.svelte
@@ -11,6 +11,10 @@ import Service from '$lib/Service.svelte';
     align-items: center;
     gap: 2em;
 }
+
+li{
+    margin-bottom: 1em;
+}
 </style>
 
 <div class="main">

From 284158bf149b7d6fec1095451b033d25c16500ad Mon Sep 17 00:00:00 2001
From: MoxiFoxi411 <matic.ivesic@gmail.com>
Date: Wed, 29 Oct 2025 14:18:21 +0100
Subject: [PATCH 2/3] Added zoom in effect to service images

---
 src/lib/Header.svelte      |  1 +
 src/lib/Service.svelte     | 17 +++++------------
 src/lib/ZoomInImage.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/ZoomInImage.svelte

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index d9dbcab..5ccabf4 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -15,6 +15,7 @@
         top: 0;
         backdrop-filter: blur(7px);
         padding: 0 0 1em 0;
+        z-index: 1;
     }
 
 
diff --git a/src/lib/Service.svelte b/src/lib/Service.svelte
index ffa125e..56263ea 100644
--- a/src/lib/Service.svelte
+++ b/src/lib/Service.svelte
@@ -3,6 +3,7 @@ export let service = 'Lorem Ipsum';
 export let serviceImage = '/default_image.jpg';
 export let serviceImageAlt = 'Image';
 export let imageOnRight = false;
+import ZoomInImage from '$lib/ZoomInImage.svelte'
 </script>
 
 <style>
@@ -15,6 +16,7 @@ export let imageOnRight = false;
 
 .service-content{
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column-reverse;
     gap: 2em;
@@ -24,15 +26,6 @@ export let imageOnRight = false;
     flex-direction: column-reverse;
 }
 
-.image{
-    width: 100%;
-}
-
-.image>img{
-    width: 100%;
-    border-radius: 2em;
-}
-
 .service-text{
     width: 100%;
     font-size: 1.3em;
@@ -66,9 +59,9 @@ h2{
         </h2>
     </div>
     <div class="service-content" class:image-right={imageOnRight}>
-        <div class="image">
-            <img src={serviceImage} alt={serviceImageAlt}>
-        </div>
+        <ZoomInImage serviceImage={serviceImage} serviceImageAlt={serviceImageAlt}>
+
+        </ZoomInImage>
         <div class="service-text">
             <slot />
         </div>
diff --git a/src/lib/ZoomInImage.svelte b/src/lib/ZoomInImage.svelte
new file mode 100644
index 0000000..d3c704e
--- /dev/null
+++ b/src/lib/ZoomInImage.svelte
@@ -0,0 +1,38 @@
+<script>
+    export let serviceImage = '/default_image.jpg';
+    export let serviceImageAlt = 'Image';
+</script>
+
+<style>
+
+.image{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2em;
+    width: 100%;
+    height: 0;
+    padding-top: 35%;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.image>img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+    transition: 0.2s;
+}
+
+.image>img:hover{
+    transform: scale(1.1);
+}
+
+</style>
+
+<div class="image">
+    <img src={serviceImage} alt={serviceImageAlt}>
+</div>
\ No newline at end of file

From a8768f7ac3bfd8f6a949683735fd6d5ef4125b1f Mon Sep 17 00:00:00 2001
From: MoxiFoxi411 <matic.ivesic@gmail.com>
Date: Wed, 29 Oct 2025 14:33:20 +0100
Subject: [PATCH 3/3] Fixed image aspect ratio on phone

---
 src/lib/Header.svelte      | 14 --------------
 src/lib/Service.svelte     |  8 ++++++++
 src/lib/ZoomInImage.svelte | 11 +++++++++--
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 5ccabf4..b79ba31 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -18,25 +18,11 @@
         z-index: 1;
     }
 
-
-    .blur-background {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        background-color: rgba(15, 15, 16, 0.8);
-    }
-
     div>img{
         padding: 1em;
         width: 15em;
         z-index: 1;
     }
-
-    
-
 @media (min-width: 900px){
 
     :global(.header-contact){
diff --git a/src/lib/Service.svelte b/src/lib/Service.svelte
index 56263ea..5f9b473 100644
--- a/src/lib/Service.svelte
+++ b/src/lib/Service.svelte
@@ -12,6 +12,7 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 }
 
 .service-content{
@@ -19,6 +20,7 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     height: 100%;
     display: flex;
     flex-direction: column-reverse;
+    align-items: center;
     gap: 2em;
 }
 
@@ -36,10 +38,16 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     text-transform: uppercase;
 }
 
+h2{
+    text-align: center;
+    width: 100%;
+}
+
 @media (min-width: 900px){
 
     .service-content{
         flex-direction: row;
+        align-items: start;
     }
 
     .image-right{
diff --git a/src/lib/ZoomInImage.svelte b/src/lib/ZoomInImage.svelte
index d3c704e..9e821e3 100644
--- a/src/lib/ZoomInImage.svelte
+++ b/src/lib/ZoomInImage.svelte
@@ -11,9 +11,9 @@
     justify-content: center;
     align-items: center;
     border-radius: 2em;
-    width: 100%;
+    width: 80%;
     height: 0;
-    padding-top: 35%;
+    padding-top: 60%;
     overflow: hidden;
     z-index: 0;
 }
@@ -31,6 +31,13 @@
     transform: scale(1.1);
 }
 
+@media (min-width: 900px){
+
+    .image{
+        padding-top: 33%;
+    }
+}
+
 </style>
 
 <div class="image">
