remade projects

assets/css/fetch.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'InconsolataLGCNerdFont-Regular'; 
-    src: url("InconsolataLGCNerdFont-Regular.ttf") format("opentype");
+    src: url("/assets/misc/InconsolataLGCNerdFont-Regular.ttf") format("opentype");
     font-style: normal;
 }
 
@@ -8,7 +8,7 @@
     background: #090909a3;
     border-radius: 5px;
     color: white;
-    font-family: 'InconsolataLGCNerdFont-Regular';
+     font-family: "InconsolataLGCNerdFont-Regular";
     font-size: 12px;
     line-height: 15px;
     padding: 14px 18px;

assets/css/style.css

@@ -10,10 +10,13 @@ body {
 
   height: 100%;
   margin: 0;
-  background: url(bg.png);
+  background: url("/assets/images/vbg.png");
+  backdrop-filter: blur(10px);
   background-size: cover;
+  background-repeat: no-repeat;
 }
 
+.showcase span,
 a,
 h1,
 h2,
@@ -126,12 +129,12 @@ button:active {
   backdrop-filter: blur(50px);
   padding: 10px;
   border-radius: 5px;
-  
+
 
 }
 
 .div-hidden {
-display: none;
+  display: none;
 }
 
 
@@ -338,6 +341,12 @@ input:focus {
   display: inline-block;
   align-self: center;
   margin-top: 100px;
+  transition: all 0.2s ease;
+}
+
+.smalimages img:hover {
+  width: 120px;
+  height: fit-content;
 }
 
 .link {
@@ -363,34 +372,61 @@ code {
 
 }
 
-.move {
-  animation-name: move;
-  animation-duration: 2s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
+.showcase {
+  float:left;
+  box-shadow: 0 0 0.2em rgb(0, 0, 0);
+  border-radius: 3px;
+  width: 800px;
+  margin-top: 30px;
 }
 
-@keyframes move {
-  0% {
-    transform: translateY(0);
-  }
+.showcase img:not(.background) {
 
-  50% {
-    transform: translateY(-100%);
-    opacity: 1;
-  }
+  padding: 10px;
+  width: 60%;
+  padding-left: 20px;
+  float: left;
+}
 
-  50.001% {
-    opacity: 0;
-    transform: translateY(100vw);
-  }
+.showcase span {
+  padding-top: 10px;
+  float: left;
+  overflow: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  display: block;
+  white-space: normal;
+  width: 35%;
+}
 
-  50.002% {
-    opacity: 1;
-    transform: translateY(100vw);
-  }
+.showcase h2 {
+  border-bottom: 2px white solid;
+  margin-left: 10px;
+  border-bottom: 4px solid var(--accent-color);
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
 
-  100% {
-    transform: translateY(0);
-  }
+.showcase .background {
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  z-index: -1;
+  opacity: 0.4;
+  background-size: cover;
+}
+
+#relaunch {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/alphaver.png");
+  background-size: 50%;
+}
+
+#doom {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
+  background-size: 100%;
+  background-position: 0 365px;
+}
+
+#blur {
+  backdrop-filter: blur(20px);
 }

assets/js/main.js

@@ -0,0 +1,49 @@
+const backgrounds = ["ubg.png","vbg.png","limbg.png"];
+
+window.onload = function () {
+    try {
+        document.getElementById("moreInfo").classList.add('div-hidden');
+        document.getElementById("specs").classList.add('div-hidden');
+    } catch (exception) {
+        console.log("something was supposed to happen, but it didnt.")
+    }
+    document.body.style.background = getRandomBackground();
+    document.body.style.backgroundSize = "cover";
+};
+
+function pauseVideo() {
+    if (!video.videoPaused) {
+        video.pause();
+    } else {
+        video.play();
+    }
+}
+function showThing(element) {
+    var gallery = document.getElementById(element);
+    if (gallery.classList.contains("div-hidden")) {
+        gallery.classList.remove('div-hidden');
+    } else {
+        gallery.classList.add('div-hidden');
+    }
+}
+
+function rotate() {
+    var x = document.getElementsByTagName("BODY")[0];
+    x.className = "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;
+}
+
+function getRandomBackground(){
+   return 'url("/assets/images/' + backgrounds[getRandomInt(3)] + '")'; 
+}
+
+function getRandomInt(max) {
+    return Math.floor(Math.random() * max);
+  }
+  

index.html

@@ -3,9 +3,9 @@
 
 <head>
     <title>Gnawmon's Website</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="fetch.css">
-    <script src="main.js"></script>
+    <link rel="stylesheet" href="assets/css/style.css">
+  <link rel="stylesheet" href="assets/css/fetch.css">
+    <script src="assets/js/main.js"></script>
 </head>
 
 <body>
@@ -25,7 +25,7 @@
                     class="tooltiptext">rust, c or c++ idk</span> </tot> at one point too. I've made a few games in
             unity and never posted them online. <br> <br>
             I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're looking at one right now!
-                    Although it's blurred</span> </tot> in blender and posted a few on <a style="color: #1DA1F2;"
+                    Although it's blurred</span> </tot> in blender and posted a few on <a class="link"
                 target=”_blank” href="https://nitter.net/Gnawmon">twitter</a> but stopped posting a while back. I
             also made prodecural textures with substance 3d in the past.<br><br>
             I use an arch based os btw<br><br>
@@ -34,15 +34,15 @@
 
         </p>
         <h2 onclick="showThing('moreInfo')" class="paragraph dropdown">More</h2>
-        <div class="gallery div-hidden" id="moreInfo">
+        <div class="gallery" 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>
+                also heres <a class="link" href="assets/misc/pgp.txt"> my pgp key</a>
         
             </p>
         </div>
         <h2  onclick="showThing('specs')" class="paragraph dropdown">Computers</h2>
-        <div class="gallery div-hidden" id="specs" style="margin-bottom: 2px;">
+        <div class="gallery" id="specs" style="margin-bottom: 2px;">
         <h3>Lonix Machine </h3> 
         <ul>
          <li>My main machine</li>
@@ -111,35 +111,35 @@
                                                 </ul>                             
         </div>
         <div class="contact">
-            <img src="svg/matrix.svg" height="40" width="40" />
+            <img src="assets/svg/matrix.svg" height="40" width="40" />
             <p>@gnawmon@matrix.org</p>
         </div>
 
         <div class="contact">
             <a href="http://git.vern.cc/gnawmon">
-                <img src="svg/forgejo.svg" height="40" width="40" />
+                <img src="assets/svg/forgejo.svg" height="40" width="40" />
                 <p>/gnawmon</p>
             </a>
         </div>
         <div class="contact">
             <a href="https://github.com/gnawmon">
-                <img src="svg/github.svg" height="40" width="40" />
+                <img src="assets/svg/github.svg" height="40" width="40" />
                 <p>/gnawmon</p>
             </a>
         </div>
         <div class="contact">
-            <img src="svg/discord.svg" height="40" width="40" />
+            <img src="assets/svg/discord.svg" height="40" width="40" />
             <p>@gnawmon</p>
         </div>
         <div class="contact">
-            <img src="svg/mail.svg" height="40" width="40" />
+            <img src="assets/svg/mail.svg" height="40" width="40" />
             <p>gnawmon@vern.cc</p>
         </div>
         <div class="smalimages">
-            <a href="https://endeavouros.com/"> <img src="88x31/endeavour.png"></img> </a>
-            <a href="https://www.mozilla.org/en-US/firefox/new"> <img src="88x31/firefox.gif"></img></a>
-            <img src="88x31/ie_exploder.gif"></img>
-            <a href="https://vern.cc"> <img src="88x31/vern.png"></img></a>
+            <a href="https://endeavouros.com/"> <img src="assets/88x31/endeavour.png"></img> </a>
+            <a href="https://www.mozilla.org/en-US/firefox/new"> <img src="assets/88x31/firefox.gif"></img></a>
+            <img src="assets/88x31/ie_exploder.gif"></img>
+            <a href="https://vern.cc"> <img src="assets/88x31/vern.png"></img></a>
             <!-- <button id="rotate_button" onclick="rotate()">rotate</button> -->
         </div>
 

main.js

@@ -1,28 +0,0 @@
-
-function pauseVideo() {
-    if (!video.videoPaused) {
-        video.pause();
-    } else{
-        video.play();
-    }
-}
-function showThing(element) {
-    var gallery = document.getElementById(element);
-    if (gallery.classList.contains("div-hidden")) {
-        gallery.classList.remove('div-hidden');
-    } else {
-        gallery.classList.add('div-hidden');
-    }
-}
-
-function rotate() {
-    var x = document.getElementsByTagName("BODY")[0];
-    x.className = "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; 
-  }

projects.html

@@ -3,8 +3,8 @@
 
 <head>
     <title>Projects</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="main.js"></script>
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <script src="/assets/js/main.js"></script>
 </head>
 
 <body>
@@ -18,14 +18,26 @@
 
         <div class="paragraph">
             <br>
-            <p>All of the projects listed on here are unfinished <img class="emote" src="cats/fanofargs.png"></img> </p>
-            <ul>
-                <li>ReLaunch | A Minecraft Launcher</li>
-                <img src="images/minecraftLauncher.png"></img>
-                <li>Unnamed Doom Clone</li>
-                <img src="images/doomClone.png"></img>
-                <li>This website?</li>
-            </ul>
+
+            <p>All of the projects listed on here are unfinished <img class="emote"
+                    src="/assets/cats/fanofargs.png"></img> </p>
+            <div class="showcase" id="relaunch">
+
+                <h2>ReLaunch | A Minecraft Launcher</h2>
+                <img src="/assets/images/minecraftLauncher.png">
+                <span>A launcher with <a href="https://alphaver.miraheze.org/wiki/AlphaVer_Wiki" class="link">Alphaver</a> in mind. <br><br> It was/will going to have windows and linux support.</span>
+            </div>
+            <div class="showcase" id="doom">
+
+                <h2>Unnamed Doom Clone</h2>
+                <img src="/assets/images/doomClone.png">
+                <span>A rogue lite I was/am making? <br><br> depends on my mood if I want to work on it or not</span>
+            </div>
+            <div class="showcase" id="blur" style="height: 400px;">
+
+                <h2>This Website?</h2>
+                <span style="margin-left: 20px;">lorem ipsum i forgot </span>
+            </div>
             <br> <br>
             <!--  <button onclick="pauseVideo()">Pause the video</button> -->