Prettier format global

2025-12-05 23:16:57 -06:00 · 2024-12-18 14:43:32 -06:00
parent 05a6d18858
commit c9b240c6b4
20 changed files with 1300 additions and 997 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -35,7 +35,7 @@ const v2_redirects = [
    return {
      source: url,
      destination: `https://undefined.behavio.rs/posts${url.slice(
-        nthIndex(url, "/", 4)
+        nthIndex(url, "/", 4),
      )}`,
      permanent: false,
    };
--- a/package.json
+++ b/package.json
@@ -23,10 +23,11 @@
    "@vercel/analytics": "^0.1.6",
    "next": "^15.1.1",
    "plaiceholder": "^2.5.0",
+    "prettier": "^3.4.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
-    "react-markdown": "^8.0.4",
+    "react-markdown": "^9.0.1",
    "react-ogp": "^0.0.3",
    "react-wrap-balancer": "^0.4.0",
    "sass": "^1.56.2",
@@ -36,17 +37,17 @@
    "zod": "^3.24.1"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.7",
    "eslint": "^9",
    "eslint-config-next": "15.1.1",
-    "@eslint/eslintrc": "^3",
-    "autoprefixer": "^10.4.7",
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "postcss": "^8",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
  },
  "ct3aMetadata": {
    "initVersion": "6.11.3"
--- a/src/components/AppWrapper.tsx
+++ b/src/components/AppWrapper.tsx
@@ -1,14 +1,14 @@
-import type {FunctionComponent, ReactNode} from "react";
-import {Disclosure} from '@headlessui/react'
-import {HiBars3, HiXMark} from "react-icons/hi2";
-import {classNames} from "../utils/helpers";
+import type { FunctionComponent, ReactNode } from "react";
+import { Disclosure } from "@headlessui/react";
+import { HiBars3, HiXMark } from "react-icons/hi2";
+import { classNames } from "../utils/helpers";
 import Link from "next/link";

-const navigation: { id: string, name: string, href: string }[] = [
-    {id: 'home', name: 'Home', href: '/',},
-    {id: 'projects', name: 'Projects', href: '/projects'},
-    {id: 'contact', name: 'Contact', href: '/contact'},
-]
+const navigation: { id: string; name: string; href: string }[] = [
+  { id: "home", name: "Home", href: "/" },
+  { id: "projects", name: "Projects", href: "/projects" },
+  { id: "contact", name: "Contact", href: "/contact" },
+];

 type WrapperProps = {
  className?: string;
@@ -17,37 +17,52 @@ type WrapperProps = {
  children?: ReactNode | ReactNode[] | null;
 };

-const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNavigation, className}: WrapperProps) => {
-    return <main className={classNames("body-gradient min-h-screen text-zinc-50", className)}>
-        {!hideNavigation ? <Disclosure as="nav">
-            {({open}) => (
+const AppWrapper: FunctionComponent<WrapperProps> = ({
+  current,
+  children,
+  hideNavigation,
+  className,
+}: WrapperProps) => {
+  return (
+    <main
+      className={classNames(
+        "body-gradient min-h-screen text-zinc-50",
+        className,
+      )}
+    >
+      {!hideNavigation ? (
+        <Disclosure as="nav">
+          {({ open }) => (
            <>
              <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
                <div className="relative flex h-16 items-center justify-between">
                  <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                    {/* Mobile menu button*/}
-                                <Disclosure.Button
-                                    className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                    <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                      <span className="sr-only">Open main menu</span>
                      {open ? (
-                                        <HiXMark className="block h-6 w-6" aria-hidden="true"/>
+                        <HiXMark className="block h-6 w-6" aria-hidden="true" />
                      ) : (
-                                        <HiBars3 className="block h-6 w-6" aria-hidden="true"/>
+                        <HiBars3 className="block h-6 w-6" aria-hidden="true" />
                      )}
                    </Disclosure.Button>
                  </div>
                  <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                    <div className="hidden sm:ml-6 sm:block">
-                                    <div className="flex space-x-4 text-lg font-roboto  ">
+                      <div className="flex space-x-4 font-roboto text-lg">
                        {navigation.map((item) => (
                          <Link
                            key={item.name}
                            href={item.href}
                            className={classNames(
-                                                    item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-800/60 hover:text-white',
-                                                    'px-2.5 py-1 rounded-md'
+                              item.id == current
+                                ? "bg-zinc-900 text-white"
+                                : "text-gray-300 hover:bg-zinc-800/60 hover:text-white",
+                              "rounded-md px-2.5 py-1",
                            )}
-                                                aria-current={item.id == current ? 'page' : undefined}
+                            aria-current={
+                              item.id == current ? "page" : undefined
+                            }
                          >
                            {item.name}
                          </Link>
@@ -59,17 +74,18 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNav
              </div>

              <Disclosure.Panel className="sm:hidden">
-                        <div className="space-y-1 px-2 pt-2 pb-3">
+                <div className="space-y-1 px-2 pb-3 pt-2">
                  {navigation.map((item) => (
                    <Link key={item.name} href={item.href}>
                      <Disclosure.Button
-
                        as="a"
                        className={classNames(
-                                            item.id == current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
-                                            'block px-3 py-2 rounded-md text-base font-medium'
+                          item.id == current
+                            ? "bg-zinc-900 text-white"
+                            : "text-gray-300 hover:bg-zinc-700 hover:text-white",
+                          "block rounded-md px-3 py-2 text-base font-medium",
                        )}
-                                        aria-current={item.id == current ? 'page' : undefined}
+                        aria-current={item.id == current ? "page" : undefined}
                      >
                        {item.name}
                      </Disclosure.Button>
@@ -79,9 +95,11 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNav
              </Disclosure.Panel>
            </>
          )}
-        </Disclosure> : null}
+        </Disclosure>
+      ) : null}
      {children}
    </main>
-}
+  );
+};

 export default AppWrapper;
--- a/src/components/DependentImage.tsx
+++ b/src/components/DependentImage.tsx
@@ -1,26 +1,30 @@
-import Image, {ImageProps} from "next/image";
-import {useMemo, useState} from "react";
+import Image, { ImageProps } from "next/image";
+import { useMemo, useState } from "react";

 type DependentProps = {
  className?: string | ((loaded: boolean) => string);
-}
+};

 type DependentImageProps = Omit<ImageProps, "className"> & DependentProps;

 const DependentImage = (props: DependentImageProps) => {
-    const [loaded, setLoaded] = useState(false)
-    const {className} = props;
+  const [loaded, setLoaded] = useState(false);
+  const { className } = props;
  const renderedClassName = useMemo(() => {
    if (className === undefined) return "";
    if (typeof className === "function") return className(loaded);
    return className;
-    }, [loaded, className])
+  }, [loaded, className]);

-    return <Image {...props}
+  return (
+    <Image
+      {...props}
      className={renderedClassName}
      onLoadingComplete={() => {
-                      setLoaded(true)
-                  }}/>
-}
+        setLoaded(true);
+      }}
+    />
+  );
+};

 export default DependentImage;
--- a/src/components/ItemCard.tsx
+++ b/src/components/ItemCard.tsx
@@ -1,92 +1,126 @@
-import React, {useRef} from "react";
-import {useOnClickOutside, useToggle} from "usehooks-ts";
-import {classNames, isHoverable} from "../utils/helpers";
+import React, { useRef } from "react";
+import { useOnClickOutside, useToggle } from "usehooks-ts";
+import { classNames, isHoverable } from "../utils/helpers";
 import DependentImage from "./DependentImage";
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown";
 import Balancer from "react-wrap-balancer";

 import Link from "next/link";
-import {useRouter} from "next/router";
-import {type LinkIcon, LinkIcons} from "../utils/types";
+import { useRouter } from "next/router";
+import { type LinkIcon, LinkIcons } from "../utils/types";

 type ItemCardProps = {
  banner: string;
-    bannerSettings?: { quality: number};
+  bannerSettings?: { quality: number };
  bannerBlur: string;
  title: string;
  description: string;
  links?: LinkIcon[];
  location: string;
-}
+};

-const ItemCard = ({banner, bannerBlur, title, description, links, location, bannerSettings}: ItemCardProps) => {
+const ItemCard = ({
+  banner,
+  bannerBlur,
+  title,
+  description,
+  links,
+  location,
+  bannerSettings,
+}: ItemCardProps) => {
  const itemRef = useRef<HTMLDivElement>(null);
  const mobileButtonRef = useRef<HTMLAnchorElement>(null);
-    const [active, toggleActive, setActive] = useToggle()
+  const [active, toggleActive, setActive] = useToggle();
  const router = useRouter();

  useOnClickOutside(itemRef, (event) => {
-        if (mobileButtonRef.current != null && mobileButtonRef.current?.contains(event.target as Node))
+    if (
+      mobileButtonRef.current != null &&
+      mobileButtonRef.current?.contains(event.target as Node)
+    )
      return;
-        else
-            setActive(false);
-    })
+    else setActive(false);
+  });

  const navigate = () => {
    if (!isHoverable()) toggleActive();
    else {
      router.push(location);
    }
-    }
+  };

