filled out about system page

app/about/page.tsx

@@ -1,12 +1,46 @@
+import system from '~/config/system.json'
+
+import styles from '~/styles/about.module.css'
+
+interface Member {
+  name: string,
+  mainPronouns: string,
+  avatarUrl: string,
+  color: string,
+  bioShort: string,
+  readMore: string,
+}
+
 export default function About() {
   return (
     <>
       <h1 className="pageTitle">
-        About
+        About Us
       </h1>
-      <main className="mainColumn">
-        <p>Maybe we say some things about ourselves?</p>
-      </main>
+      <main className={styles.container}>
+        {system.members.map((member: Member) => {
+          const style = { "--member-color": member.color } as React.CSSProperties
+          return (
+            <section className={styles.member} style={style}>
+              <img src={member.avatarUrl} />
+              <h2>{member.name}</h2>
+              <p className={styles.pronouns}>{member.mainPronouns}</p>
+              <p>
+                {member.bioShort}
+              </p>
+              <p><a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a></p>
+            </section>
+          )
+        })}
+      </main >
+      <div className={styles.summary}>
+        <p>
+          Our system is composed of the above three members.  Generally you
+          don't have to care who is most present at any given time, as we share
+          memory and flow in and out of front pretty often, but we do appreciate
+          when people notice us individually
+        </p>
+      </div>
     </>
   )
 }

config/system.json

@@ -0,0 +1,25 @@
+{
+  "pluralkit": "aypoe",
+  "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"
+  },{
+    "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",
+    "readMore": "Ask me more",
+    "color": "#9495b5"
+  },{
+    "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",
+    "readMore": "see the archive",
+    "color": "#67d4b3"
+  }]
+}

styles/about.module.css

@@ -0,0 +1,62 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  max-width: var(--system-width);
+  width: calc(100vw - 2 * var(--text-padding));
+  margin: 0 auto;
+  margin-top: 75px;
+  justify-content: space-between;
+}
+
+.member {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 280px;
+  box-sizing: border-box;
+  margin: 0 calc(.5 * var(--text-padding));
+  padding: 0 var(--text-padding);
+  background: var(--main-background);
+  box-shadow: var(--card-shadow);
+}
+
+.member img {
+  display: block;
+  width: 150px;
+  box-sizing: border-box;
+  border: solid 4px var(--member-color);
+  border-radius: 75px;
+  margin: 0 auto;
+  margin-top: -75px;
+  user-select: none;
+}
+
+.member h2 {
+  text-align: center;
+  color: var(--member-color);
+  margin: 0;
+}
+
+.member p {
+  margin-top: 0;
+}
+
+.member .pronouns {
+  text-align: center;
+  margin-top: 0;
+}
+
+.member p:nth-last-child(2) {
+  flex: 1;
+}
+
+.member p:last-child {
+  text-align: center;
+}
+
+.summary {
+  width: var(--main-width);
+  box-sizing: border-box;
+  padding: var(--text-padding);
+  margin: 0 auto;
+}

styles/layout.css

@@ -4,6 +4,7 @@
   --min-main-overhang: 100px;
   --header-bar-height: 48px;
   --main-width: 600px;
+  --system-width: 1000px;
   --footer-spacing: 8px;
   --page-background: #262626;
   --main-background: #423c3c;
@@ -11,7 +12,7 @@
   --text-medium:rgba(255,255,255, .75);
   --text-dimmed:rgba(255,255,255, .55);
   --text-padding: 16px;
-
+  --card-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
 }
 
 body {
@@ -134,7 +135,7 @@ main.mainColumn {
   padding: var(--text-padding);
   margin: 0 auto;
   background: var(--main-background);
-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  box-shadow: var(--card-shadow);
 }
 
 header.homepage ~ .mainColumn {

styles/text.css

@@ -1,5 +1,6 @@
 body {
   color: var(--text-medium);
+  font-family: 'Victor Mono', sans-serif;
 }
 
 a {
@@ -30,10 +31,6 @@ em {
   color: var(--text-bright);
 }
 
-main {
-  font-family: 'Victor Mono', sans-serif;
-}
-
 footer {
   font-family: 'Victor Mono', sans-serif;
   opacity: .5;