From f9a75bf672b8300ea8028b141249c46509bbe4c5 Mon Sep 17 00:00:00 2001
From: Ashelyn Rose <git@tempest.dev>
Date: Sat, 4 Nov 2023 14:22:15 -0600
Subject: Add corona, adjust styles

---
 app/about/page.tsx | 51 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 8 deletions(-)

(limited to 'app/about/page.tsx')

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 970d76f..863bea9 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -6,6 +6,7 @@ import profilePics from '~/utils/profiles'
 
 export interface Member {
   name: string,
+  featured: boolean,
   mainPronouns: string,
   color: string,
   bioShort: string,
@@ -13,35 +14,69 @@ export interface Member {
 }
 
 export default function About() {
+  const members = system.members as Member[]
+  const featuredMembers : Member[] = members.filter(({featured}) => featured)
+  const nonfeaturedMembers : Member[] = members.filter(({featured}) => !featured)
+
   return (
     <>
       <h1 className="pageTitle">
         About Us
       </h1>
       <main className={styles.container}>
-        {system.members.map((member: Member) => {
+        {featuredMembers.map((member: Member) => {
           const style = { "--member-color": member.color } as React.CSSProperties
           return (
             <section className={styles.member} style={style}>
-              <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
+              <Image
+                alt=""
+                width={150}
+                height={150}
+                src={profilePics[member.name.toLowerCase()]}
+              />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
               <p className={styles.bio}>
                 {member.bioShort}
               </p>
-              <p><a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a></p>
+              <p>
+                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
+              </p>
             </section>
           )
         })}
-      </main >
+      </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
+          Generally the above three members are who interact with others
+          throughout our day to day.  They handle our work, our social relationships,
+          and our broader plans for life.  In addition, our system has another
+          internally-focused member who you will likely not meet unless you seek it out:
         </p>
+        {nonfeaturedMembers.map((member: Member) => {
+          const style = { "--member-color": member.color } as React.CSSProperties
+          return (
+            <section className={`${styles.member} ${styles.lower}`} style={style}>
+              <Image
+                alt=""
+                width={80}
+                height={80}
+                src={profilePics[member.name.toLowerCase()]}
+              />
+              <h2>{member.name}</h2>
+              <p className={styles.pronouns}>{member.mainPronouns}</p>
+              <p className={styles.bio}>
+                {member.bioShort}
+              </p>
+              <p>
+                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
+              </p>
+            </section>
+          )
+        })}
+        <p>For avatar sources, see <a href="https://static.tempest.dev/credit.txt">here</a></p>
       </div>
+
     </>
   )
 }
-- 
cgit 1.4.1