Rework homepage concept

src/pages/index.module.scss

@@ -3,15 +3,21 @@
 
 .heroSection {
     width: 100%;
-    height: 600px;
+    flex-grow: 1;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 800px;
+    //scroll-snap-align: start;
+    padding-top: 100px;
+    position: relative;
 
     .heroSectionBg,
     .heroSectionBgOver {
         position: absolute;
         width: 100%;
         max-width: unset;
-        height: 600px;
+        height: 100%;
         padding: 0;
 
         @media (pointer: coarse), (pointer: none) {
@@ -19,9 +25,16 @@
         }
     }
 
+    .spacer {
+        flex-grow: 1;
+        padding: 0;
+        margin: 0;
+    }
+
     .heroSectionBg {
         /*background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
             radial-gradient(ellipse at bottom right, #4a086829, transparent);*/
+        margin-top: -100px;
 
         background: linear-gradient(45deg, #000850 0%, #000320 100%),
             radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
@@ -38,23 +51,70 @@
                 #0f0a3c 100%
             );
         background-blend-mode: screen, overlay, hard-light, normal;
+
     }
 
     .heroSectionBgOver {
-        background: linear-gradient(to bottom, transparent 80%, $background);
-        transition: background-image 0.25s;
+        bottom: 0;
+        height: 150px;
+        /*background-color: $background;
+        transition: background-color 0.25s, box-shadow 0.25s;*/
+
+        @media(max-width: 950px) {
+            display: none;
+        }
+        
 
         @media (prefers-color-scheme: light) {
-            background: linear-gradient(
-                to bottom,
-                transparent 90%,
-                $lightBackground
-            );
+            background-color: $lightBackground;
         }
     }
 
-    @media (pointer: coarse), (pointer: none) {
-        height: 700px;
+    .landingCta {
+        position: relative;
+        display: flex;
+        justify-content: space-around;
+        
+        @media(max-width: 1000px) {
+            flex-direction: column;
+            bottom: 0;
+        }
+
+        a {
+            @include cardGeneric;
+            display: flex;
+            padding: $layoutPadding;
+            background-color: $background;
+            margin: $layoutPadding;
+            color: $textColor;
+            font-size: 1.6em;
+            text-decoration: none;
+            border-radius: 10px;
+            align-items: center;
+
+            @media(max-width: 1000px) {
+                margin: 10px;
+                font-size: 1.2em;
+            }
+
+            > svg {
+                margin-left: $layoutPadding;
+                flex-shrink: 0;
+            }
+
+            > div {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                flex-shrink: 0;
+
+                .ctaAccent {
+                    color: $accentColor;
+                    font-weight: 700;
+                    margin-right: 10px;
+                }
+            }
+        }
     }
 
     .profile {
@@ -62,9 +122,7 @@
         left: 50%;
         width: calc(90% - 40px);
         max-width: 600px;
-        max-height: 400px;
         transform: translate(-50%, 0%);
-        top: 100px;
 
         .hello {
             font-weight: 100;
@@ -157,7 +215,7 @@
             clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
         }
 
-        @media (max-width: 590px) {
+        @media (max-width: 690px) {
             .profileImage,
             .profileImageDummy {
                 display: none;
@@ -212,7 +270,7 @@
 .aboutSection {
     > article {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
 
         > div {
             width: calc(50% - 40px);