about pages, added profile pictures

app/about/[name]/page.tsx

@@ -0,0 +1,34 @@
+import Markdown from "markdown-to-jsx";
+import { notFound } from "next/navigation";
+
+import InfoBar from "~/components/InfoBar";
+
+import styles from "~/styles/index.module.css"
+import system from "~/config/system.json"
+
+export default function MemberPage({ params: { name } }) {
+  const member = system.members.find(member => member.name.toLowerCase() === name)
+
+  if (!member) notFound()
+
+  return (
+    <>
+      <main className="mainColumn">
+        <InfoBar memberName={member.name} />
+        <p>{member.bioShort}</p>
+        <Markdown>{member.bioContinued}</Markdown>
+        {member.bioFields?.length && (
+
+          <div className={styles.glance}>
+            {member.bioFields.map(({ name, value }) => (
+              <>
+                <span className={styles.label}>{name}</span>
+                <span>{value}</span>
+              </>
+            ))}
+          </div>
+        )}
+      </main >
+    </>
+  )
+}

app/about/page.tsx

@@ -1,11 +1,12 @@
-import system from '~/config/system.json'
+import Image from 'next/image'
 
+import system from '~/config/system.json'
 import styles from '~/styles/about.module.css'
+import profilePics from '~/utils/profiles'
 
-interface Member {
+export interface Member {
   name: string,
   mainPronouns: string,
-  avatarUrl: string,
   color: string,
   bioShort: string,
   readMore: string,
@@ -22,7 +23,7 @@ export default function About() {
           const style = { "--member-color": member.color } as React.CSSProperties
           return (
             <section className={styles.member} style={style}>
-              <img src={member.avatarUrl} />
+              <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
               <p>

components/InfoBar/InfoBar.module.css

@@ -21,14 +21,42 @@
   color: var(--text-dimmed);
 }
 
+.infobar.postMeta img {
+  box-sizing: border-box;
+  border: solid 2px var(--author-color, var(--text-dimmed));
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  margin-right: calc(.5 * var(--text-padding));
+  margin-left: -6px;
+}
+
 .infobar.postMeta .author {
-  color: var(--text-medium);
+  color: var(--author-color, var(--text-medium));
 }
 
 .infobar.postMeta .date {
   font-style: italic;
 }
 
+.infobar.memberProfile img {
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  box-sizing: border-box;
+  border: solid 4px var(--member-color, var(--text-dimmed));
+  margin-right: var(--text-padding);
+  margin-top: calc(-2.5 * var(--text-padding));
+} 
+
+.infobar.memberProfile h1 {
+  color: var(--member-color, var(--text-bright));
+}
+
 .infobar + p {
   margin-top: 0;
 }
+
+.infobar.memberProfile {
+  margin-bottom: 42px;
+}

components/InfoBar/index.tsx

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react'
+import Image from 'next/image'
+
+import system from '~/config/system.json'
+import profilePics from '~/utils/profiles'
 import styles from './InfoBar.module.css'
 
 interface ArbitraryChildrenProps {
@@ -15,8 +19,7 @@ interface PostInfoPros {
 }
 
 interface SystemMemberInfoProps {
-  memberName: string,
-  memberAvatar: string
+  memberName: string
 }
 
 type InfobarProps = (
@@ -36,8 +39,14 @@ export default function InfoBar(props: InfobarProps) {
   }
 
   if ('authorName' in props) {
+    const authorKey = props.authorName.toLowerCase()
+    const author = system.members.find((member) => member.name === props.authorName)
+    const style = { '--author-color': author?.color } as React.CSSProperties
+    const picture = profilePics[authorKey]
+
     return (
-      <aside className={`${styles.infobar} ${styles.postMeta}`}>
+      <aside className={`${styles.infobar} ${styles.postMeta}`} style={style}>
+        {picture && <Image alt="" width={50} height={50} src={picture} />}
         <span>
           by <span className={styles.author}>{props.authorName}</span>;{' '}
           <span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
@@ -47,9 +56,15 @@ export default function InfoBar(props: InfobarProps) {
   }
 
   if ('memberName' in props) {
+    const memberKey = props.memberName.toLowerCase()
+    const member = system.members.find((member) => member.name === props.memberName)
+    const style = { '--member-color': member?.color } as React.CSSProperties
+    const picture = profilePics[memberKey]
+
     return (
-      <aside className={`${styles.infobar} ${styles.sideNote}`}>
-        {props.memberName}
+      <aside className={`${styles.infobar} ${styles.memberProfile}`} style={style}>
+        <Image alt="" width={150} height={150} src={picture} />
+        <h1>{props.memberName}</h1>
       </aside>
     )
   }

config/system.json

@@ -3,23 +3,38 @@
   "members": [{
     "name": "rose",
     "mainPronouns": "they/them",
-    "avatarUrl": "https://placekitten.com/200/200",
     "bioShort": "web developer and system administrator, i'm the part of us that spends most of my time online and maintains our technical infrastructure",
     "readMore": "read my docs",
-    "color": "#df5c87"
+    "bioContinued": "it's become my responsibility to get and hold down a job for us, although when i have spare energy from that i like to work on coding, websites, and other technical persuits\n\npersonality-wise i've been told i can be a bit brash — i think i'm more of a tease but it is what it is",
+    "color": "#df5c87",
+    "bioFields": [
+      {"name": "names:", "value": "rose, or if you know why: callista.  neither capitalized"},
+      {"name": "pronouns:", "value": "they/them.  very occasionally she/her but i'm not usually in the mood"},
+      {"name": "orientation:", "value": "unknown. probably not actually ace, but traumatized.  mostly lesbian in any case"}
+    ]
   },{
     "name": "Dawn",
     "mainPronouns": "she/her",
-    "avatarUrl": "https://placekitten.com/200/200",
     "bioShort": "As our artist, our performer, and our orator I'm the one of us who maintains in-person relationships and makes sure we care for each other",
+    "bioContinued": "Historically I was also the system member responsible for masking the others, but that isn't a role I take as often these days\n\nIf we speak in person, I'm probably involved at some point in that conversation",
     "readMore": "Ask me more",
-    "color": "#9495b5"
+    "color": "#9495b5",
+    "bioFields": [
+      {"name": "Names:", "value": "Dawn.  Perhaps \"Ashelyn Dawn\" if you're feeling fancy"},
+      {"name": "Pronouns:", "value": "She/her, no exceptions"},
+      {"name": "Orientation:", "value": "Asexual, polyromantic lesbian"}
+    ]
   },{
     "name": "echo",
     "mainPronouns": "it/its",
-    "avatarUrl": "https://placekitten.com/200/200",
     "bioShort": "hi! i'm the one who catalogues and digs through our understanding of the outside world. also i don't talk much",
+    "bioContinued": "",
     "readMore": "see the archive",
-    "color": "#67d4b3"
+    "color": "#67d4b3",
+    "bioFields": [
+      {"name": "names:", "value": "echo, ash if you're teasing"},
+      {"name": "pronouns:", "value": "it/its, most neopronouns okay"},
+      {"name": "orientation:", "value": "ace, probably demiromantic"}
+    ]
   }]
 }

styles/about.module.css

@@ -23,6 +23,7 @@
 .member img {
   display: block;
   width: 150px;
+  height: 150px;
   box-sizing: border-box;
   border: solid 4px var(--member-color);
   border-radius: 75px;

utils/profiles.ts

@@ -0,0 +1,7 @@
+import rose from '~/images/profile/rose.png'
+import dawn from '~/images/profile/dawn.png'
+import echo from '~/images/profile/echo.png'
+
+export default {
+  rose, dawn, echo
+}