updates

components/menu.js

@@ -13,6 +13,8 @@ export default function Menu() {
                 <a href="#">Home</a>
                 <span>//</span>
                 <a href="/music">Music Feed</a>
+                <span>//</span>
+                <a href="/models">Models</a>
             </div>
         </section>
     )

pages/index.js

@@ -20,27 +20,26 @@ export default function Index() {
                 <title>Invesvpo | Landing Page</title>
             </Head>
 
-            <div className={styles.leftsidetint + " slide-in-down"}>
+            <section className={styles.leftsidetint + " slide-in-down"}>
                 <a href="/"><img src="/logo.png"/></a>
                 <footer>
                     <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
                 </footer>
-            </div>
+            </section>
 
+            <section className={styles.content}>
                 <div className={styles.topcontainerbackg + " slide-in-right"}></div>
 
                 <div className={styles.topcontainer + " slide-in-left"}>
-                <div className={styles.topcontent}>
                     <Menu/>
-                </div>
+                    <div>
-                <div className={styles.topcontent}>
                         <h1>INVESVPO</h1>
                         <p><div className="badge"><span>aka</span></div> Fuhz — Elikas — C2RW</p>
                     </div>
                 </div>
 
                 <div className={styles.bottomcontainer + " slide-in-up"}>
-                <div className={styles.topcontent}>
+                    <div>
                         <h3>
                             {`Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more about it.`} <br/>
                             {`I also make music, so check out my Spotify and SoundCloud below. `}<br/>
@@ -87,6 +86,7 @@ export default function Index() {
                         </div>
                     </div>
                 </div>
+            </section>
         </div>
     )
 }

pages/models.js

@@ -0,0 +1,9 @@
+import Head from 'next/head'
+
+export default function Models() {
+    return (
+        <div>
+            
+        </div>
+    )
+}

pages/music.js

@@ -1,13 +1,4 @@
 import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Index.module.css'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDiscord } from '@fortawesome/free-brands-svg-icons'
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'
-import { faSpotify } from '@fortawesome/free-brands-svg-icons'
-import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 
 export default function Music() {
     return (

styles/Index.module.css

@@ -10,14 +10,22 @@
 
 
 /* page layout */
+.page {
+    display: flex;
+}
 
-.topcontent {
+.page .content {
-    width: var(--page-width);
+    flex-grow: 1;
-    margin: 0 auto;
+}
+
+.content {
+    position: relative;
+    width: 100%;
 }
 
 .topcontainerbackg {
     height: 40vh;
+    z-index: 0;
     background-color: #2940D3;
 
     -ms-transform: skewX(-20deg);
@@ -26,20 +34,22 @@
 }
 
 .topcontainer {
-    position: absolute;
+    padding: 0 var(--padding-xl);
     top: 0;
+    right: 0;
     left: 0;
-    width: 100vw;
+    bottom: 0;
+    position: absolute;
     height: 40vh;
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: start;
     justify-content: space-between;
     color: white;
     background-image: url('/gun.png');
     background-size: contain;
     background-repeat: no-repeat;
-    background-position: right;
+    background-position: right center;
 }
 
 .topcontainer h1 {
@@ -52,6 +62,7 @@
 }
 
 .bottomcontainer {
+    padding: 0 var(--padding-xl);
     height: 60vh;
     background-color: #232323;
     display: flex;
@@ -63,12 +74,8 @@
 }
 
 .leftsidetint {
-    position: absolute;
+    z-index: 1;
-    z-index: 10;
-    top: 0;
-    left: 0;
     width: 10vw;
-    height: 100vh;
     background-color: #1a1a1a;
     display: flex;
     flex-direction: column;
@@ -84,6 +91,7 @@
 /* items */
 
 .links {
+    width: 100%;
     display: flex;
     flex-grow: 1;  
     align-items: center;
@@ -99,7 +107,7 @@
 
 .links div a {
     text-align: center;
-    padding: var(--padding) var(--padding-lg) var(--padding) var(--padding-xl);
+    padding: var(--padding) var(--padding-xl);
     transition-duration: var(--transition-speed);
     background-color: #2940D3;
 
@@ -108,14 +116,30 @@
     transform: skewX(-20deg);
 }
 
+.links div a:hover {
+    -ms-transform: skewX(0deg);
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+    transition-duration: var(--transition-speed);
+}
+
+.links div a:hover span {
+    -ms-transform: skewX(0deg);
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+    transition-duration: var(--transition-speed);
+}
+
 .links div p {
     margin: unset;
 }
 
 .links div a span {
+    transition-duration: var(--transition-speed);
     -ms-transform: skewX(20deg);
     -webkit-transform: skewX(20deg);
     transform: skewX(20deg); 
+
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
@@ -158,7 +182,7 @@
     }
 }
 
-@media (max-aspect-ratio: 5/3) {
+@media (max-aspect-ratio: 5/4) {
     .leftsidetint {
         display: none;
     }

styles/globals.css

@@ -3,6 +3,7 @@
   --padding: 10px;
   --padding-lg: 20px;
   --padding-xl: 50px;
+  --padding-xxl: 100px;
 
   --font-xl: 5em;
   --font-lg: 1.5em;
@@ -90,7 +91,8 @@ img {
 .slide-in-right {
   animation-name: slide-in-right;
   animation-duration: 1s;
-  margin-right: 10vw;
+  margin-right: var(--padding-xxl);
+  margin-left: -50vw;
   animation-timing-function: ease-in-out;
 }
 
@@ -98,8 +100,11 @@ img {
   0% {
     margin-right: 150vw;
   }
+  25% {
+    margin-right: 150vw;
+  }
   100% {
-      margin-right: 10vw;
+      margin-right: var(--padding-xxl);
   }
 
 }
@@ -147,15 +152,15 @@ img {
   animation-name: slide-in-down;
   animation-duration: 0.4s;
   overflow-y: hidden;
-  top: 0vh;
+  margin-top: 0vh;
   animation-timing-function: ease-in-out;
 }
 
 @keyframes slide-in-down {
   0% {
-    top: 100vh;
+    margin-top: 100vh;
   }
   100% {
-    top: 0vh;
+    margin-top: 0vh;
   }
 }