init

src/components/Badges.astro

@@ -0,0 +1,42 @@
+---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+
+const images = import.meta.glob<{ default: ImageMetadata }>("../assets/badges/*.*");
+
+interface Props {
+    badges: {
+        href?: string,
+        title?: string,
+        alt: string,
+        imagePath: string
+    }[]
+}
+
+const { badges } = Astro.props;
+---
+
+<div class="badges">
+    {badges.map((badge) => {
+        // probably could be a lot cleaner, but i dont care
+        if (!images[badge.imagePath]) throw new Error(`"${badge.imagePath}" does not exist in glob for wildcard in badges`);
+        if (badge.href !== undefined) return <a href={badge.href} target="_blank" rel="noreferrer noopener"><Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy"/></a>;
+        else return <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy"/>;
+    })}
+</div>
+<style>
+    .badges {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: .2em;
+
+        margin-top: 1.25em;
+        margin-bottom: 1.25em;
+
+        & a {
+            width: 88px;
+            height: 31px;
+        }
+    }
+</style>

src/components/Card.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+    title: string
+}
+
+const { title } = Astro.props;
+---
+
+<div class="card">
+    <h2>{title}</h2>
+    <slot/>
+</div>
+<style>
+    .card h2 {
+        font-family: "Sharp PC3K-2x", monospace;
+        font-size: 16px;
+        word-break: break-all;
+        text-align: center;
+        padding: 8px 0 4px 0;
+        background-color: #181818;
+        color: #eeeeee;
+    }
+
+    .card {
+        width: fit-content;
+        height: fit-content;
+        background-color: #eeeeee;
+        color: #181818;
+        box-shadow: .25em .25em #181818;
+        padding: 1em;
+    }
+</style>

src/components/Header.astro

@@ -0,0 +1,9 @@
+---
+import figlet from "figlet";
+
+const message = await figlet.text("reidlab");
+---
+
+<header transition:persist>
+    <pre aria-label="reidlab">{message}</pre>
+</header>

src/components/Intro.astro

@@ -0,0 +1,63 @@
+---
+---
+
+<div class="load" aria-hidden="true">
+    <div class="load2">
+        <div class="load3">
+            <div class="loading">welcome...</div>
+        </div>
+    </div>
+</div>
+<style>
+    .load {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 101;
+        background-color: #181818;
+        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .6s loader forwards;
+    }
+
+    .load2 {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 102;
+        background: linear-gradient(165deg, rgba(142,241,255,1) 0%, rgba(193,87,221,1) 28%, rgba(155,153,255,1) 71%, rgba(223,193,255,1) 100%);
+        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .55s loader forwards;
+    }
+
+    .load3 {
+        position: fixed;
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+        z-index: 103;
+        background-color: #181818;
+        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .5s loader forwards;
+    }
+
+    .loading {
+        position: absolute;
+        bottom: 50%;
+        text-align: center;
+        width: 100vw;
+        color: #eeeeee;
+        font-style: italic;
+        font-size: clamp(0px, calc(4vw), 99em);
+        user-select: none;
+        z-index: 104;
+    }
+
+    @keyframes loader {
+        0% {
+            width: 100vw;
+            display: block;
+        }
+
+        100% {
+            width: 0vw;
+            display: none;
+        }
+    }
+</style>

src/components/Sidebar.astro

