i fear i shouldve commited earlier

src/components/Card.astro

@@ -13,20 +13,22 @@ const { title } = Astro.props;
 <style>
     .card h2 {
         font-family: "Sharp PC3K-2x", monospace;
-        font-size: 16px;
+        font-size: 1.2em;
-        word-break: break-all;
         text-align: center;
         padding: 8px 0 4px 0;
-        background-color: #181818;
+        background-color: var(--foreground);
-        color: #eeeeee;
+        color: var(--background);
     }
 
     .card {
         width: fit-content;
+        /* the golden rule i think */
+        /* max-width: 800px is my everything */
+        max-width: 800px;
         height: fit-content;
-        background-color: #eeeeee;
+        background-color: var(--background);
-        color: #181818;
+        color: var(--foreground);
-        box-shadow: .25em .25em #181818;
+        box-shadow: .25em .25em var(--foreground);
         padding: 1em;
     }
 </style>

src/components/Projects.astro

@@ -32,12 +32,12 @@ let lastYear = 0;
 </div>
 <style>
     .seperator {
-        background: linear-gradient(transparent calc(50% - 1px), #888888 calc(50%), transparent calc(50% - 1px));
+        background: linear-gradient(transparent calc(50% - 1px), var(--foreground-light) calc(50%), transparent calc(50% - 1px));
         margin: .5em 0;
         text-align: center;
 
         & .year {
-            background: #eeeeee;
+            background: var(--background);
         }
     }
 
@@ -47,7 +47,7 @@ let lastYear = 0;
         cursor: pointer;
     }
     details .open {
-        background-color: #e2e2e2;
+        background-color: var(--background-light);
         padding: .5em 1em;
         margin: .5em 0;
     }
