Update to match current profile

index.html

@@ -13,22 +13,17 @@
       <div id="content">
         <div id="splits">
           <div id="split1">
-            <img src="assets/avi.jpg" />
+            <img src="assets/avi.png" />
           </div>
           <div id="split2">
-            <h1 class="title">
+            <h1 class="title">Quad</h1>
-              Quad
-            </h1>
-            <p class="sub-title">
-              (Dominik <span>Vincent</span> Salonen)
-            </p>
           </div>
         </div>
         
         <div id="main-container">
           <div id="navbar">
             <div id="button1" class="nav-button">About</div>
-            <div id="button2" class="nav-button">Social</div>
+            <div id="button2" class="nav-button">Contact</div>
             <div id="button3" class="nav-button">Projects</div>
           </div>
           
@@ -45,6 +40,67 @@
         </p>
       </div>
     </div>
-    <script src="main.js"></script>
+    <script>
+// Brace yourself for horrible JavaScript.
+// This code doesn't really exist for any reason other than the lolz
+
+// Find all our buttons
+const button1 = document.getElementById('button1');
+const button2 = document.getElementById('button2');
+const button3 = document.getElementById('button3');
+
+// Create variables that will get populated by loadContent() later
+var page1 = "pages/about.html";
+var page2 = "pages/contact.html";
+var page3 = "pages/projects.html";
+
+const contentArea = document.getElementById("page");
+
+// Very bad function to get rid of the "active" class wherever it is atm
+function resetButtons() {
+  button1.className = "nav-button";
+  button2.className = "nav-button";
+  button3.className = "nav-button";
+}
+
+function httpGet(myUrl, callback) {
+  var xmlHttp = new XMLHttpRequest();
+  xmlHttp.onreadystatechange = function() { 
+    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+      callback(contentArea, xmlHttp.responseText);
+  }
+  xmlHttp.open("GET", myUrl, true);
+  xmlHttp.send(null);
+}
+
+function activatePage(navbutt, source) {
+  resetButtons();
+  navbutt.className += " active";
+  console.log("there's absolutely no reason for this site to use ajax lmao");
+  httpGet(source, setContent);
+}
+
+function setContent(target, payload) {
+  target.innerHTML = payload;
+}
+
+function initialContent() {
+
+  // Slap on all the event listeners
+  button1.addEventListener('click', function() { 
+    activatePage(button1, page1);
+  }, false);
+    button2.addEventListener('click', function() { 
+    activatePage(button2, page2);
+  }, false);
+    button3.addEventListener('click', function() { 
+    activatePage(button3, page3);
+  }, false);
+
+  setContent(contentArea, '<p class="initial-text"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Click a button!</p>');
+}
+
+initialContent();
+    </script>
   </body>
 </html>

main.js

@@ -1,61 +0,0 @@
-// I suck at JS okay, don't judge. I know this is horrendous. Heavy copy/paste junk.
-// Code is commented more than it needs to be because I'm still learning and the comments are basically post-it notes to help me remember.
-// Ajax is entirely pointless for this site, but I did it to learn.
-
-// Find all our buttons
-const button1 = document.getElementById('button1');
-const button2 = document.getElementById('button2');
-const button3 = document.getElementById('button3');
-
-// Create variables that will get populated by loadContent() later
-var page1 = "pages/about.html";
-var page2 = "pages/social.html";
-var page3 = "pages/projects.html";
-
-const contentArea = document.getElementById("page");
-
-// Very bad function to get rid of the "active" class wherever it is atm
-function resetButtons() {
-  button1.className = "nav-button";
-  button2.className = "nav-button";
-  button3.className = "nav-button";
-}
-
-function httpGet(myUrl, callback) {
-  var xmlHttp = new XMLHttpRequest();
-  xmlHttp.onreadystatechange = function() { 
-    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
-      callback(contentArea, xmlHttp.responseText);
-  }
-  xmlHttp.open("GET", myUrl, true);
-  xmlHttp.send(null);
-}
-
-function activatePage(navbutt, source) {
-  resetButtons();
-  navbutt.className += " active";
-  console.log("there's absolutely no reason for this site to use ajax lmao");
-  httpGet(source, setContent);
-}
-
-function setContent(target, payload) {
-  target.innerHTML = payload;
-}
-
-function initialContent() {
-
-  // Slap on all the event listeners
-  button1.addEventListener('click', function() { 
-    activatePage(button1, page1);
-  }, false);
-    button2.addEventListener('click', function() { 
-    activatePage(button2, page2);
-  }, false);
-    button3.addEventListener('click', function() { 
-    activatePage(button3, page3);
-  }, false);
-
-  setContent(contentArea, '<p class="initial-text"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Click a button!</p>');
-}
-
-initialContent();

pages/about.html

@@ -1,8 +1,3 @@
 <h1>Hi there!</h1>
-<p>I'm mostly known as an internet guy. And on said internet, I go by "Quad". If you've heard of me, you probably know me as "That guy who made the Memes are bigger than Jesus tweet". If not that, it's probably <a href="http://openings.moe">openings.moe</a>, or the now defunct QuadFile.</p>
+<p>I am a sysadmin. That means I like things that plug into my network and have blinky lights. I never liked Windows 10, so I've also been running purely on Linux for many years now.</p>
-
+<p>I run some public services, such as <a href="https://weeaboo.space/">Weeaboo.space</a>, but the majority of what I do tends to be run in my home. I've got an interest for most things tech-related, so I'll happily partake in most dicusssions about tech. These days I mainly communicate via the <a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a> as Twitter was my preferred social media, however their management seems to have gone overly downhill lately. People who prefer more traditional methods can also just throw me an E-mail.</p>
-<p>I'm a system administrator and former developer. I still dabble in code a bit, but for the most part I mess with servers. Generally powered by Linux or FreeBSD. I'm also one of those dreaded "weeaboos" who watch lots of anime and who supposedly are the most degenerate scum on earth, but I'll leave that discussion for other people.</p>
-
-<p>Also I've been strangely addicted to ThinkPads lately.</p>
-
-<p>Long story short, I'm a huge nerd. Both for computers and for anime. You'll find me all over the internet, although I'm usually most active on Mastodon or Twitter.</p>

