Merge pull request #19 from jchojna/add-fixes

Add fixes
jchojna · Mar 3, 2024 · 4f34eef · 4f34eef
2 parents a6d6ebd + e6e4ef1
commit 4f34eef
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 51 deletions.
diff --git 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/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
 

diff --git 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,32 +153,37 @@
   &.archviz,
   &.quotes {
     grid-template-areas:
-      'logo'
       'description'
       'demo'
       'tags'
       'features'
       'icons';
   }
 
-  &.other {
-    grid-template-areas:
-      'logo'
-      'title'
-      'description'
-      'otherRepos';
-  }
-
   &.contact {
     grid-template-areas:
-      'logo'
       'title'
       'form'
       'social'
       'footer';
   }
 
   @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;