@@ -57,7 +57,7 @@ let lastYear = 0;
     }
     .date {
         flex: 0 0 auto;
-        color: #888888;
+        color: var(--foreground-light);
     }
 
     .links {

src/components/Sidebar.astro

@@ -2,7 +2,7 @@
 import Header from "./Header.astro";
 ---
 
-<aside transition:persist>
+<aside class="sidebar" transition:persist>
     <Header/>
     <nav>
         <ul>
@@ -14,32 +14,31 @@ import Header from "./Header.astro";
     </nav>
 </aside>
 <style>
-    aside {
+    .sidebar {
         position: sticky;
         top: 0;
         left: 0;
         height: 100vh;
 
-        color: #eeeeee;
+        color: var(--background);
-        background-color: #181818;
+        background-color: var(--foreground);
     }
 
     /* mobile */
     @media screen and (max-width: 600px) {
-        aside {
+        .sidebar {
             position: initial;
             height: auto;
         }
     }
 
-    nav ul {
+    .sidebar ul {
         padding-left: 1em;
         margin: 1.5em;
 
         white-space: nowrap;
     }
-
+    .sidebar li {
-    nav li {
         list-style-type: "/ ";
     }
 </style>

src/content.config.ts

@@ -1,7 +1,6 @@
 import { z, defineCollection } from "astro:content";
 import { file } from "astro/loaders";
 
-// yeah, its not the best to have arrays
 const projects = defineCollection({
     loader: file("src/content/projects/projects.yml"),
     schema: z.object({

src/layouts/Layout.astro

@@ -1,7 +1,7 @@
 ---
 interface Props {
     title: string;
-    description: string;
+    description?: string;
 }
 
 const { title, description } = Astro.props;
@@ -21,20 +21,18 @@ import "../styles/main.css";
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="generator" content={Astro.generator} />
-        <meta name="theme-color" content="dark">
         <link rel="shortcut icon" href="/favicon.gif" />
         <link rel="sitemap" href="/sitemap-index.xml" />
         <title>reidlab's site - {title}</title>
-        <meta name="description" content={description} />
+        <meta name="description" content={description ?? "reidlab's website!"} />
 
-        <meta property="og:title" content={`reidlab's site - ${title}`} />
+        <meta property="og:title" content={`reidlab - ${title}`} />
         <meta property="og:description" content={description} />
         <meta property="og:image" content="/preview.png" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content={Astro.url.href} />
 
-        <!-- view transitions. actually fucking magical! -->
+        <!-- view transitions. actually magical! -->
-        <!-- doesn't work without js, maybe add noscript element? -->
         <ClientRouter />
         <ReplacementSwap />
     </head>
@@ -69,30 +67,9 @@ import "../styles/main.css";
     }
 
     .container {
-        background: linear-gradient(
+        background:
-                290deg,
+            conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em,
-                #9161da,
+            var(--gradient);
-                #772089 30%,
-                transparent 0%
-            ),
-            linear-gradient(
-                285deg,
-                #9161da,
-                #5b53c4 45%,
-                transparent 0%
-            ),
-            linear-gradient(
-                280deg,
-                #864364,
-                #cf8293 55%,
-                transparent 0%
-            ),
-            linear-gradient(
-                275deg,
-                #de8155,
-                #e4ae8f 70%,
-                transparent 0%),
-            #181818;
         background-attachment: fixed;
     }
 

src/pages/404.astro

@@ -4,9 +4,9 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 ---
 
-<Layout title="missing" description="a personal website for some computer nerd">
+<Layout title="missing">
     <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 if you're on a mobile device</p>
+        <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.</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>

src/pages/about.astro

@@ -1,14 +1,46 @@
 ---
+import { Image } from "astro:assets";
+
 import Layout from "../layouts/Layout.astro";
 
 import Card from "../components/Card.astro";
+
+import fursonaImage from "../images/fursona.png";
 ---
 
-<Layout title="about me" description="a personal website for some computer nerd">
+<Layout title="about me">
     <Card title="about me">
-        <p>hai! i'm <strong>reid</strong> <i>(any pronouns)</i>, known online as reidlab. i'm a programmer, system administrator, amateur  artist, and terminally online totally-not-a-furry thing</p>
+        <aside class="fursona">
-        <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 in the most evil way i can imagine. :3c</p>
+            <figure>
-        <p>my favorite games include: oneshot, celeste, omori, undertale, deltarune, rain world, yakuza, and roblox</p>
+                <Image src={fursonaImage} alt="my fursona, Riko, a deer-dog hybrid. she has light orange fur with white speckles and accents throughout. a deeper orange color is used on the dog ears and ends of the limbs, and he has small horns. she wears a purple-blue scarf containing a moon symbol, and similarly styled arm/leg warmers on the right arm and left leg one (featuring stars) respectively." loading="eager"/>
-        <p>my favorite music genres include: shoegaze, rock, and hyperpop</p>
+                <figcaption><p>my fursona, drawn by <a href="https://www.tumblr.com/karticatyt" target="_blank">KarticatYT</a></p></figcaption>
+            </figure>
+        </aside>
+        <p>hai! i'm <strong>reid</strong> <i>(any pronouns)</i>, known online as reidlab. i'm a <em>programmer</em>, <em>system administrator</em>, amateur <em>artist</em>, and terminally online furry</p>
+        <p>my favorite programming languages include <em>rust</em>, <em>lua</em>, and <em>typescript</em>. i'm an avid <em>nix</em> user! i don't specialize in creating anything specific, it all just comes into my head as really dumb ideas that i later on execute in the strangest way i can imagine</p>
     </Card>
 </Layout>
+<style>
+    .fursona {
+        float: left;
+        max-width: 30%;
+    }
+    .fursona img {
+        animation: 2s infinite ease-in-out alternate sway;
+    }
+
+    @keyframes sway {
+        from {
+            transform: rotate(1deg);
+        }
+        to {
+            transform: rotate(-1deg);
+        }
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+        .fursona img {
+            animation: none;
+        }
+    }
+</style>

src/pages/index.astro

@@ -5,12 +5,11 @@ import Card from "../components/Card.astro";
 import Badges from "../components/Badges.astro";
 ---
 
-<Layout title="landing" description="a personal website for some computer nerd">
+<Layout title="landing">
     <Card title="hello">
-        <p>hai! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p>
+        <p>hi! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p>
-        <p>i made this website so you can find what i do and have 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 if you're on a mobile device</p>
+        <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress and i want to make it really feel like it is MY site in terms of styling <i>(we are failing at the moment)</i></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>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p>
-        <p>happy browsing, and feel free to reach out for anything! :3</p>
     </Card>
     <Card title="buttons">
         <Badges/>

src/pages/projects.astro

@@ -7,10 +7,9 @@ import Card from "../components/Card.astro";
 import ProjectsList from "../components/Projects.astro";
 ---
 
-<Layout title="projects" description="a personal website for some computer nerd">
+<Layout title="projects">
     <Card title="projects">
-        <p>unfortunately, at the moment, i don't have too much interesting things for you to see. eventually as time goes on, you'll see more and more things appear pop up on here</p>
+        <p>you can always poke around in my git repositories through the <a href="/socials">socials</a> tab for more</p>
-        <p>as always, my socials and contacts are on the left or top side of the screen for you to access my git profiles if you wanna poke around in my git repositories</p>
         <ProjectsList/>
     </Card>
 </Layout>

src/pages/socials.astro

@@ -4,20 +4,21 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 ---
 
-<Layout title="socials" description="a personal website for some computer nerd">
+<Layout title="socials">
     <Card title="socials">
-        <p>other than here, you can find me at:</p>
+        <p>links</p>
         <ul>
-            <li><a href="https://twitter.com/notreidlab" rel="me" target="_blank">twitter</a></li>
             <li><a href="https://bsky.app/profile/reidlab.pink" rel="me" target="_blank">bluesky</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://rateyourmusic.com/~reidlab" rel="me" target="_blank">rateyourmusic</a></li>
             <li><a href="https://git.reidlab.pink/reidlab" rel="me" target="_blank">self-hosted git</a></li>
             <li><a href="https://github.com/reidlabwastaken" rel="me" target="_blank">github</a></li>
             <li><a href="https://www.youtube.com/@reidlab" rel="me" target="_blank">youtube</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>socials</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) this domain</samp></p>
+        <ul>
+            <li><a href="https://discord.com/users/436321340304392222" target="_blank">discord (@reidlab)</a></li>
+            <li><a href="mailto:reidlab@reidlab.pink">email (<samp>reidlab@reidlab.pink</samp>)</a></li>
+        </ul>
+        <p>if you'd like to get in touch with me, fastest way is via discord. i tend to take a while to check up on other contact methods, sorry!!</p>
     </Card>
 </Layout>

src/styles/main.css

@@ -46,16 +46,24 @@
     font-size: 1em;
     line-height: 1.25;
 
-    background-color: #eeeeee;
+    --foreground: #181818;
-    color: #181818;
+    --foreground-light: #888888;
+    --background: #eeeeee;
+    --background-light: #e2e2e2;
+
+    --gradient: linear-gradient(#7da2c8, #90bfc5);
+    --accent: #c6724b;
+
+    background-color: var(--background);
+    color: var(--foreground);
 }
 
 p {
-    margin-top: .7em;
+    margin-top: .8em;
-    margin-bottom: .7em;
+    margin-bottom: .8em;
 }
 i {
-    color: #888888;
+    color: var(--foreground-light);
 }
 h1, h2, h3, h4, h5 {
     margin-top: .8em;
@@ -65,11 +73,28 @@ h1, h2, h3, h4, h5 {
 a {
     text-decoration: underline;
     cursor: pointer;
-    color: #0090e0;
+    color: var(--accent);
     transition: color .1s;
 }
 a:hover {
-    color: #005ae0;
+    color: color-mix(in oklab, var(--accent), #ffffff 40%);
+}
+
+figure {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* the default margin does NOT need to be doin allat */
+    margin: 0 1em;
+}
+figure img {
+    width: 100%;
+    height: auto;
+}
+figcaption {
+    color: var(--foreground-light);
+    text-align: center;
+    font-size: 0.7em;
 }
 
 summary {
@@ -83,7 +108,7 @@ summary::before {
     font-family: monospace;
     content: "\25ba";
     margin-right: 0.5em;
-    color: #888888;
+    color: var(--foreground-light);
 }
 details[open] summary::before {
     transform: rotate(90deg);