-    return <>
-        <div ref={itemRef}
-             className={classNames("item [&:not(:first-child)]:mt-3", active ? "active" : null)}
-             onClick={navigate}>
-            <DependentImage fill src={banner}
+  return (
+    <>
+      <div
+        ref={itemRef}
+        className={classNames(
+          "item [&:not(:first-child)]:mt-3",
+          active ? "active" : null,
+        )}
+        onClick={navigate}
+      >
+        <DependentImage
+          fill
+          src={banner}
          quality={bannerSettings?.quality ?? 75}
          blurDataURL={bannerBlur}
-                            className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
+          className={(loaded) =>
+            classNames("object-cover", loaded ? null : "blur-xl")
+          }
          placeholder="blur"
          alt={`Banner for ${title}`}
        />
-            <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
+        <div className="elements m-2 grid h-full grid-cols-12 px-1 sm:px-4">
+          <div className="col-span-12 max-h-full overflow-hidden pb-2 pl-2 drop-shadow-2xl sm:col-span-9 md:p-1 lg:col-span-8">
+            <Link
+              href={{ pathname: location }}
+              className="font-roboto text-lg font-semibold sm:text-2xl md:text-3xl"
+            >
+              {title}
+            </Link>
            <div
-                    className="col-span-12 sm:col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
-                    <Link href={{pathname: location}}
-                          className="text-lg sm:text-2xl md:text-3xl font-semibold font-roboto">{title}</Link>
-                    <div className="description mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl font-light overflow-hidden"
+              className="description mt-0 overflow-hidden text-base font-light sm:text-xl md:mt-1.5 md:text-xl"
              onClick={(e) => {
                e.stopPropagation();
                navigate();
-                         }}>
+              }}
+            >
              <Balancer>
                <ReactMarkdown>{description}</ReactMarkdown>
              </Balancer>
            </div>
          </div>
