add involvements

src/app/orgs/organizations.json

@@ -0,0 +1,54 @@
+[
+  {
+    "name": "abtmtr.link",
+    "main": {
+      "title": "Systems Administrator",
+      "email": "me@abtmtr.link",
+      "url": "https://abtmtr.link/"
+    },
+    "involvement": [
+      {
+        "description": "It's me",
+        "start": "August 2023"
+      }
+    ]
+  },
+  {
+    "name": "Fyra Labs",
+    "main": {
+      "title": "Artist in Residence",
+      "email": "mtr@fyralabs.com",
+      "url": "https://fyralabs.com/about/"
+    },
+    "involvement": [
+      {
+        "description": "Testing for UM on ARM Chromebooks",
+        "supervisor": "Owen Zimmerman",
+        "start": "February 2024"
+      },
+      {
+        "description": "Drew Plasmanine art for Jaiden and Lleyton",
+        "date": "March 2024"
+      },
+      {
+        "description": "Miscellaneous involvement",
+        "start": "April 2024"
+      }
+    ]
+  },
+  {
+    "name": "Team Elrant",
+    "main": {
+      "title": "Member",
+      "email": "abtmtr@elrant.team",
+      "url": "https://github.com/orgs/elrant/people"
+    },
+    "involvement": [
+      {
+        "_type": "default",
+        "description": "Member",
+        "start": "May 2024"
+      }
+    ]
+  }
+]

src/app/orgs/page.tsx

@@ -0,0 +1,56 @@
+import { MainLayout } from "@/layout/MainLayout/MainLayout";
+import Link from "next/link";
+import o from "./organizations.json";
+import { ConditionalNull } from "@/components/utility/Conditional";
+
+export default async function Home() {
+  const organizations: {
+    name: string,
+    main: {
+      title: string,
+      email?: string,
+      url: string
+    },
+    involvement: {
+      description: string,
+      supervisor?: string,
+      start?: string,
+      date?: string,
+      end?: string
+    }[]
+  }[] = o;
+  return (
+    <MainLayout currentPage="/orgs/" title="Organizations">
+      <img className="headerImage" src="/headers/orgs.png" alt="ORGANIZATIONS"></img>
+      <p>Organizations, corporations, companies, or just general groups I'm a part of.</p>
+      <p>All of it's listed here, as well as my work for them.</p>
+      {organizations.map((organization) => (<div style={{margin: "2em 0"}}>
+        <h2>{organization.name}</h2>
+        <p><a href={organization.main.url}>{organization.main.title}</a>
+        <ConditionalNull condition={organization.main.email != null}>
+          {" - "}<a href={`mailto:${organization.main.email}`}>{organization.main.email}</a>
+        </ConditionalNull>
+        </p>
+        {organization.involvement.map((involvement) => (<>
+          <blockquote>
+            <p>{involvement.description}</p>
+            <p>
+            <ConditionalNull condition={involvement.supervisor != null}>
+              <small>{involvement.supervisor}</small>
+            </ConditionalNull>
+            <ConditionalNull condition={involvement.supervisor != null && (involvement.start || involvement.date) != null}>
+              <small>{" - "}</small>
+            </ConditionalNull>
+            <ConditionalNull condition={(involvement.start || involvement.date) != null}>
+              <small>{involvement.start || involvement.date}</small>
+            </ConditionalNull>
+            <ConditionalNull condition={involvement.end != null}>
+              {" - "}<small>{involvement.end}</small>
+            </ConditionalNull>
+            </p>
+          </blockquote>
+        </>))}
+      </div>))}
+    </MainLayout>
+  )
+}

src/layout/MainLayout/Sidebar/Main/Main.tsx

@@ -110,6 +110,18 @@ export function SidebarMain({currentPage}:{currentPage:string}) {
             <span>Stories</span>
         </div>
       </Link>
+      <Link 
+        href="/orgs/" 
+        className={currentPage.includes("/orgs/") ? styles.Main_List_CurrentLink : ""} 
+        tabIndex={-1}
+        // onClick={() => currentPage.includes("/orgs/") ? impossiblePlay() : openPlay()}
+        // onMouseEnter={hoverPlay}
+      >
+        <div className={`fw ${styles.Main_List_Button}`}>
+            <span className="icon">corporate_fare</span>
+            <span>Organizations</span>
+        </div>
+      </Link>
       <Link 
         href="/links/" 
         className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""} 

src/styles/style.css

@@ -4,7 +4,7 @@
     --bg-1: hsl(120, 20%, 6.25%);
     --bg-2: hsl(120, 20%, 12.5%);
     --bg-3: hsl(120, 20%, 25%);
-  --neutral: #80808080;
+  --neutral: hsl(120, 20%, 25%);
   --fg-0: hsl(120, 20%, 50%);
     --fg-1: hsl(120, 20%, 62.5%);
     --fg-2: hsl(120, 20%, 75%);
@@ -42,6 +42,13 @@ a {
   color: var(--accent-color);
 }
 
+hr {
+  color: var(--neutral);
+  border-color: var(--neutral);
+  background-color: var(--neutral);
+  height: 1px;
+  border-top-width: 0;
+}
 span {
   vertical-align: middle;
 }