pages/contact.html

@@ -0,0 +1,4 @@
+<div class="icon-container">
+  <a href="https://weeaboo.space/users/quad"><i class="fa fa-activitypub" aria-hidden="true"></i><br />Fediverse</a>
+  <a href="mailto:contact@quad.moe"><i class="fa fa-envelope" aria-hidden="true"></i><br />E-Mail</a>
+</div>

pages/projects.html

@@ -1,17 +1,11 @@
-<p>I'm not an active dev anymore. But I've still got some small things going on around the internet.</p>
+<p>I'm not an active dev anymore, focusing on being a sysadmin and labbing with hardware at home. But I've still got some small things going on around the internet.</p>
 
 <p><a href="http://openings.moe">openings.moe</a> is still a huge site, although I'm mostly just responsible for servers now.</p>
 
 <p><a href="https://blog.quad.moe">My blog</a> is a thing that exists. I tend to forget it, but I'm hoping that I manage to come up with something interesting for it once in a while.</p>
 
-<p><a href="https://masto.quad.moe">masto.quad.moe</a> is a mastodon instance run by me. It's getting replaced by weeaboo.space</p>
+<p><a href="https://weeaboo.space">weeaboo.space</a> is a pleroma instance run by me. I use it along with some other internet people, we're all nice people, so feel free to join.</p>
-
-<p><a href="https://weeaboo.space">weeaboo.space</a> is a pleroma instance run by me. I use it along with some other internet people, it's invite-only (because Pleroma is still kinda bad at handling many users long-term) but we're all nice people, so feel free to hit us up if you're on the fediverse!</p>
-
-<p><a href="https://twitter.com/anipictures">Anipictures</a> is a bot written by me. Though I don't do much other than fix it if it implodes.</p>
 
 <p><a href="https://git.quad.moe/quad/dotfiles">Dotfiles</a> aren't exactly a project, but many fellow Linux users have asked me to share them in the past. My selection is pretty sparse though.</p>
 
-<p><a href="http://servers.quad.moe/">The rest of the "Quad Network"</a>, I run a boatload of servers. Mail server, gogs, IRC bouncer, etc. Though most of these are only for personal use or invite-only.</p>
-
 <p><a href="https://git.quad.moe/quad/site">This website</a> is also Open Source and available in a git repo, because why not.</p>

pages/social.html

@@ -1,11 +0,0 @@
-<div class="icon-container">
-  <a href="https://weeaboo.space/users/quad"><i class="fa fa-activitypub" aria-hidden="true"></i><br />Fediverse</a>
-  <a href="https://twitter.com/Kuwaddo"><i class="fa fa-twitter" aria-hidden="true"></i><br />Twitter</a>
-  <a href="https://dspr.io/people/f220b440085b0136727e525400007ebd"><i class="fa fa-diaspora" aria-hidden="true"></i><br />diaspora</a>
-  <a href="mailto:contact@quad.moe"><i class="fa fa-envelope" aria-hidden="true"></i><br />E-Mail</a>
-</div>
-<div class="notice-container">
-  <p>Also available via XMPP.</p>
-  <p>Server is <span class="highlight">conversations.im</span> and username is <span class="highlight">quad</span>.</p>
-  <p>Gotta type it out like that, otherwise I get bombarded by spambots.</p>
-</div>

style.css

@@ -54,7 +54,7 @@ a:hover {
 }
   
 #main-container {
-  background-color: rgba(30,25,25,0.75);
+  background-color: rgba(25,25,30,0.75);
   margin-top: 10px;
   padding: 5px;
   box-sizing: border-box;
@@ -69,7 +69,7 @@ a:hover {
 #page {
   width: calc(100% - 5px);
   padding: 15px 5px 8px 5px;
-  height: calc(40vh - 50px);
+  max-height: calc(40vh - 50px);
   overflow-y: auto;
 }
 
@@ -83,7 +83,7 @@ a:hover {
   }
 
   #page {
-    height: calc(50vh - 40px);
+    max-height: calc(50vh - 40px);
   }
 }
   
@@ -145,7 +145,7 @@ a:hover {
 
 .nav-button {
   display: inline-block;
-  border-bottom: solid 3px #5b4b4b;
+  border-bottom: solid 3px #4b4b5b;
   background-color: rgba(30,25,25,0);
   color: #AAA;
   transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
@@ -160,13 +160,13 @@ a:hover {
 }
 
 .nav-button:hover {
-  background-color: rgba(90,75,75,0.75);
+  background-color: rgba(75,75,90,0.75);
   color: #FFF;
   transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
 }
 
 .nav-button.active {
-  border-color: #FF5555;
+  border-color: #5555FF;
   color: #FFF;
   transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out;
 }
@@ -228,7 +228,7 @@ a:hover {
 }
 
 .icon-container a:hover {
-  color: #FF5555;
+  color: #5555FF;
   transition: color 0.25s ease-in-out;
 }
 
@@ -271,5 +271,5 @@ a:hover {
 }
 
 .highlight {
-  color: #FF5555;
+  color: #5555FF;
 }