-                {(links?.length ?? 0) > 0 ?
-                    <div
-                        className="hidden sm:flex col-span-3 lg:col-span-4 w-full justify-end max-h-full md:py-5">
-                        <div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
-                            {links!.map(({icon, location, newTab}) =>
-                                <Link key={location} href={location} target={(newTab ?? true) ? "_blank" : "_self"}
-                                      onClick={e => e.stopPropagation()}>
+          {(links?.length ?? 0) > 0 ? (
+            <div className="col-span-3 hidden max-h-full w-full justify-end sm:flex md:py-5 lg:col-span-4">
+              <div className="icon-grid grid aspect-square grid-cols-2 grid-rows-2 p-2 md:gap-3">
+                {links!.map(({ icon, location, newTab }) => (
+                  <Link
+                    key={location}
+                    href={location}
+                    target={(newTab ?? true) ? "_blank" : "_self"}
+                    onClick={(e) => e.stopPropagation()}
+                  >
                    {LinkIcons[icon]?.({})}
-                                </Link>)}
+                  </Link>
+                ))}
              </div>
-                    </div> : null}
            </div>
-
+          ) : null}
        </div>
-        <Link aria-disabled={!active} ref={mobileButtonRef} href={active ? {pathname: location} : {}}
+      </div>
+      <Link
+        aria-disabled={!active}
+        ref={mobileButtonRef}
+        href={active ? { pathname: location } : {}}
        className={classNames(
-                  "transition-all bg-zinc-800 rounded border border-zinc-900 shadow w-full flex items-center justify-center",
-                  active ? "opacity-100 h-9 p-2" : "opacity-0 h-0 p-0"
-              )}>
+          "flex w-full items-center justify-center rounded border border-zinc-900 bg-zinc-800 shadow transition-all",
+          active ? "h-9 p-2 opacity-100" : "h-0 p-0 opacity-0",
+        )}
+      >
        Learn More
      </Link>
    </>
-}
+  );
+};

 export default ItemCard;
--- a/src/components/SteppedSpan.tsx
+++ b/src/components/SteppedSpan.tsx
@@ -1,18 +1,19 @@
-import {FunctionComponent} from "react";
+import { FunctionComponent } from "react";

 type SteppedSpanProps = {
  children: string;
-}
+};

