From 9170dd5c04f5861303b5ab880f8960e8b5a4c59c Mon Sep 17 00:00:00 2001
From: Alik Zapolnov <174180213+Alik532UA@users.noreply.github.com>
Date: Fri, 17 Oct 2025 00:22:38 +0300
Subject: [PATCH 1/4] fix: Update padding in base.scss
- Updated padding in _sass/base.scss for a better look.
---
_sass/base.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_sass/base.scss b/_sass/base.scss
index 28cc4a4..332cd29 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -202,7 +202,7 @@ ul, ol { margin-left: 0; }
top: 0;
height: 100%;
width: 70vw;
- padding: 5vw 0 0 10vw;
+ padding: 5vw 5vw 0 5vw;
scroll-snap-align: start;
scroll-snap-stop: always;
z-index: 3;
From e15ad0801bf5cbb13a9ae90dbe6923ea8f023e41 Mon Sep 17 00:00:00 2001
From: Alik Zapolnov <174180213+Alik532UA@users.noreply.github.com>
Date: Fri, 17 Oct 2025 00:39:35 +0300
Subject: [PATCH 2/4] Added a tag to
the default layout.
This prevents mobile browsers from automatically applying their own dark theme, ensuring a consistent site appearance and fixing display issues on devices with a system-wide dark theme.
---
_layouts/default.html | 1 +
1 file changed, 1 insertion(+)
diff --git a/_layouts/default.html b/_layouts/default.html
index 0fef090..b69b916 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,6 +3,7 @@
{% gtm head %}
+
{% if page.json-ld %}
{% for item in site.data.seo[page.json-ld] %}
From 6aa83ac92847a965d1d357fe98c77a1f9551026a Mon Sep 17 00:00:00 2001
From: Alik Zapolnov <174180213+Alik532UA@users.noreply.github.com>
Date: Fri, 17 Oct 2025 00:45:01 +0300
Subject: [PATCH 3/4] feat: Close mobile navbar on outside click
Added a click event listener to the main content area. When the mobile navigation is open, clicking on the main content will now close the navigation drawer.
---
assets/js/navbar.js | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
index 0a50208..3a69f65 100644
--- a/assets/js/navbar.js
+++ b/assets/js/navbar.js
@@ -6,6 +6,13 @@ function innitMobileNavbar() {
const navButton = document.querySelector('.menu-icon');
const closeMobileNavButton = document.querySelector('.menu-close-ico')
const scroller = document.querySelector('.body-content')
+ const mainContent = document.querySelector('.body-content__main-section');
+
+ mainContent.addEventListener('click', () => {
+ if (scroller.scrollLeft > 0) {
+ scroller.scroll({ left: 0, behavior: "smooth" });
+ }
+ });
closeMobileNavButton.addEventListener('click', () => {
scroller.scroll({ left: 0, behavior: "smooth", });
From e01f9b86e44ff316a03373473165d556b27a3d16 Mon Sep 17 00:00:00 2001
From: Alik Zapolnov <174180213+Alik532UA@users.noreply.github.com>
Date: Fri, 17 Oct 2025 01:07:51 +0300
Subject: [PATCH 4/4] perf: Optimize carousel animation for mobile
Refactored the checkPos function that calculates the 3D scroll effect. The new implementation filters out off-screen elements and only performs expensive calculations (like getBoundingClientRect) for visible items. This drastically reduces CPU load during scrolling, fixing performance issues and janky animations on mobile devices while preserving the real-time visual effect.
---
assets/js/carousel.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/assets/js/carousel.js b/assets/js/carousel.js
index a67e955..f8608fd 100644
--- a/assets/js/carousel.js
+++ b/assets/js/carousel.js
@@ -87,9 +87,15 @@ const setCarousel = (scroller) => {
const offsetWidth = target.offsetWidth;
const checkPos = () => {
- [...target.children].map(e => {
- const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2);
- const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2;
+ [...target.children].forEach(e => {
+ const childRect = e.getBoundingClientRect();
+ // Optimization: Only process elements currently visible on screen.
+ if (childRect.right < 0 || childRect.left > window.innerWidth) {
+ return; // Skip heavy calculations for off-screen elements
+ }
+
+ const toCenter = Math.abs(window.innerWidth / 2 - childRect.left - childRect.width / 2);
+ const toCenter2 = window.innerWidth / 2 - childRect.left - childRect.width / 2;
const viewport = toCenter / offsetWidth * 100;
const viewport2 = toCenter2 / offsetWidth * 100;
e.style.setProperty('--viewport', viewport);