css

index.html

@@ -33,8 +33,8 @@
 
 
         </p>
-        <h2 onclick="showThing('gallery')" class="paragraph dropdown">More</h2>
-        <div id="gallery">
+        <h2 onclick="showThing('moreInfo')" class="paragraph dropdown">More</h2>
+        <div class="gallery div-hidden" id="moreInfo">
             <p class="paragraph">
                 I speak <s>3</s> 2 languages <br> <br>
                 also heres <a class="link" href="pgp.txt"> my pgp key</a>
@@ -42,7 +42,7 @@
             </p>
         </div>
         <h2  onclick="showThing('specs')" class="paragraph dropdown">Computers</h2>
-        <div id="specs" style="margin-bottom: 2px;">
+        <div class="gallery div-hidden" id="specs" style="margin-bottom: 2px;">
         <h3>Lonix Machine </h3> 
         <ul>
          <li>My main machine</li>

main.js

@@ -8,10 +8,10 @@ function pauseVideo() {
 }
 function showThing(element) {
     var gallery = document.getElementById(element);
-    if (gallery.style.display === "block") {
-        gallery.style.display = "none";
+    if (gallery.classList.contains("div-hidden")) {
+        gallery.classList.remove('div-hidden');
     } else {
-        gallery.style.display = "block";
+        gallery.classList.add('div-hidden');
     }
 }
 
@@ -21,3 +21,8 @@ function rotate() {
     var button = document.getElementById("rotate_button");
     button.style.display = "none";
 }
+function reset_animation(element) {
+    element.style.animation = 'none';
+    element.offsetHeight; /* trigger reflow */
+    element.style.animation = null; 
+  }

style.css

@@ -1,4 +1,3 @@
-
 :root {
 
   --accent-color: rgb(227, 154, 228);
@@ -63,7 +62,7 @@ button:active {
 .navbar {
   width: 100%;
   height: 30px;
-  background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ),var(--overlay);
+  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--overlay);
   position: fixed;
   z-index: 3;
 }
@@ -117,26 +116,37 @@ button:active {
   text-align: center;
 
 }
-#specs,
-#gallery,
-#projects {
-  display: none;
-  transition: all .5s ease-in-out;
+
+.gallery {
+
+  transition: all 1s ease;
   align-self: center;
   position: relative;
   width: 40%;
   backdrop-filter: blur(50px);
   padding: 10px;
-border-radius: 5px;
+  border-radius: 5px;
+  
+
 }
 
+.div-hidden {
+display: none;
+}
+
+
 .dropdown {
   margin-left: 10px;
   border-bottom: 3px solid var(--accent-color);
   border-radius: 1px;
   cursor: pointer;
-
+  transition: border-bottom 0.2s ease;
   user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+.dropdown:hover {
+  border-bottom: 13px solid var(--accent-color);
 }
 
 @-webkit-keyframes glow {
@@ -281,10 +291,19 @@ input:focus {
   align-self: center;
   position: relative;
   width: 40%;
+  backdrop-filter: blur(5px);
+  vertical-align: baseline;
+  margin-top: 2px;
+  border-radius: 5px;
+  transition: all 0.5s ease;
+
+}
+
+.contact:hover {
+  margin-left: 12px;
+  box-shadow: 0 0 20px 1px var(--accent-color);
   backdrop-filter: blur(100px);
-vertical-align: baseline;
-margin-top: 2px;
-border-radius: 5px;
+  border: rgb(200, 200, 200) 2px solid;
 }
 
 .contact image {
@@ -304,7 +323,7 @@ border-radius: 5px;
 .contact a {
 
   display: block;
- 
+
   text-decoration: none;
 }
 
@@ -332,12 +351,46 @@ border-radius: 5px;
   bottom: 0;
   background: var(--overlay);
 }
-.emote{
+
+.emote {
   width: 30px;
-margin-left: 3px;
+  margin-left: 3px;
   position: absolute;
 }
-code {
-background-color: rgb(9, 24, 37);
 
+code {
+  background-color: rgb(9, 24, 37);
+
+}
+
+.move {
+  animation-name: move;
+  animation-duration: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes move {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-100%);
+    opacity: 1;
+  }
+
+  50.001% {
+    opacity: 0;
+    transform: translateY(100vw);
+  }
+
+  50.002% {
+    opacity: 1;
+    transform: translateY(100vw);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
 }