updates

pages/index.js

@@ -22,6 +22,9 @@ export default function Index() {
 
             <div 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>
 
             <div className={styles.topcontainerbackg + " slide-in-right"}></div>
@@ -83,10 +86,6 @@ export default function Index() {
                         </a>
                     </div>
                 </div>
-
-                <footer className={styles.topcontent}>
-                    <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
-                </footer>
             </div>
         </div>
     )

styles/Index.module.css

@@ -70,20 +70,31 @@
     width: 10vw;
     height: 100vh;
     background-color: #1a1a1a;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.leftsidetint footer {
+    font-size: var(--font-sm);
+    padding: var(--padding-lg);
 }
 
 
 /* items */
 
+.links {
+    display: flex;
+    flex-grow: 1;  
+    align-items: center;
+}
+
 .links div {
-    flex-wrap: wrap;
+    width: 100%;
     font-size: 1.5em;
-    flex-grow: 1;
     display: grid;
     grid-template-columns: 25% 25% 25%;
     gap: var(--padding-lg);
-    justify-content: start;
-    align-items: center;
 }
 
 .links div a {

styles/globals.css

@@ -91,13 +91,12 @@ img {
   animation-name: slide-in-right;
   animation-duration: 1s;
   margin-right: 10vw;
-  margin-left: -10vw;
   animation-timing-function: ease-in-out;
 }
 
 @keyframes slide-in-right {
   0% {
-      margin-right: 100vw;
+    margin-right: 150vw;
   }
   100% {
       margin-right: 10vw;
@@ -107,7 +106,7 @@ img {
 
 .slide-in-left {
   animation-name: slide-in-left;
-  animation-duration: 1s;
+  animation-duration: 1.2s;
   margin-left: 0vw;
   animation-timing-function: ease-in-out;
 }
@@ -116,6 +115,9 @@ img {
   0% {
     margin-left: 100vw;
   }
+  25% {
+      margin-left: 100vw;
+  }
   100% {
       margin-left: 0vw;
   }
@@ -124,7 +126,7 @@ img {
 
 .slide-in-up {
   animation-name: slide-in-up;
-  animation-duration: 1s;
+  animation-duration: 1.4s;
   margin-top: 0vh;
   animation-timing-function: ease-in-out;
 }
@@ -133,6 +135,9 @@ img {
   0% {
     margin-top: 100vh;
   }
+  25% {
+      margin-top: 100vh;
+  }
   100% {
       margin-top: 0vh;
   }
@@ -140,7 +145,7 @@ img {
 
 .slide-in-down {
   animation-name: slide-in-down;
-  animation-duration: 1s;
+  animation-duration: 0.4s;
   overflow-y: hidden;
   top: 0vh;
   animation-timing-function: ease-in-out;