Add more MPP.net IDs

astro.config.mjs

@@ -10,4 +10,4 @@ export default defineConfig({
   integrations: [tailwind(), react(), mdx()],
   output: "server",
   adapter: vercel()
-});
+});

package.json

@@ -10,21 +10,21 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/mdx": "^1.0.3",
     "@astrojs/node": "^6.0.0",
-    "@astrojs/react": "^3.0.0",
+    "@astrojs/react": "^3.0.2",
     "@astrojs/tailwind": "^5.0.0",
-    "@astrojs/vercel": "^4.0.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "astro": "^3.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "@astrojs/vercel": "0.0.0-symbolic-link-20230901124103",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "astro": "^3.0.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sharp": "^0.32.5",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.6.0",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0"
   }

src/components/ContentBox.astro

@@ -1,5 +1,5 @@
 <div
-    class="m-2 rounded-2xl bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08]"
+    class="m-2 rounded-md bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08]"
 >
     <div class="content-box box-border">
         <slot />

src/components/Footer.astro

@@ -2,7 +2,7 @@
 const currentYear = new Date().getUTCFullYear();
 ---
 
-<footer class="fixed bottom-0 z-20 w-full backdrop-blur-sm">
+<footer class="fixed bottom-0 z-20 w-full backdrop-blur-sm h-[3.75rem] sm:h-14">
     <div
         class="p-4 pb-12 text-lg text-gray-50 mx-auto w-full max-w-screen-xl border-t border-[#ffffff10] shadow-lg"
     >
@@ -10,7 +10,7 @@ const currentYear = new Date().getUTCFullYear();
             &copy; Hri7566 {currentYear} All rights reserved
         </p>
         <a
-            class="float-right text-sky-500 hover:text-sky-400 hover:underline transition-colors"
+            class="float-right text-sky-500 hover:text-sky-400 hover:underline transition-colors hidden sm:flex"
             href="https://www.buymeacoffee.com/hri7566">☕ Buy me a coffee!</a
         >
     </div>

src/components/Hamburger.astro

