Add corona, adjust styles

2 files changed, 48 insertions, 13 deletions

diff --git a/app/about/[name]/page.tsx b/app/about/[name]/page.tsx
index 411a2f0..afdbe29 100644
--- a/app/about/[name]/page.tsx
+++ b/app/about/[name]/page.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import Markdown from "markdown-to-jsx";
 import { notFound } from "next/navigation";
 
@@ -20,16 +21,15 @@ export default function MemberPage({ params: { name } }) {
     <>
       <main className="mainColumn">
         <InfoBar memberName={member.name} />
-        <p>{member.bioShort}</p>
-        <Markdown>{member.bioContinued}</Markdown>
+        <Markdown outer="short">{member.bioShort}</Markdown>
+        <Markdown outer="long">{member.bioContinued}</Markdown>
         {member.bioFields?.length && (
-
           <div className={styles.glance}>
             {member.bioFields.map(({ name, value }) => (
-              <>
+              <Fragment key={name}>
                 <span className={styles.label}>{name}</span>
                 <span>{value}</span>
-              </>
+              </Fragment>
             ))}
           </div>
         )}
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>
+
     </>
   )
 }