+ ABTMTR
+
+ Scroll down for more!
+Welcome 👋
- Get started by editing
- src/app/page.tsx
+ I'm MeowcaTheoRange (miau-kuh-thee~oh-ray~nj).
+
+ I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
he/they/it
+Male
+Minor
+Autistic
+I run this domain and all of the services on it.
++ My favourite hobbies are programming,{" "} + drawing,{" "} + occasionally making small bits of music,{" "} + obsessing over fonts, and{" "} + being pedantic. +
++ You may see parts of all of these aspects within this website. Please + tread carefully. +
++ Some other important things I think you should know about me are... +
+-
+
- Please be patient with me. +
- + Please be understanding! Ask me for clarification if required. + +
- + I don't really like small talk - keep if brief if you want to check + up on me, please. + +
- + I'm not one to pick sides at first, usually. Being an "all or + nothing" kind of person isn't my thing, and if you don't like that, + feel free to tell me why your side is good. + +
- + I like getting tangled up in drama, but I'm not a spiteful person - + I'm usually only in it for the correlations. + +
- + You may see me hyperfixate on random stuff, like{" "} + + certain fonts + {" "} + or public transit. + +
I believe in...
+-
+
- Self-hosting important or personal infrastructure +
- Free and open-source material +
- Privacy as a basic human right +
- Trans rights & gay rights +
- + Autistic superiority /joke + +
Check me out on:
+What's on this domain?
++ Here's a quick list of all of the web services on this domain right + now. +
+Planned services
+What I would like to put on this domain sometime in the future.
++ L10n (localization) +
+What services I'd like to put on my server computer at home.
+Current Obsessions
++ I'm into a lot of stuff. As of this site's publication, you'll + probably see me indulging in: +
+-
+
- + + @winter@translunar.academy + + 's fic{" "} + + Ætherglow + + +
- Discussion of autism +
- Discussion and usage of the Fediverse +
- + + Homestuck + {" "} + and related properties + +
- + Adventures on{" "} + + MSPFA + + , sometimes + +
- Using React or Next.js +
- Creating alternatives to both because I'm just that cool +
- Anti-JS practices +
- Art and drawing +
- Using Blender +
- The MetroTransit bus system +
and possibly much more that I can't even remember.
++ Want to know more? Below is my display of some of these things in + sections. Enjoy! +
+Programming
+I like using what some call "programming languages".
++ What do I call them? None of your business. All you have to know is + that I use TypeScript, React, and{" "} + Haxe. +
++ I also know JavaScript and some Bash{" "} + in case of emergency. +
+Fonts
+I also like UI and UI design. This includes fonts, quite a bit.
++ Currently, I'm liking the look of Renogare, Lexend Deca, + and Space Grotesk. This may change. +
++ I first used Space Grotesk for general-purpose + applications. This was on my old portfolio site and it's on TrollCall + right now. I think it just fits TrollCall; it's quirky, geometric, a + bit alien - it's right at home with the intended vibe of the site. +
++ On this website, I'm using Renogare as a header/title + font, and Lexend Deca for everything else. +
++ I found Renogare while playing{" "} + Celeste - yaknow, the game where you climb a huge + mountain for a few days? +
++ Renogare is a bold, geometric, display-optimized + font. It's super cool and I am in love with how it looks. +
++ Lexend Deca is a very strong second to{" "} + Renogare, primarily used when I can't use{" "} + Renogare, shouldn't use Renogare, or + am using Renogare but need something that{" "} + isn't Renogare. +
++ Lexend Deca is similar-looking to{" "} + Renogare, with a few major differences.{" "} + Lexend Deca loses the geometry, instead opting for a + beamed I, flat-top A, M, N, et al. t loses its curve, instead going + straight down. +
++ It also has different weights and proper OTF support - plus a bonus + series of different letter spacing choices under the{" "} + Lexend name. Deca is the tightest, + which is why I chose it. +
++ All in all, Lexend Deca is a good general-purpose + font, while still leaving room for Renogare to be a + great display font. +
++ AaIiLlMm +
++ Renogare +
++ AaIiLlMm +
++ Lexend Deca +
++ AaIiLlMm +
++ Space Grotesk +
+Artistry
++ Artistry usually includes writing and drawing. These are the purposes + for{" "} + + my blog + {" "} + and{" "} + + my public gallery + + . +
+Branding
++ I don't really have strict branding guidelines, but I do have a few + important rules if you would like to refer to me in a professional or + formal context. +
+Name
++ If you would like to refer to me online, you'll usually be able to use + my username MeowcaTheoRange. If that's too long, you can always + shorten it to MTR. +
++ Please make sure to keep the styling. It's MeowcaTheoRange, not{" "} + MeowcatHeOrange, MeowcaTheOrange, + nor Meowca Theo Range. +
++ The styling meowcatheorange is OK if necessary. +
++ If you would like to refer to me in a more professional context, my + name Iszac or the moniker Theo Range{" "} + will work just as well. +
+
+ If you are a local organization and would like to refer to me by my
+ legal name, please{" "}
+
+ contact me
+ {" "}
+ and we can probably figure something out.
+
+ Local means within Minnesota, by the way.
+
Colours
++ If you would like to use colours to refer to me, whether that be the + primary color on a card or the color of my name, I recommend you use + these colours: +
-- Docs -> -
-Find in-depth information about Next.js features and API.
- - - -- Learn -> -
-Learn about Next.js in an interactive course with quizzes!
- - - -- Templates -> -
-Explore the Next.js 13 playground.
- - - -- Deploy -> -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -+ Primary +
+ Primary Negative +
+ Iszac Blue is literally Rocco Orange but
+ inverted. This colour is named after Iszac, an OC of
+ mine that I came up with, for the setting of Ætherglow.
+
+
+ ...and then I shortly named myself after said character...
+
+
+ If you were to use any of these colours to represnt me as a{" "}
+ person, use this one.
+
+ Rocco Orange is my favourite colour orange, but now more red.
+ The name comes from my character Rocco, whose hair is
+ this colour - though this colour has been applied to more characters
+ like BLEND-1020.
+ If you were to use any of these colours to represnt me as an{" "}
+ entity, use this one whenever possible.
+
+
+ Secondary +
+ Secondary Negative +
+ Grape Soda represents my love for grape soda.
+
+ My favourite is Fanta Grape. :]
+
+ Avalonian Waste is also literally Grape Soda{" "} + but inverted. This represents some{" "} + + old lore + {" "} + that I'm still screwing with. +
+
+ ABTMTR
+
+ © MeowcaTheoRange 2023
+{"#" + colour.toHex()}
++ {project.name} +
+
+ {markdown ? (
+
-
+ {services.map((service, iter) => (
+
-
+ {service.purpose ? (
+
{service.purpose}
+ ) : ( + <> + )} + + {service.name} + +
+ ))}
+
{time}
+{date}
+Central Time (Minnesota)
+Currently listening to
+ ) : ( +Last listened to
+ )} ++ {player?.recenttracks.track[0].name} +
++ {player?.recenttracks.track[0].artist.name} -{" "} + {player?.recenttracks.track[0].album["#text"]} +
+Hold on...
+ ); +} diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..4b1faf9 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,178 @@ +:root { + font-family: var(--font-Lexend-Deca); + font-size: 20px; +} + +body, +html { + margin: 0; + box-sizing: border-box; +} + +div.body { + width: 100vw; + height: 100vh; + background-color: black; + color: white; + overflow-y: scroll; + scroll-snap-type: y mandatory; +} + +/* Markup */ + +.block > h1, +.block > h2, +.block > h3, +.block > h4 { + max-width: 85%; +} +.block > p, +.block > ul, +.block > ol { + max-width: 65%; +} + +h1 { + font-family: var(--font-Renogare); + font-size: 3rem; + margin: 0 0; + margin-bottom: 1rem; + text-wrap: balance; + font-weight: normal; +} + +h2 { + font-family: var(--font-Renogare); + font-size: 2rem; + margin: 1rem 0; + margin-bottom: 1rem; + text-wrap: balance; + font-weight: normal; +} + +h3 { + font-family: var(--font-Renogare); + font-size: 1.5rem; + margin: 1rem 0; + margin-bottom: 0.5rem; + text-wrap: balance; + font-weight: normal; +} + +h4 { + font-family: var(--font-Renogare); + font-size: 1rem; + margin: 1rem 0; + margin-bottom: 0.5rem; + text-wrap: balance; + font-weight: normal; +} + +p { + font-size: 1rem; + margin: 0.5rem 0; + line-height: 1.5rem; +} + +ul, +ol { + font-size: 1rem; + margin: 0.5rem 1em; + line-height: 1.5rem; +} + +li { + margin: 0.5em 0; +} + +small { + font-size: 0.75em; +} + +b { + font-size: 1.25em; + line-height: 1em; +} + +a { + display: inline-block; + position: relative; + color: currentColor; + transform: skew(0); + transform-origin: bottom left; + transition: all 0.125s; +} + +a.special::after { + content: " >>>"; + position: absolute; + display: inline-block; + font-weight: bold; + width: 1ch; + overflow: hidden; + transform: scaleX(0); + top: 0; + right: 0; + transition: all 0.125s; +} + +a:hover { + text-decoration-color: transparent; + transform: skew(-15deg, 0); +} + +a.special:hover { + letter-spacing: 0.25ch; + margin-right: 2ch; + font-weight: bold; + text-decoration-color: transparent; + transform: skew(-15deg, 0); +} + +a.special:hover::after { + right: -2ch; + transform: scaleX(1); +} + +a:active { + font-weight: bold; +} + +a.special:active { + transform: skew(-30deg, 0); + letter-spacing: 0.5ch; + margin-right: 5ch; +} + +a.special:active::after { + width: 4ch; + right: -5ch; +} + +.icon { + font-family: "Material Symbols Outlined"; + font-size: 24px; + line-height: 24px; +} + +/* Stinky styling */ + +.hv { + opacity: 0.5; +} + +.chip { + display: inline-block; + background-color: var(--backgroundColor); + color: var(--color); + padding: 0 1em; + margin-left: 0.25em; + margin-right: 0.25em; + border-radius: 1em; +} + +@media only screen and (max-width: 1024px) { + :root { + font-size: 16px; + } +} diff --git a/src/utility/color.ts b/src/utility/color.ts new file mode 100644 index 0000000..9f8de2b --- /dev/null +++ b/src/utility/color.ts @@ -0,0 +1,94 @@ +export type ColorTypes = [number, number, number]; + +const clamp = (n: number, mi: number, ma: number) => + Math.max(mi, Math.min(n, ma)); + +export class Color3 { + R: number; + G: number; + B: number; + constructor(red: number, green: number, blue: number) { + this.R = red; + this.G = green; + this.B = blue; + } + static clone(color3: Color3) { + return new Color3(color3.R, color3.G, color3.B); + } + static fromRGB(red: number, green: number, blue: number) { + return new Color3(red / 255, green / 255, blue / 255); + } + static fromHex(hex: string) { + // @ts-ignore + const hexSplit: [number, number, number] = ( + hex.match(new RegExp(`[0-9a-f]{1,${hex.length / 3}}`, "gi")) ?? [ + "0", + "0", + "0", + ] + ).map((x) => parseInt(x, 16) / 255); + return new Color3(...hexSplit); + } + static fromInt(int: number) { + return new Color3( + (int & 0xff0000) >> 16, + (int & 0x00ff00) >> 8, + int & 0x0000ff + ); + } + static assumeColor( + value: [number, number, number] | string | number, + rgb?: boolean + ) { + if (Color3.isColor(value)) { + if (Array.isArray(value)) + return rgb ? Color3.fromRGB(...value) : new Color3(...value); + else if (typeof value === "string") return Color3.fromHex(value); + else if (typeof value === "number") return Color3.fromInt(value); + } + throw new Error("Not a valid color type"); + } + static isColor( + value: [number, number, number] | string | number, + rgb?: boolean + ) { + return ( + (Array.isArray(value) && + value.length === 3 && + value.every((x) => typeof x === "number" && !isNaN(x))) || + (typeof value === "string" && !isNaN(parseInt(value, 16))) || + (typeof value === "number" && !isNaN(value)) + ); + } + + toHex() { + return this.toInt().toString(16).padStart(6, "0"); + } + toInt() { + return ( + (Math.round(this.R * 255) << 16) + + (Math.round(this.G * 255) << 8) + + Math.round(this.B * 255) + ); + } + toRGB(): [number, number, number] { + return [this.R * 255, this.G * 255, this.B * 255]; + } + multiply(mult: number) { + return new Color3(this.R * mult, this.G * mult, this.B * mult); + } + lighten(mult: number) { + return new Color3( + clamp(this.R + (mult / 100) * (1 - this.R), 0, 1), + clamp(this.G + (mult / 100) * (1 - this.G), 0, 1), + clamp(this.B + (mult / 100) * (1 - this.B), 0, 1) + ); + } + darken(mult: number) { + return new Color3( + clamp(this.R - (mult / 100) * this.R, 0, 1), + clamp(this.G - (mult / 100) * this.G, 0, 1), + clamp(this.B - (mult / 100) * this.B, 0, 1) + ); + } +} diff --git a/src/utility/fonts.ts b/src/utility/fonts.ts new file mode 100644 index 0000000..5faba9f --- /dev/null +++ b/src/utility/fonts.ts @@ -0,0 +1,19 @@ +import { Lexend_Deca } from "next/font/google"; +import Renogare from "next/font/local"; + +const lexend_deca = Lexend_Deca({ + subsets: ["latin"], + variable: "--font-Lexend-Deca", +}); +const lexend_deca_backup = Lexend_Deca({ + // some dumb error + subsets: ["latin"], + variable: "--font-Lexend-Deca", +}); +const renogare = Renogare({ + src: "./../../public/fonts/Renogare/Renogare.woff2", + variable: "--font-Renogare", +}); + +const fonts = `${lexend_deca.variable} ${lexend_deca_backup.variable} ${renogare.variable}`; +export default fonts;