@@ -0,0 +1,15 @@
+<div class="hamburger">
+    <span class="line"></span>
+    <span class="line"></span>
+    <span class="line"></span>
+</div>
+
+<style>
+    .hamburger {
+        @apply cursor-pointer mt-5 mr-3;
+    }
+
+    .line {
+        @apply block w-5 h-0.5 mb-1.5 bg-[#ffffff] rounded-3xl;
+    }
+</style>

src/components/LinkBox.astro

@@ -10,20 +10,20 @@ const { title, href, center, color } = Astro.props;
 ---
 
 <div
-    class="m-2 rounded-2xl bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff10]"
+    class="m-2 rounded-md bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff10]"
 >
     <div class="box-border">
         <h3
             class={`text-2xl font-bold text-neutral-300 ${
                 center ? "ml-auto mr-auto text-center" : ""
             }`}
-            style={{ color: color }}
         >
             {
                 href ? (
                     <a
                         href={href}
-                        class="text-sky-600 transition-colors duration-300 ease-in-out hover:text-sky-400 hover:underline"
+                        class="transition-colors duration-300 ease-in-out hover:text-sky-400 hover:underline"
+                        style={{ color: color ? color : "text-sky-600" }}
                     >
                         {title}
                     </a>

src/components/MainHeader.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import Nav from "./Nav.astro";
+import Nav from "./nav/Nav.astro";
 
 interface Props {
     logo?: string;
@@ -11,18 +11,27 @@ const { logo } = Astro.props;
 
 <div
     id="main-header"
-    class="backdrop-blur-sm sticky top-0 z-[100] h-24 p-3 border-b border-[#ffffff10] mx-auto w-full max-w-screen-xl shadow-lg"
+    class="backdrop-blur-sm sticky top-0 z-[100] h-[4.5rem] sm:h-24 p-3 border-b border-[#ffffff10] mx-auto w-full max-w-screen-xl shadow-lg"
 >
     <a href="/" class="float-left flex cursor-pointer items-end">
         <Image
+            class="hidden sm:flex"
             src={logo || "/logo.png"}
             alt="Logo"
             width="64"
             height="64"
             style="image-rendering: pixelated;"
         />
+        <Image
+            class="flex sm:hidden"
+            src={logo || "/logo.png"}
+            alt="Logo"
+            width="48"
+            height="48"
+            style="image-rendering: pixelated;"
+        />
         <h1
-            class="text-5xl text-gray-50 transition-colors duration-300 ease-in-out hover:text-gray-300"
+            class="text-3xl md:text-5xl text-gray-50 transition-colors duration-300 ease-in-out hover:text-gray-300"
         >
             hri7566.info
         </h1>

src/components/Nav.astro

@@ -1,8 +0,0 @@
----
-import NavLink from "./NavLink.astro";
----
-
-<div class="flex">
-    <NavLink title="Home" href="/" />
-    <NavLink title="About" href="/about" />
-</div>

src/components/NavLink.astro

@@ -1,23 +0,0 @@
----
-interface Props {
-    title: string;
-    href: string;
-}
-
-const { title, href } = Astro.props;
----
-
-<div
-    class="m-2 rounded-2xl px-4 py-4 hover:shadow-md hover:ring-1 hover:ring-inset hover:ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff10]"
->
-    <div class="box-border">
-        <h3 class="text-2xl font-bold">
-            <a
-                href={href}
-                class="text-sky-600 transition-colors duration-300 ease-in-out hover:text-sky-400 hover:underline"
-            >
-                {title}
-            </a>
-        </h3>
-    </div>
-</div>

src/components/nav/Nav.astro

@@ -0,0 +1,39 @@
+---
+import Hamburger from "../Hamburger.astro";
+import NavLink from "./NavLink.astro";
+---
+
+<div class="hidden sm:flex">
+    <NavLink title="Home" href="/" />
+    <NavLink title="About" href="/about" />
+</div>
+
+<div class="flex sm:hidden">
+    <script>
+        window.hamburger = function () {
+            const navLinks = document.getElementById("nav-links-mobile");
+            if (!navLinks) return;
+            if (navLinks.classList.contains("hidden")) {
+                navLinks.classList.remove("hidden");
+            } else {
+                navLinks.classList.add("hidden");
+            }
+        };
+    </script>
+
+    <div onclick="
+    hamburger()
+    ">
+        <Hamburger />
+    </div>
+
+    <div
+        id="nav-links-mobile"
+        class="hidden transition-opacity right-5 top-14 absolute bg-[#ffffff10] px-8 rounded-md shadow-md ring-1 ring-inset ring-[#ffffff10] backdrop-blur-xl"
+    >
+        <div class="flex flex-col">
+            <NavLink title="Home" href="/" />
+            <NavLink title="About" href="/about" />
+        </div>
+    </div>
+</div>

src/components/nav/NavLink.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+    title: string;
+    href: string;
+}
+
+const { title, href } = Astro.props;
+---
+
+<a
+    href={href}
+    class="m-2 rounded-md px-4 py-4 hover:shadow-md hover:ring-1 hover:ring-inset hover:ring-[#ffffff10] text-sky-600 transition-colors hover:text-sky-400 hover:underline duration-300 ease-in-out hover:bg-[#ffffff10]"
+>
+    <h3 class="text-2xl font-bold box-border">
+        {title}
+    </h3>
+</a>

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />

src/pages/about.astro

@@ -25,13 +25,9 @@ import LinkBox from "~/components/LinkBox.astro";
         </p>
         <br />
         <p class="text-gray-300">
-            I'm a major contributor (debatably) to MPP/MPPClone and have created
+            I'm a major contributor (debatably) to MPP/MPP.net and have created
             many scripts and projects centered around it. You can read more
-            about it <a
-                href="https://github.com/LapisHusky/mppclone"
-                class="text-sky-500 hover:text-sky-400 hover:underline transition-colors"
-                >here</a
-            >.
+            about it <a href="https://github.com/Hri7566/mppclone">here</a>.
         </p>
     </ContentBox>
 
@@ -60,8 +56,10 @@ import LinkBox from "~/components/LinkBox.astro";
         <LinkBox title="YouTube" href="https://youtube.com/hri7566">
             @hri7566
         </LinkBox>
-        <LinkBox title="MPPClone IDs">
+        <LinkBox title="MPP.net IDs">
             ead940199c7d9717e5149919 a2516b4d88f22b45056f270b
+            85da6b358674e720efa05b71 8d3f507eecf7f8f2b0ae3479
+            2ffc3744fbc1bc6c6ef4a330 5fd68beb48a7cca92bc536c0
         </LinkBox>
     </div>
 
@@ -71,15 +69,10 @@ import LinkBox from "~/components/LinkBox.astro";
             >Q: What is this "MPP" thing you keep talking about?</strong
         >
         <p class="text-gray-300">
-            It's a <a
-                href="https://mppclone.com"
-                class="text-sky-500 hover:text-sky-400 hover:underline transition-colors"
-                >website</a
-            > I made a lot of scripts for in the past. It's an online piano in
-            the corner of the internet that interesting people used to be in.
-            <a href="/info/mpp" class="text-sky-500 hover:text-sky-400 hover:underline transition-colors">
-                More info here.
-            </a>
+            It's a <a href="https://multiplayerpiano.net">website</a> I made a
+            lot of scripts for in the past. It's an online piano in the corner
+            of the internet that interesting people used to be in.
+            <a href="/info/mpp"> More info here.</a>
         </p>
         <br />
 
@@ -113,9 +106,41 @@ import LinkBox from "~/components/LinkBox.astro";
         <br />
 
         <strong class="text-gray-300 font-bold text-lg"
-            >Q: What does your username mean?</strong
+            >Q: What games do you play?</strong
         >
-        <p class="text-gray-300">I'm not really sure, it's older than me.</p>
+        <p class="text-gray-300">
+            A: Minecraft and whatever is in my steam library
+        </p>
+        <br />
+
+        <strong class="text-gray-300 font-bold text-lg"
+            >Q: I'm from SC3. What do you own?</strong
+        >
+        <p class="text-gray-300">A: I own XCL, which owns XNL.</p>
+        <br />
+
+        <strong class="text-gray-300 font-bold text-lg"
+            >Q: What happened to the background on this site?</strong
+        >
+        <p class="text-gray-300">
+            A: It was suggested by a few people that I remove it. I like the
+            darkness, anyways.
+        </p>
+        <br />
+
+        <strong class="text-gray-300 font-bold text-lg"
+            >Q: I'm part of your family and you sent a link to me. What is this
+            stuff?</strong
+        >
+        <p class="text-gray-300">A: It's what I do in my free time.</p>
+        <br />
+
+        <strong class="text-gray-300 font-bold text-lg"
+            >Q: What runs this website?</strong
+        >
+        <p class="text-gray-300">
+            A: <a href="https://astro.build">Astro</a>
+        </p>
     </ContentBox>
 
     <div class="py-10"></div>

src/pages/index.astro

@@ -15,41 +15,84 @@ import LinkBox from "~/components/LinkBox.astro";
                 title="GitHub"
                 href="https://github.com/Hri7566"
                 center
-                color="#ffffff"
+                color="#e6edf3"
             />
             <LinkBox
                 title="GitLab"
                 href="https://gitlab.com/Hri7566"
                 center
-                color="#ffffff"
+                color="#6e5ac0"
+            />
+            <LinkBox
+                title="XCL"
+                href="https://git.hri7566.info/Hri7566"
+                center
+                color="#ff9900"
             />
             <LinkBox
                 title="𝕏"
                 href="https://twitter.com/Hri7566"
                 center
-                color="#ffffff"
+                color="#1a8cd8"
             />
             <LinkBox
                 title="YouTube"
                 href="https://youtube.com/hri7566"
                 center
-                color="#ffffff"
+                color="#ff0000"
             />
             <LinkBox
                 title="Odysee"
                 href="https://odysee.com/@hri7566:6"
                 center
-                color="#ffffff"
+                color="#a60a43"
             />
         </div>
     </div>
 
     <PageBreak title="Projects" />
-    <div class="sm:ml-auto sm:mr-auto sm:w-2/3">
+    <div class="sm:ml-auto sm:mr-auto sm:w-3/4">
         <div
             id="projects"
-            class="mx-5 my-3 grid grid-cols-1 pb-20 sm:grid-cols-2 xl:grid-cols-3"
+            class="mx-5 my-3 grid grid-cols-1 pb-20 sm:grid-cols-2 xl:grid-cols-4"
         >
+            <LinkBox title="cc-ts" href="https://github.com/Hri7566/cc-ts">
+                A template for using TypeScript and roblox-ts with
+                ComputerCraft.
+            </LinkBox>
+            <LinkBox title="XCL" href="https://xcl.hri7566.info">
+                My science and engineering company based around the <a
+                    href="https://sc3.io">SwitchCraft 3</a
+                > modded Minecraft server.
+            </LinkBox>
+            <LinkBox
+                title="BadPaint"
+                href="https://github.com/Hri7566/BadPaint"
+            >
+                The worst paint program I have ever made. Coincidentally, it's
+                also the only paint program I have ever made.
+            </LinkBox>
+            <LinkBox
+                title="Singleplayer Piano"
+                href="https://singleplayerpiano.com"
+            >
+                Tired of using Multiplayer Piano only to find other people are
+                frustrating you?
+            </LinkBox>
+            <LinkBox
+                title="Skyrim Mouse Locker"
+                href="https://github.com/Hri7566/SkyrimMouseLocker"
+            >
+                I finally felt fed up with the stupid Skyrim multi-monitor
+                cursor bug so I did the most simple thing I could do to mitigate
+                it.
+            </LinkBox>
+            <LinkBox
+                title="mpp-hats"
+                href="https://github.com/the-dev-channel/mpp-hats"
+            >
+                Custom hats script for MPP. Hat textures made by yours truly.
+            </LinkBox>
             <LinkBox
                 title="mpp-user-archive"
                 href="https://github.com/Hri7566/mpp-user-archive"
@@ -57,18 +100,10 @@ import LinkBox from "~/components/LinkBox.astro";
                 Multiplayer Piano database service monorepo. This project took
                 over a month to make.
             </LinkBox>
-            <LinkBox
-                title="Cosmic"
-                href="https://github.com/Hri7566/cosmic"
-                color="#1d0054"
-            >
-                Bot for Discord and MPP. Lots of baking involved.
+            <LinkBox title="Cosmic" href="https://github.com/Hri7566/cosmic">
+                Chat bot for Discord and MPP. Lots of baking involved.
             </LinkBox>
-            <LinkBox
-                title="HMPP"
-                href="https://mpp.hri7566.info"
-                color="#8d3f50"
-            >
+            <LinkBox title="HMPP" href="https://mpp.hri7566.info">
                 A clone of Multiplayer Piano with a completely original backend
                 server with a fresh style.
             </LinkBox>
@@ -78,12 +113,9 @@ import LinkBox from "~/components/LinkBox.astro";
 				source and currently under development.
 			</LinkBox> */
             }
-            <LinkBox
-                title="MPPClone"
-                href="https://github.com/LapisHusky/mppclone"
-            >
-                I made some contributions to this site, such as the ability to
-                hide cursors.
+            <LinkBox title="MPP.net" href="https://github.com/Hri7566/mppclone">
+                I made major contributions to this site's development over the
+                years, even if it wasn't through code.
             </LinkBox>
             {
                 /* <LinkBox