-const SteppedSpan: FunctionComponent<SteppedSpanProps> = ({children}: SteppedSpanProps) => {
-    return <div className="stepped">
-
-    {children.split('').map((char: string, index) => {
-        return <span key={index}>
-            {char}
-        </span>
+const SteppedSpan: FunctionComponent<SteppedSpanProps> = ({
+  children,
+}: SteppedSpanProps) => {
+  return (
+    <div className="stepped">
+      {children.split("").map((char: string, index) => {
+        return <span key={index}>{char}</span>;
      })}
    </div>
-}
+  );
+};

 export default SteppedSpan;
--- a/src/components/WorkInProgress.tsx
+++ b/src/components/WorkInProgress.tsx
@@ -1,19 +1,21 @@
-import type {FunctionComponent} from "react";
+import type { FunctionComponent } from "react";

 const WorkInProgress: FunctionComponent = () => {
-    return <div className="w-full my-10 flex flex-col items-center">
-        <div
-            className="bg-zinc-800/30 border border-zinc-700 rounded-md max-w-[23rem] sm:max-w-[25rem] lg:max-w-[30rem] mx-3 w-full p-5 flex flex-col items-center justify-center">
-            <span className="bg-gradient-to-r from-orange-500 via-fuchsia-600 to-cyan-500 text-transparent font-semibold bg-clip-text text-3xl sm:text-4xl pb-2 text-center">
+  return (
+    <div className="my-10 flex w-full flex-col items-center">
+      <div className="mx-3 flex w-full max-w-[23rem] flex-col items-center justify-center rounded-md border border-zinc-700 bg-zinc-800/30 p-5 sm:max-w-[25rem] lg:max-w-[30rem]">
+        <span className="bg-gradient-to-r from-orange-500 via-fuchsia-600 to-cyan-500 bg-clip-text pb-2 text-center text-3xl font-semibold text-transparent sm:text-4xl">
          Work In Progress
        </span>
-            <p className="text-lg text-center">
+        <p className="text-center text-lg">
          This website is a work in-progress.
-                <br/>
-                Unfortunately, this page hasn&apos;t been finished yet. Check back later.
+          <br />
+          Unfortunately, this page hasn&apos;t been finished yet. Check back
+          later.
        </p>
      </div>
    </div>
-}
+  );
+};

 export default WorkInProgress;
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,19 +1,33 @@
-import {Html, Head, Main, NextScript} from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";

 export default function Document() {
  return (
    <Html>
      <Head>
-                <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-                <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-                <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
        <link rel="manifest" href="/site.webmanifest" />
        <meta name="theme-color" content="#000000" />
      </Head>
      <body className="bg-black">
-                <Main/>
-                <NextScript/>
+        <Main />
+        <NextScript />
      </body>
    </Html>
-    )
+  );
 }
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -1,46 +1,56 @@
-import {type NextPage} from "next";
+import { type NextPage } from "next";
 import AppWrapper from "../components/AppWrapper";
-import {BsDiscord, BsGithub} from "react-icons/bs";
-import {AiFillMail} from "react-icons/ai";
+import { BsDiscord, BsGithub } from "react-icons/bs";
+import { AiFillMail } from "react-icons/ai";
 import Link from "next/link";
-import type {IconType} from "react-icons";
+import type { IconType } from "react-icons";
 import Tippy from "@tippyjs/react";
-import 'tippy.js/dist/tippy.css';
+import "tippy.js/dist/tippy.css";

-const socials: { icon: IconType, href?: string, hint?: string, hideHint?: boolean }[] = [
+const socials: {
+  icon: IconType;
+  href?: string;
+  hint?: string;
+  hideHint?: boolean;
+}[] = [
  {
    icon: BsGithub,
-        href: "https://github.com/Xevion/"
+    href: "https://github.com/Xevion/",
  },
  {
    icon: AiFillMail,
    href: "mailto:xevion@xevion.dev",
-        hint: "xevion@xevion.dev"
+    hint: "xevion@xevion.dev",
  },
  {
    icon: BsDiscord,
-        hint: "Xevion#8506"
-    }
-]
+    hint: "Xevion#8506",
+  },
+];

 const ContactPage: NextPage = () => {
-    return <AppWrapper current='contact'>
-        <div className="w-full my-10 flex flex-col items-center">
-            <div
-                className="bg-zinc-800/50 border border-zinc-800 rounded-md max-w-[23rem] sm:max-w-[25rem] lg:max-w-[30rem] mx-3 w-full p-5 flex flex-col">
+  return (
+    <AppWrapper current="contact">
+      <div className="my-10 flex w-full flex-col items-center">
+        <div className="mx-3 flex w-full max-w-[23rem] flex-col rounded-md border border-zinc-800 bg-zinc-800/50 p-5 sm:max-w-[25rem] lg:max-w-[30rem]">
          <div className="flex justify-center gap-x-5 text-center">
-                    {socials.map(({icon: Icon, href, hint, hideHint}, index) => {
-                        const inner = <Icon className="w-8 h-8"/>;
-                        return <Tippy key={index} disabled={hideHint} content={hint ?? href}>
-                            {
-                                href != undefined ? <Link href={href}>{inner}</Link> : <span>{inner}</span>
-                            }
+            {socials.map(({ icon: Icon, href, hint, hideHint }, index) => {
+              const inner = <Icon className="h-8 w-8" />;
+              return (
+                <Tippy key={index} disabled={hideHint} content={hint ?? href}>
+                  {href != undefined ? (
+                    <Link href={href}>{inner}</Link>
+                  ) : (
+                    <span>{inner}</span>
+                  )}
                </Tippy>
+              );
            })}
          </div>
        </div>
      </div>
    </AppWrapper>
-}
+  );
+};

 export default ContactPage;
--- a/src/pages/grain.tsx
+++ b/src/pages/grain.tsx
@@ -1,77 +1,102 @@
-import type {NextPage} from "next";
+import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
-import {BsGithub} from "react-icons/bs";
-import {RxOpenInNewWindow} from "react-icons/rx";
+import { BsGithub } from "react-icons/bs";
+import { RxOpenInNewWindow } from "react-icons/rx";
 import Link from "next/link";
 import AppWrapper from "../components/AppWrapper";
-import type {ReactNode} from "react";
+import type { ReactNode } from "react";

 type Screenshot = [string, null | string | ReactNode];
 type ScreenshotWithQuality = [string, null | string | ReactNode, number];
 const images: (Screenshot | ScreenshotWithQuality)[] = [
  ["/grain/index.jpg", null, 100],
-    ["/grain/hidden.jpg", null, 100]
-]
+  ["/grain/hidden.jpg", null, 100],
+];

 const GrainPage: NextPage = () => {
-    return <>
+  return (
+    <>
      <Head>
        <title>Grain | Xevion.dev</title>
      </Head>
      <AppWrapper>
-            <div className="w-full overflow-auto h-full min-h-screen flex justify-center">
-                <div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
-                    <div className="pb-2 flex justify-between">
-                        <div className="text-3xl font-semibold">
-                            Grain
-                        </div>
+        <div className="flex h-full min-h-screen w-full justify-center overflow-auto">
+          <div className="relative my-10 w-full max-w-screen-md p-3 px-6">
+            <div className="flex justify-between pb-2">
+              <div className="text-3xl font-semibold">Grain</div>
              <div className="flex items-center justify-end space-x-1.5">
                <Link href="https://grain.xevion.dev" target="_blank">
-                                <RxOpenInNewWindow className="w-6 h-6 hover:text-zinc-200"/>
+                  <RxOpenInNewWindow className="h-6 w-6 hover:text-zinc-200" />
                </Link>
                <Link href="https://github.com/Xevion/grain" target="_blank">
-                                <BsGithub className="w-6 h-6 hover:text-zinc-200"/>
+                  <BsGithub className="h-6 w-6 hover:text-zinc-200" />
                </Link>
              </div>
            </div>
            <div className="relative">
              <Link href="https://grain.xevion.dev/">
-                            <Image fill quality={100} sizes="100vw" src="/grain/banner.jpeg" alt=""
-                                   className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
+                <Image
+                  fill
+                  quality={100}
+                  sizes="100vw"
+                  src="/grain/banner.jpeg"
+                  alt=""
+                  className="pointer-events-none !relative min-h-[10rem] rounded-md object-cover"
+                />
              </Link>
            </div>
-                    <div className="mt-3 w-full prose prose-invert prose-lg">
+            <div className="prose prose-lg prose-invert mt-3 w-full">
              <p>
-                            After seeing an online post with beautiful noise patterns & gradients, I decided to
-                            try and recreate it. The result was Grain, a simple web app that generates beautiful noise.
-                            Under the hood, this app uses multiple layers of SVGs that automatically rescale with the browsers viewport.
-                            That way, the noise is always crisp and clear, no matter the screen size.
+                After seeing an online post with beautiful noise patterns &
+                gradients, I decided to try and recreate it. The result was
+                Grain, a simple web app that generates beautiful noise. Under
+                the hood, this app uses multiple layers of SVGs that
+                automatically rescale with the browsers viewport. That way, the
+                noise is always crisp and clear, no matter the screen size.
              </p>
              <ul className="md:columns-2">
                <li>Performant - SVG generation and layering is optimized</li>
                <li>Small - Builds in less than 16 seconds</li>
-                            <li>Open Source - Want to use my gradients? Check it out on <Link href="https://github.com/Xevion/grain" target="_blank">GitHub</Link>.</li>
+                <li>
+                  Open Source - Want to use my gradients? Check it out on{" "}
+                  <Link href="https://github.com/Xevion/grain" target="_blank">
+                    GitHub
+                  </Link>
+                  .
+                </li>
              </ul>
              <h3>Screenshots</h3>
              <div className="relative space-y-8">
                {images.map(([src, description, quality]) => {
-                                    return <div key={src} className="flex flex-col justify-center w-full">
-                                        <Image fill sizes="100vw" src={src} alt="" quality={quality ?? 75}
-                                               className="shadow-lg !my-1 !relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
-                                        {description != null ?
-                                        <span
-                                        className="text-center text-base">{description}</span> : null}
+                  return (
+                    <div
+                      key={src}
+                      className="flex w-full flex-col justify-center"
+                    >
+                      <Image
+                        fill
+                        sizes="100vw"
+                        src={src}
+                        alt=""
+                        quality={quality ?? 75}
+                        className="pointer-events-none !relative !my-1 min-h-[10rem] rounded-md object-cover shadow-lg"
+                      />
+                      {description != null ? (
+                        <span className="text-center text-base">
+                          {description}
+                        </span>
+                      ) : null}
                    </div>
-                                }
-                            )}
+                  );
+                })}
              </div>
            </div>
          </div>
        </div>
      </AppWrapper>