@@ -0,0 +1,45 @@
+---
+import Header from "./Header.astro";
+---
+
+<aside transition:persist>
+    <Header/>
+    <nav>
+        <ul>
+            <li><a href="/">landing</a></li>
+            <li><a href="/about">about</a></li>
+            <li><a href="/socials">socials</a></li>
+            <li><a href="/projects">projects</a></li>
+        </ul>
+    </nav>
+</aside>
+<style>
+    aside {
+        position: sticky;
+        top: 0;
+        left: 0;
+        height: 100vh;
+
+        color: #eeeeee;
+        background-color: #181818;
+    }
+
+    /* mobile */
+    @media screen and (max-width: 600px) {
+        aside {
+            position: initial;
+            height: auto;
+        }
+    }
+
+    nav ul {
+        padding-left: 1em;
+        margin: 1.5em;
+        
+        white-space: nowrap;
+    }
+
+    nav li {
+        list-style-type: "/ ";
+    }
+</style>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,98 @@
+---
+interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props;
+
+import { ViewTransitions } from "astro:transitions";
+import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
+
+import Sidebar from "../components/Sidebar.astro";
+import Intro from "../components/Intro.astro";
+
+import "modern-normalize";
+import "../styles/main.css";
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="sitemap" href="/sitemap-index.xml" />
+        <title>reidlab's site - {title}</title>
+        <meta name="description" content={description} />
+
+        <!-- view transitions. actually fucking magical! -->
+        <!-- doesn't work without js, maybe add noscript element? -->
+        <ViewTransitions />
+        <ReplacementSwap />
+    </head>
+    <body>
+        <Intro />
+
+        <Sidebar />
+        <main
+            data-vtbot-replace="main"
+            transition:name="main"
+            transition:animate="initial"
+        >
+            <slot />
+        </main>
+    </body><style is:global>
+        body {
+            display: grid;
+            grid-template-columns: min-content auto;
+            grid-template-rows: auto auto;
+            grid-auto-flow: row;
+        }
+
+        /* mobile */
+        @media screen and (max-width: 600px) {
+            body {
+                grid-template-columns: auto auto;
+                grid-template-rows: min-content auto;
+                grid-auto-flow: column;
+            }
+        }
+
+        main {
+            background: linear-gradient(
+                    275deg,
+                    #f38ba8,
+                    #eba0ac 30%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    260deg,
+                    #74c7ec,
+                    #89b4fa 45%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    270deg,
+                    #fab387,
+                    #f9e2af 55%,
+                    transparent 0%
+                ),
+                linear-gradient(
+                    265deg,
+                    #a6e3a1,
+                    #94e2d5 70%,
+                    transparent 0%),
+                #181818;
+            background-attachment: fixed;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            gap: 1em;
+            padding: 1em;
+            min-height: 100vh;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</html>

src/pages/404.astro

@@ -0,0 +1,13 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Card from "../components/Card.astro";
+---
+
+<Layout title="missing" description="a personal website for some computer nerd">
+    <Card title="missing">
+        <p>the file or page you're looking for is missing or no longer at this address. you may be able to find what you're looking for using the navigation panel on the left or top side of your screen</p>
+        <p>if you cannot find what you need, but you expected it to be here, submit a request using my contact information</p>
+        <p>would you like to head back to the <a href="/">main page</a>?</p>
+    </Card>
+</Layout>

src/pages/about.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Card from "../components/Card.astro";
+---
+
+<Layout title="about me" description="a personal website for some computer nerd">
+    <Card title="about me">
+        <p>sup! i'm <strong>reid</strong> <i>(he/they)</i>, known online as reidlab. i'm a programmer, system administrator and chronically online thing.</p>
+        <p>currently all i do is just program, but soon i want to get into art and / or music</p>
+        <p>my favorite programming languages include <em>rust</em>, <em>lua</em>, <em>nix</em>, and <em>typescript</em>. i don't specialize in creating anything specific, it all just comes into my head as really dumb ideas that i later on execute</p>
+        <p>some of my interests include games like oneshot, celeste, omori, undertale, deltarune, roblox, nerdy things like programming, sysadmin, and music genres such as shoegaze, rock, and hyperpop.</p>
+    </Card>
+</Layout>

src/pages/index.astro

@@ -0,0 +1,109 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Card from "../components/Card.astro";
+import Badges from "../components/Badges.astro";
+---
+
+<Layout title="landing" description="a personal website for some computer nerd">
+    <Card title="hello">
+        <p>yo, i'm <strong>reid</strong> <i>(he/they)</i>, welcome to my site</p>
+        <p>i made this website so you can find what i do directly, instead of navigating through millions of social media profiles, websites, so on and so forth, just to see who a person is. most of what is on this website is pretty self-explainatory, and you can find most if not all the pages on the left or top side of the screen</p>
+        <p>this site as a whole is still a bit of a work in progress, i still need to add more things to it <i>(a blog, perhaps?)</i>, and i'm trying to finally make the website more lightweight, mobile friendly, and accessible <i>(not using tables for my main layout, Jesus)</i>, and it seems to work pretty damn well! all content you see on the website is statically generated and javascript is only used in places where it is not required, and where i do have javascript, i try to make it minimal</p>
+        <p>happy browsing, and feel free to reach out for anything! :3</p>
+    </Card>
+    <Card title="buttons">
+        <Badges badges={[
+            {
+                imagePath: "../assets/badges/blinchik.gif",
+                alt: "blinchik",
+                title: "best site on the internet!",
+                href: "https://yugoslavia.best"
+            },
+            {
+                imagePath: "../assets/badges/poweredbybob.gif",
+                alt: "powered by bob"
+            },
+            {
+                imagePath: "../assets/badges/miku.gif",
+                alt: "this site is miku approved"
+            },
+            {
+                imagePath: "../assets/badges/paws.gif",
+                alt: "made with my own two paws"
+            },
+            {
+                imagePath: "../assets/badges/nixos.png",
+                alt: "powered by nixos",
+                title: "free me from this prison",
+                href: "https://nixos.org"
+            },
+            {
+                imagePath: "../assets/badges/notitg.png",
+                alt: "notitg",
+                title: "play notitg!",
+                href: "https://noti.tg"
+            },
+            {
+                imagePath: "../assets/badges/kriswheretfarewe.png",
+                alt: "kris where tf are we"
+            },
+            {
+                imagePath: "../assets/badges/showmeyourheart.gif",
+                alt: "final fantasy geometry dash",
+                title: "▼▼  ▼▼  »  ▲▲▲▲   ▲▲▲▲  ‹  ▼▼  ▼▼  ›  ▲▲▲  ▲▲▲",
+                href: "https://gdbrowser.com/76767195"
+            },
+            {
+                imagePath: "../assets/badges/acab.gif",
+                alt: "all cops are bastards"
+            },
+            {
+                imagePath: "../assets/badges/w3cbad.gif",
+                alt: "w3c approved bad html markup"
+            },
+            {
+                imagePath: "../assets/badges/internetarchive.gif",
+                alt: "internet archive",
+                href: "https://archive.org"
+            },
+            {
+                imagePath: "../assets/badges/animeisgay.gif",
+                alt: "anime is gay as hell, but i approve"
+            },
+            {
+                imagePath: "../assets/badges/halflife.gif",
+                alt: "half life",
+                title: "gorgon freeman...."
+            },
+            {
+                imagePath: "../assets/badges/vscode.png",
+                alt: "made with with vscode",
+                href: "https://code.visualstudio.com/"
+            },
+            {
+                imagePath: "../assets/badges/oat100.gif",
+                alt: "i got 100% on.zone",
+                href: "https://oat.zone"
+            },
+            {
+                imagePath: "../assets/badges/oat.gif",
+                alt: "oat.zone",
+                title: "cool person!",
+                href: "https://oat.zone"
+            },
+            {
+                imagePath: "../assets/badges/tidalwave.gif",
+                alt: "tidal wave geometry dash",
+                title: "<<<TIDAL<<<<<<\n>>>>>>>WAVE>>>",
+                href: "https://gdbrowser.com/86407629"
+            },
+            {
+                imagePath: "../assets/badges/singasongaboutlife.gif",
+                alt: "sing a song about life",
+                title: "sing a song about life",
+                href: "https://vyletpony.com/music"
+            }
+        ]}></Badges>
+    </Card>
+</Layout>

src/pages/projects.astro

@@ -0,0 +1,12 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Card from "../components/Card.astro";
+---
+
+<Layout title="projects" description="a personal website for some computer nerd">
+    <Card title="projects">
+        <p>unfortunately, at the moment, i don't have too much interesting things for you to see. eventually when i get my shit together, you'll see more and more things appear on here</p>
+        <p>as always, my socials and contacts are on the left or top side of the screen for you to access if you wanna poke around in my git repositories</p>
+    </Card>
+</Layout>

src/pages/robots.txt.ts

@@ -0,0 +1,10 @@
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = () => new Response(
+    `
+User-agent: *
+Allow: /
+
+Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
+    `.trim(), { status: 200 }
+);

src/pages/socials.astro

@@ -0,0 +1,22 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+import Card from "../components/Card.astro";
+---
+
+<Layout title="socials" description="a personal website for some computer nerd">
+    <Card title="socials">
+        <p>other than here, you can find me at:</p>
+        <ul>
+            <li><a href="https://twitter.com/notreidlab" rel="me" target="_blank">twitter</a></li>
+            <li><a href="https://wetdry.world/@reidlab" rel="me" target="_blank">mastodon</a></li>
+            <li><a href="https://discord.com/users/436321340304392222" target="_blank">reidlab @ discord</a></li>
+            <li><a href="https://www.youtube.com/@reidlab" rel="me" target="_blank">youtube</a></li>
+            <li><a href="https://rateyourmusic.com/~reidlab" rel="me" target="_blank">rateyourmusic</a></li>
+            <li><a href="https://git.reidlab.online/reidlab" rel="me" target="_blank">self-hosted git</a></li>
+            <li><a href="https://github.com/reidlabwastaken" rel="me" target="_blank">github</a></li>
+        </ul>
+        <p>if you'd like to get in touch with me, the only <em>reliable</em> way is via discord. i tend to take a while or sometimes miss other contact methods</p>
+        <p>if you do not want to directly contact me through discord or want to contact about more serious inquries, you can try the email address <samp>reidlab (at) reidlab (dot) online</samp></p>
+    </Card>
+</Layout>

src/styles/main.css

@@ -0,0 +1,80 @@
+@font-face {
+    font-family: "Akira Expanded";
+    font-style: normal;
+    font-display: swap;
+    src: url("/fonts/akira-expanded.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "Hack";
+    font-style: normal;
+    font-weight: normal;
+    font-display: swap;
+    src: url("/fonts/hack-regular.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Hack";
+    font-style: italic;
+    font-weight: normal;
+    font-display: swap;
+    src: url("/fonts/hack-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Hack";
+    font-style: normal;
+    font-weight: bold;
+    font-display: swap;
+    src: url("/fonts/hack-bold.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Hack";
+    font-style: italic;
+    font-weight: bold;
+    font-display: swap;
+    src: url("/fonts/hack-bolditalic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Sharp PC3K-2x";
+    font-style: normal;
+    font-display: swap;
+    src: url("/fonts/sharp-pc3k-2x.woff") format("woff");
+}
+
+@font-face {
+    font-family: "Sharp PC3K";
+    font-style: normal;
+    font-display: swap;
+    src: url("/fonts/sharp-pc3k.woff") format("woff");
+}
+
+:root {
+    font-family: "Hack", monospace;
+    font-size: 1em;
+    line-height: 1.25;
+
+    background-color: #eeeeee;
+    color: #181818;
+}
+
+p {
+    margin-top: .7em;
+    margin-bottom: .7em;
+}
+i {
+    color: #888888;
+}
+h1, h2, h3, h4, h5 {
+    margin-top: .8em;
+    margin-bottom: .8em;
+}
+
+a {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #0090e0;
+    transition: color .1s;
+}
+a:hover {
+    color: #005ae0;
+}