filled out about system page

1 files changed, 38 insertions, 4 deletions

diff --git a/app/about/page.tsx b/app/about/page.tsx
index dd04ccc..82d4864 100644
--- a/app/about/page.tsx
+++ b/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>
     </>
   )
 }