From f56307f982fea08e667654a0ccccbf2b649b43b1 Mon Sep 17 00:00:00 2001
From: Jakub Chojna <jakub.chojna@gmail.com>
Date: Sun, 3 Mar 2024 19:52:34 +0100
Subject: [PATCH 1/2] fix: fix scrolling on mobiles

---
 src/components/MobileMenu.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index e023e31..3b83363 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -55,9 +55,8 @@ const MobileMenu = ({
     setIndicatorRef(indicatorRef.current);
     const sectionsRefCopy = sectionsRef.current;
     if (sectionsRefCopy) {
-      sectionsRefCopy.addEventListener('mousewheel', handleScroll);
-      return () =>
-        sectionsRefCopy.removeEventListener('mousewheel', handleScroll);
+      sectionsRefCopy.addEventListener('scroll', handleScroll);
+      return () => sectionsRefCopy.removeEventListener('scroll', handleScroll);
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 

From e6e4ef1678f8297644b76a6f7a3917aeeb378dfe Mon Sep 17 00:00:00 2001
From: Jakub Chojna <jakub.chojna@gmail.com>
Date: Sun, 3 Mar 2024 20:23:06 +0100
Subject: [PATCH 2/2] fix: fix crucial issues

---
 src/components/Graphic.module.scss | 16 ++-------
 src/styles/mixins.scss             | 52 ++++++++++--------------------
 2 files changed, 20 insertions(+), 48 deletions(-)

diff --git a/src/components/Graphic.module.scss b/src/components/Graphic.module.scss
index e1e0e37..fee1cd3 100644
--- a/src/components/Graphic.module.scss
+++ b/src/components/Graphic.module.scss
@@ -12,25 +12,15 @@
 
 .graphic {
   align-items: center;
+  align-self: center;
   display: flex;
-  grid-area: logo;
   justify-content: center;
   justify-self: start;
+  margin-top: 50px;
   max-width: calc(100% - #{$offset-left-s});
   position: relative;
   transform-origin: bottom left;
-  width: 50%;
-
-  &.tasktimer {
-    margin-right: -50px;
-  }
-
-  &.portfolio,
-  &.quotes,
-  &.other,
-  &.contact {
-    margin-right: -25px;
-  }
+  width: 60%;
 
   &.about {
     @include graphic(about);
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 39edf6e..1eddfe4 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -21,6 +21,7 @@
 @mixin section {
   align-items: center;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   min-height: 100vh;
   max-height: none;
@@ -30,7 +31,7 @@
 
   @media only screen and (min-width: $media-m) {
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
     padding: 0 50px 0 350px;
   }
 
@@ -128,21 +129,6 @@
   transition: opacity 1s, transform 0.8s cubic-bezier(0, 0.5, 0, 1) 0.2s;
   width: 100%;
 
-  &.prev {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  &.current {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  &.next {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
   &.about {
     grid-template-areas:
       'photo'
@@ -156,7 +142,6 @@
 
   &.resume {
     grid-template-areas:
-      'logo'
       'title'
       'info'
       'accordions';
@@ -168,7 +153,6 @@
   &.archviz,
   &.quotes {
     grid-template-areas:
-      'logo'
       'description'
       'demo'
       'tags'
@@ -176,17 +160,8 @@
       'icons';
   }
 
-  &.other {
-    grid-template-areas:
-      'logo'
-      'title'
-      'description'
-      'otherRepos';
-  }
-
   &.contact {
     grid-template-areas:
-      'logo'
       'title'
       'form'
       'social'
@@ -194,6 +169,21 @@
   }
 
   @media only screen and (min-width: $media-m) {
+    &.prev {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    &.current {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.next {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
     &.about {
       grid-template-areas:
         'title photo'
@@ -228,14 +218,6 @@
       grid-template-rows: auto 1fr repeat(2, auto);
     }
 
-    &.other {
-      grid-template-areas:
-        'title    '
-        'description'
-        'otherRepos ';
-      grid-template-rows: auto 1fr auto;
-    }
-
     &.contact {
       align-content: stretch;
       align-items: center;