-
    </>
-}
+  );
+};

 export default GrainPage;
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -104,7 +104,7 @@ export async function getStaticProps() {
            ...project,
            bannerBlur: base64,
          };
-        })
+        }),
      ),
    },
  };
--- a/src/pages/paths.tsx
+++ b/src/pages/paths.tsx
@@ -1,11 +1,13 @@
-import {type NextPage} from "next";
+import { type NextPage } from "next";
 import AppWrapper from "../components/AppWrapper";
 import WorkInProgress from "../components/WorkInProgress";

 const PathsPage: NextPage = () => {
-    return <AppWrapper>
+  return (
+    <AppWrapper>
      <WorkInProgress />
    </AppWrapper>
-}
+  );
+};

 export default PathsPage;
--- a/src/pages/phototag.tsx
+++ b/src/pages/phototag.tsx
@@ -1,44 +1,50 @@
-import {NextPage} from "next";
+import { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
-import {BsGithub} from "react-icons/bs";
+import { BsGithub } from "react-icons/bs";
 import Link from "next/link";
 import AppWrapper from "../components/AppWrapper";

 const PhototagPage: NextPage = () => {
-    return <>
+  return (
+    <>
      <Head>
        <title>Phototag | Xevion.dev</title>
      </Head>
      <AppWrapper>
-            <div className="w-full overflow-auto h-full min-h-screen flex justify-center">
-                <div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
-                    <div className="pb-2 flex justify-between">
-                        <div className="text-2xl font-semibold">
-                            Phototag
-                        </div>
+        <div className="flex h-full min-h-screen w-full justify-center overflow-auto">
+          <div className="relative my-10 w-full max-w-screen-md p-3 px-6">
+            <div className="flex justify-between pb-2">
+              <div className="text-2xl font-semibold">Phototag</div>
              <div className="flex items-center justify-end space-x-1.5">
                <Link href="https://github.com/Xevion/phototag" target="_blank">
-                                <BsGithub className="w-5 h-5 hover:text-zinc-200"/>
+                  <BsGithub className="h-5 w-5 hover:text-zinc-200" />
                </Link>
              </div>
            </div>
            <div className="relative">
-                        <Image fill sizes="100vw" src="/phototag.png" alt=""
-                               className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
+              <Image
+                fill
+                sizes="100vw"
+                src="/phototag.png"
+                alt=""
+                className="pointer-events-none !relative min-h-[10rem] rounded-md object-cover"
+              />
            </div>
-                    <div className="mt-3 w-full prose prose-invert prose-lg">
+            <div className="prose prose-lg prose-invert mt-3 w-full">
              <p>
-                            Phototag is a powerful tool that helps you quickly and easily add rich, descriptive tags to
-                            your photos. Using Google&apos;s Vision API, Phototag automatically generates tags based on
-                            the visual content of your photos, making it easier than ever to organize and find your
-                            photos.
+                Phototag is a powerful tool that helps you quickly and easily
+                add rich, descriptive tags to your photos. Using Google&apos;s
+                Vision API, Phototag automatically generates tags based on the
+                visual content of your photos, making it easier than ever to
+                organize and find your photos.
              </p>
              <p>
-                            With support for IPTC metadata and Adobe XMP Sidecar files, you can easily integrate
-                            Phototag into your existing workflow on Windows. Whether you&apos;re a professional
-                            photographer or a casual snapshot taker, Phototag is the perfect tool for adding clarity and
-                            context to your photos.
+                With support for IPTC metadata and Adobe XMP Sidecar files, you
+                can easily integrate Phototag into your existing workflow on
+                Windows. Whether you&apos;re a professional photographer or a
+                casual snapshot taker, Phototag is the perfect tool for adding
+                clarity and context to your photos.
              </p>
              <ul className="md:columns-2">
                <li>Simple, but configurable</li>
@@ -52,8 +58,8 @@ const PhototagPage: NextPage = () => {
          </div>
        </div>
      </AppWrapper>
-
    </>
-}
+  );
+};

 export default PhototagPage;
--- a/src/pages/portal.tsx
+++ b/src/pages/portal.tsx
@@ -1,55 +1,78 @@
-import type {NextPage} from "next";
+import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
-import {BsGithub} from "react-icons/bs";
+import { BsGithub } from "react-icons/bs";
 import Link from "next/link";
 import AppWrapper from "../components/AppWrapper";
-import type {ReactNode} from "react";
+import type { ReactNode } from "react";

 const images: [string, string | ReactNode][] = [
  ["/portal/home.jpeg", "The home page."],
-    ["/portal/events.png", <> A page listing all current events. <br/> Initial data is cached for performance, but
-        becomes
-        dynamic when filtered.</>],
-    ["/portal/admin.png", "A secure admin panel for our officers to view, filter & edit members & events."],
+  [
+    "/portal/events.png",
+    <>
+      {" "}
+      A page listing all current events. <br /> Initial data is cached for
+      performance, but becomes dynamic when filtered.
+    </>,
+  ],
+  [
+    "/portal/admin.png",
+    "A secure admin panel for our officers to view, filter & edit members & events.",
+  ],
  ["/portal/event.png", "The view of a specific event."],
  ["/portal/checkin.png", "The check-in view."],
-    ["/portal/filters.png", "Organization filtering options. Dynamic semester filtering & event sorting is also available."],
+  [
+    "/portal/filters.png",
+    "Organization filtering options. Dynamic semester filtering & event sorting is also available.",
+  ],
  ["/portal/login.png", "The login. Fast form validation, seamless login."],
-    ["/portal/profile.png", <>The member profile view; fully editable on both desktop & mobile. <br/> Seamless editing
-        of profiles for users. Full validation available.</>],
-    ["/portal/status.png", "Members can check their progress towards becoming full members & view what events they attended."],
-]
+  [
+    "/portal/profile.png",
+    <>
+      The member profile view; fully editable on both desktop & mobile. <br />{" "}
+      Seamless editing of profiles for users. Full validation available.
+    </>,
+  ],
+  [
+    "/portal/status.png",
+    "Members can check their progress towards becoming full members & view what events they attended.",
+  ],
+];

 const PortalPage: NextPage = () => {
-    return <>
+  return (
+    <>
      <Head>
        <title>Portal | Xevion.dev</title>
      </Head>
      <AppWrapper>
-            <div className="w-full overflow-auto h-full min-h-screen flex justify-center">
-                <div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
-                    <div className="pb-2 flex justify-between">
-                        <div className="text-3xl font-semibold">
-                            Portal
-                        </div>
+        <div className="flex h-full min-h-screen w-full justify-center overflow-auto">
+          <div className="relative my-10 w-full max-w-screen-md p-3 px-6">
+            <div className="flex justify-between pb-2">
+              <div className="text-3xl font-semibold">Portal</div>
              <div className="flex items-center justify-end space-x-1.5">
                <Link href="https://github.com/acmutsa/Portal" target="_blank">
-                                <BsGithub className="w-6 h-6 hover:text-zinc-200"/>
+                  <BsGithub className="h-6 w-6 hover:text-zinc-200" />
                </Link>
              </div>
            </div>
            <div className="relative">
              <Link href="https://portal.acmutsa.org/">
-                            <Image fill sizes="100vw" src="/portal/banner.jpeg" alt=""
-                                   className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
+                <Image
+                  fill
+                  sizes="100vw"
+                  src="/portal/banner.jpeg"
+                  alt=""
+                  className="pointer-events-none !relative min-h-[10rem] rounded-md object-cover"
+                />
              </Link>
            </div>
-                    <div className="mt-3 w-full prose prose-invert prose-lg">
+            <div className="prose prose-lg prose-invert mt-3 w-full">
              <p>
-                            Created in service of our membership, Portal was designed as a approachable membership
-                            portal
-                            for our users so we could <b>track membership</b>, <b>advertise events</b> and replace our
+                Created in service of our membership, Portal was designed as a
+                approachable membership portal for our users so we could{" "}
+                <b>track membership</b>, <b>advertise events</b> and replace our
                existing <b>database solution</b>.
              </p>
              <ul className="md:columns-2">
@@ -61,21 +84,31 @@ const PortalPage: NextPage = () => {
              <h3>Screenshots</h3>
              <div className="relative space-y-8">
                {images.map(([src, description]) => {
-                                    return <div key={src} className="flex flex-col justify-center w-full">
-                                        <Image fill sizes="100vw" src={src} alt=""
-                                               className="shadow-lg !my-1 !relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
-                                        <span
-                                            className="text-center text-base">{description}</span>
+                  return (
+                    <div
+                      key={src}
+                      className="flex w-full flex-col justify-center"
+                    >
+                      <Image
+                        fill
+                        sizes="100vw"
+                        src={src}
+                        alt=""
+                        className="pointer-events-none !relative !my-1 min-h-[10rem] rounded-md object-cover shadow-lg"
+                      />
+                      <span className="text-center text-base">
+                        {description}
+                      </span>
                    </div>
-                                }
-                            )}
+                  );
+                })}
              </div>
            </div>
          </div>
        </div>
      </AppWrapper>
