Parralax Test

package.json

@@ -13,7 +13,7 @@
     "astro": "^2.7.0",
     "astro-i18next": "^1.0.0-beta.21",
     "astro-single-file": "^1.1.0",
-    "easy-theme": "^1.0.71",
+    "easy-theme": "1.0.71",
     "html-minifier-terser": "^7.2.0",
     "sass": "1.69.7"
   },

src/components/common/NavigationButton.astro

@@ -118,6 +118,7 @@
         width: $dotSize;
         background-color: var(--background);
         transition: var(--transitionSlow);
+        border-radius: 25%;
     }
 
     .navBurgerClose {

src/components/common/NavigationItem.astro

@@ -85,7 +85,7 @@ const isActive = Astro.url.pathname === href;
             background-color: var(--contrast);
         }
 
-        &:hover {
+        &:not(&:target):hover {
             a {
                 &::before {
                     right: 25%;

src/components/common/NavigationMenu.astro

@@ -12,9 +12,12 @@
         background-color: var(--contrast);
         pointer-events: none;
         transition: var(--transitionSlow);
+        z-index: 5;
     }
 
     body:has(#menu:target) {
+        // overflow: hidden;
+
         .navMenu {
             height: 100%;
         }

src/components/sections/Landing.astro

@@ -0,0 +1,73 @@
+---
+import WavesImage from '../../img/waves.webp'
+---
+
+<main>
+    <img class="backgroundImage" src={WavesImage}>
+
+    <div class="titleWrapper">
+        <h2 class="title">{ 'dev\ndesign' }</h2>
+    </div>
+</main>
+
+<style lang="scss">
+    @use "easy-theme" as theme;
+
+    main {
+        position: relative;
+        height: 100vh;
+        transform-style: inherit;
+    }
+
+    .backgroundImage {
+        width: 210%;
+        object-fit: cover;
+        object-position: center bottom;
+        height: 200vh;
+        position: absolute;
+        top: 0;
+        z-index: -1;
+        transform: translateZ(-1px) scale(1) translate(-25%, -25%);
+        transform-origin: bottom;
+
+        @include theme.Mobile {
+            height: 150vh;
+            width: 210%;
+            transform: translateZ(-1px) scale(1) translate(-25%, -30%);
+        }
+    }
+
+    .titleWrapper {
+        padding: 3rem;
+
+        @include theme.Mobile {
+            padding: 1.5rem;
+        }
+    }
+
+    .title {
+        margin: 0;
+        color: var(--primary);
+        white-space: pre-line;
+        font-size: 15rem;
+        font-weight: 900;
+        line-height: .6em;
+        position: relative;
+        margin-left: 0.6em;
+
+        @include theme.Tablet {
+            font-size: 10rem;
+        }
+
+        @include theme.Mobile {
+            font-size: 5rem;
+        }
+
+        &:before {
+            content: '&';
+            position: absolute;
+            bottom: 0;
+            right: calc(100% - .05em);
+        }
+    }
+</style>

src/pages/test.astro

@@ -1,24 +1,18 @@
 ---
 import { changeLanguage, t } from "i18next";
 import Layout from "../layouts/Layout.astro";
-import Header from "../components/Header.astro";
-import ThemesSetup from "../components/ThemesSetup.astro";
-import ThemeSelection from "../components/ThemeSelection.astro";
-import { Projects } from "../lib/Projects.lib";
-import HeaderSocials from "../components/HeaderSocials.astro";
-import Project from "../components/Project.astro";
-import Preview from "../components/Preview.astro";
+
 import Navigation from "../components/common/Navigation.astro";
 import NavigationMenu from "../components/common/NavigationMenu.astro";
 
+import LandingSection from "../components/sections/Landing.astro";
+
 changeLanguage("en");
 ---
 
 <Layout title={t('pageTitle')}>
 	<Navigation />
 	<NavigationMenu />
 
-	<main>
-		<!-- hello -->
-	</main>
+	<LandingSection></LandingSection>
 </Layout>

src/styles/index.scss

@@ -1,4 +1,5 @@
 @import './lib/normalize';
+@import './lib/helpers';
 @import './lib/base';
 
-@import './nav';
+// @import './nav';

src/styles/lib/_base.scss

@@ -16,14 +16,18 @@ html, body {
     margin: 0;
     height: 100%;
     display: flow-root;
-    overflow-x: hidden;
     scroll-behavior: smooth;
 
     font-family: "Outfit", sans-serif;
     font-optical-sizing: auto;
     font-weight: 300;
     font-style: normal;
 
+    perspective: 1px;
+    transform-style: preserve-3d;
+    overflow-x: hidden;
+    overflow-y: visible;
+
     &::-webkit-scrollbar {
         width: .2rem;
         background: var(--contrast);
@@ -40,7 +44,7 @@ html, body {
 }
 
 main {
-    height: 200vh;
+    height: 300vh;
 }
 
 .theme {

src/styles/lib/_helpers.scss

@@ -0,0 +1,29 @@
+@mixin DarkMode {
+    @media (prefers-color-scheme: dark) {
+        @content;
+    }
+}
+
+@mixin MobileTiny {
+    @media screen and (max-width: 350px) {
+        @content;
+    }
+}
+
+@mixin Mobile {
+    @media screen and (max-width: 600px) {
+        @content;
+    }
+}
+
+@mixin Tablet {
+    @media screen and (max-width: 1000px) {
+        @content;
+    }
+}
+
+@mixin NotMobile {
+    @media screen and (min-width: 600px) {
+        @content;
+    }
+}

yarn.lock

@@ -1276,7 +1276,7 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-easy-theme@^1.0.71:
+easy-theme@1.0.71:
   version "1.0.71"
   resolved "https://registry.yarnpkg.com/easy-theme/-/easy-theme-1.0.71.tgz#2fa871a51d9d80aad3f9a7f96c62dda39eb7c5c7"
   integrity sha512-jBAKdjqCgAq/MoP7/aYAm4uANsiMe3Tmp7/B9yoPPFrLhopidHeT/WJ4y7/NYYhyz6fd+XDKGySz22FWU4NoVQ==