Add project page

main.js

@@ -10,7 +10,7 @@ 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/about.html";
+var page3 = "pages/projects.html";
 
 const contentArea = document.getElementById("page");
 

pages/projects.html

@@ -0,0 +1,9 @@
+<p>I'm not an active dev anymore. But I've still got some things going on.</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. I use it and some friends, it's invite-only 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>

style.css

@@ -191,6 +191,24 @@ a:hover {
   transition: color 0.25s ease-in-out;
 }
 
+a.mastodon {
+  display: block;
+  margin: 15px auto;
+  filter: grayscale(100%);
+  width: 35%;
+  transition: all ease-in-out 0.1s;
+  font-size: 0;
+}
+
+.mastodon:hover {
+    filter: grayscale(0%);
+    transition: all ease-in-out 0.1s;
+}
+
+.mastodon img {
+    max-width: 100%;
+}
+
 /* Page contents */
 
 #page p {
@@ -216,4 +234,4 @@ a:hover {
 
 #page h1:first-child {
   margin-top: 0;
-}
+}