-
    </>
-}
+  );
+};

 export default PortalPage;
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -1,142 +1,158 @@
-import {type NextPage} from "next";
+import { type NextPage } from "next";
 import AppWrapper from "../components/AppWrapper";
-import {RiMagicLine} from "react-icons/ri";
-import {BiBus, BiHash, BiNetworkChart} from "react-icons/bi";
+import { RiMagicLine } from "react-icons/ri";
+import { BiBus, BiHash, BiNetworkChart } from "react-icons/bi";
 import Link from "next/link";
-import {IconType} from "react-icons";
-import {PiPlantBold} from "react-icons/pi";
-import {HiOutlineRss} from "react-icons/hi";
-import {GiHummingbird, GiPathDistance} from "react-icons/gi";
-import {MdOutlineGrain, MdOutlineDns, MdOutlineLeaderboard} from "react-icons/md";
-import {FiLayers} from "react-icons/fi";
-import {FaReact} from "react-icons/fa";
-import {SiPowershell} from "react-icons/si";
-import {RxTimer} from "react-icons/rx";
+import { IconType } from "react-icons";
+import { PiPlantBold } from "react-icons/pi";
+import { HiOutlineRss } from "react-icons/hi";
+import { GiHummingbird, GiPathDistance } from "react-icons/gi";
+import {
+  MdOutlineGrain,
+  MdOutlineDns,
+  MdOutlineLeaderboard,
+} from "react-icons/md";
+import { FiLayers } from "react-icons/fi";
+import { FaReact } from "react-icons/fa";
+import { SiPowershell } from "react-icons/si";
+import { RxTimer } from "react-icons/rx";

 const ProjectsPage: NextPage = () => {
-    const projects: { name: string, description: string, url?: string, icon: IconType }[] = [
+  const projects: {
+    name: string;
+    description: string;
+    url?: string;
+    icon: IconType;
+  }[] = [
    {
      name: "Portal",
      description: "ACM Membership & Event System",
      url: "https://portal.acmutsa.org",
-            icon: RiMagicLine
+      icon: RiMagicLine,
    },
    {
      name: "Runnerspace",
      description: "Hackathon MySpace Clone",
      url: "https://runnerspace.xevion.dev",
-            icon: RiMagicLine
+      icon: RiMagicLine,
    },
    {
      name: "v6 Place",
      description: "Paint Images with IPv6 Addresses",
      url: "https://github.com/Xevion/v6-place",
-            icon: BiNetworkChart
+      icon: BiNetworkChart,
    },
    {
      name: "Phototag",
      description: "Effortlessly Tag Photos",
      url: "/phototag",
-            icon: BiHash
+      icon: BiHash,
    },
    {
      name: "Paths",
      description: "Graph Traversal Algorithms",
      url: "https://github.com/Xevion/Paths",
-            icon: GiPathDistance
+      icon: GiPathDistance,
    },
    {
      name: "undefined behaviors",
      description: "Astro-based Blog",
      url: "https://undefined.behavio.rs",
-            icon: HiOutlineRss
+      icon: HiOutlineRss,
    },
    {
      name: "v2.xevion.dev",
      description: "Jekyll-based Blog",
      url: "https://v2.xevion.dev",
-            icon: HiOutlineRss
+      icon: HiOutlineRss,
    },
    {
      name: "Grain",
      description: "Pretty SVG-based Noise",
      url: "https://grain.xevion.dev",
-            icon: MdOutlineGrain
+      icon: MdOutlineGrain,
    },
    {
      name: "Hydroponics Expanded",
      description: "A RimWorld Mod for Hydroponics",
      url: "https://github.com/Xevion/RimWorld-Hydroponics-Expanded",
-            icon: PiPlantBold
+      icon: PiPlantBold,
    },
    {
      name: "Time Banner",
      description: "Instant PNG Timestamps in Rust",
      url: "https://github.com/Xevion/time-banner",
-            icon: RxTimer
+      icon: RxTimer,
    },
    {
      name: "The Office",
      description: "View Quotes from The Office",
      url: "https://the-office.xevion.dev",
-            icon: FiLayers
+      icon: FiLayers,
    },
    {
      name: "Boids",
      description: "Flocking Simulation",
      url: "https://github.com/Xevion/Boids",
-            icon: GiHummingbird
+      icon: GiHummingbird,
    },
    {
      name: "bus-reminder",
      description: "Last Bus Departure Reminder",
      url: "http://github.com/Xevion/bus-reminder",
-            icon: BiBus
+      icon: BiBus,
    },
    {
      name: "rdap",
      description: "Javascript RDAP Client",
      url: "https://rdap.xevion.dev",
-            icon: MdOutlineDns
+      icon: MdOutlineDns,
    },
    {
      name: "icons",
      description: "Dynamic React-Icons Loading",
      url: "https://icons.xevion.dev",
-            icon: FaReact
+      icon: FaReact,
    },
    {
      name: "trivia",
      description: "CLI + Flask Leaderboard",
      url: "http://github.com/Xevion/trivia",
-            icon: MdOutlineLeaderboard
+      icon: MdOutlineLeaderboard,
    },
    {
      name: "Powershell",
      description: "Scripts & Guides",
      url: "https://powershell.xevion.dev",
-            icon: SiPowershell
-        }
-    ]
-    return <AppWrapper current='projects'>
-        <div className="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-20 gap-y-14 h-full py-2 max-w-500 w-max mx-auto flex ">
-            {projects.map(({name, description, url, icon: Icon}) => <Link
+      icon: SiPowershell,
+    },
+  ];
+  return (
+    <AppWrapper current="projects">
+      <div className="max-w-500 mx-auto mt-20 flex grid h-full w-max grid-cols-1 gap-x-20 gap-y-14 py-2 md:grid-cols-2 lg:grid-cols-3">
+        {projects.map(({ name, description, url, icon: Icon }) => (
+          <Link
            key={name}
-                className="relative flex flex-shrink items-center opacity-75 hover:opacity-100 transition-opacity"
+            className="relative flex flex-shrink items-center opacity-75 transition-opacity hover:opacity-100"
            href={url ?? ""}
            target="_blank"
            rel="noreferrer"
-                title={name}>
-                <div className="pt-2 pr-5">
-                    <Icon className="text-3xl saturate-0 opacity-80"/>
+            title={name}
+          >
+            <div className="pr-5 pt-2">
+              <Icon className="text-3xl opacity-80 saturate-0" />
            </div>
            <div className="flex-auto">
              <div className="text-normal">{name}</div>
-                    <div className="text-sm opacity-70 font-normal">{description}</div>
+              <div className="text-sm font-normal opacity-70">
+                {description}
              </div>
-            </Link>)}
+            </div>
+          </Link>
+        ))}
      </div>
    </AppWrapper>
+  );
 };

 export default ProjectsPage;
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;700;900&display=swap");
@@ -8,7 +8,12 @@
@tailwind utilities;

 .body-gradient {
-  background-image: linear-gradient(to top left, black, rgb(161 161 170 / 0.1), black);
+  background-image: linear-gradient(
+    to top left,
+    black,
+    rgb(161 161 170 / 0.1),
+    black
+  );
 }

@mixin active {
@@ -21,12 +26,13 @@
  }
 }

-html, body {
+html,
+body {
  @apply font-inter;
 }

 .item {
-  @apply w-full aspect-[7/2] lg:aspect-[5/3] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
+  @apply pointer-events-auto relative aspect-[7/2] w-full cursor-pointer overflow-hidden rounded transition-all sm:h-[14rem] md:h-[16rem] lg:aspect-[5/3];
  > img {
    @apply rounded transition-all;
  }
@@ -52,16 +58,17 @@ html, body {

 .icon-grid {
  direction: rtl;
-  @apply min-w-0 max-w-full min-h-0 max-h-full;
+  @apply max-h-full min-h-0 min-w-0 max-w-full;

  > a > svg {
-    @apply w-full h-full;
+    @apply h-full w-full;
  }

-  > svg, a {
+  > svg,
+  a {
    width: 75%;
    height: 75%;
-    @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;
+    @apply m-auto aspect-square text-white opacity-80 drop-shadow-md transition-transform hover:scale-[120%] hover:opacity-100;
  }
 }

@@ -73,5 +80,5 @@ html, body {
 }

 body {
-  @apply h-full
+  @apply h-full;
 }
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,25 +1,24 @@
-import type {IconType} from "react-icons";
-import {AiFillGithub, AiOutlineLink} from "react-icons/ai";
-import {RxOpenInNewWindow} from "react-icons/rx";
+import type { IconType } from "react-icons";
+import { AiFillGithub, AiOutlineLink } from "react-icons/ai";
+import { RxOpenInNewWindow } from "react-icons/rx";

 export type Project = {
  title: string;
  banner: string;
-    bannerSettings?: {quality: number;}
+  bannerSettings?: { quality: number };
  longDescription: string;
  shortDescription: string;
  links?: LinkIcon[];
  location: string;
-}
-
+};

 export const LinkIcons: Record<string, IconType> = {
  github: AiFillGithub,
  external: RxOpenInNewWindow,
-    link: AiOutlineLink
-}
+  link: AiOutlineLink,
+};
 export type LinkIcon = {
  icon: keyof typeof LinkIcons;
  location: string;
  newTab?: boolean;
-}
+};
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,19 +5,19 @@ module.exports = {
    extend: {
      colors: {
        zinc: {
-                  850: "#1D1D20"
-              }
+          850: "#1D1D20",
+        },
      },
      fontSize: {
-                '10xl': '10rem',
+        "10xl": "10rem",
      },
      fontFamily: {
-                inter: ["\"Inter\"", "sans-serif"],
-                roboto: ["\"Roboto\"", "sans-serif"],
-                mono: ["\"Roboto Mono\"", "monospace"],
-                hanken: ["\"Hanken Grotesk\"", "sans-serif"],
+        inter: ['"Inter"', "sans-serif"],
+        roboto: ['"Roboto"', "sans-serif"],
+        mono: ['"Roboto Mono"', "monospace"],
+        hanken: ['"Hanken Grotesk"', "sans-serif"],
      },
    },
  },
-plugins: [require('@tailwindcss/typography')],
+  plugins: [require("@tailwindcss/typography")],
 };
--- a/yarn.lock
+++ b/yarn.lock