|
|
|
import Link from 'next/link'
|
|
|
|
import Image from 'components/Image'
|
|
|
|
|
|
|
|
import system from '~/config/system.json'
|
|
|
|
import styles from '~/styles/about.module.css'
|
|
|
|
|
|
|
|
export interface Member {
|
|
|
|
name: string,
|
|
|
|
featured: boolean,
|
|
|
|
mainPronouns: string,
|
|
|
|
color: string,
|
|
|
|
bioShort: string,
|
|
|
|
readMore: string,
|
|
|
|
profileImg: string,
|
|
|
|
}
|
|
|
|
|
|
|
|
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}>
|
|
|
|
{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={member.profileImg}
|
|
|
|
/>
|
|
|
|
<h2>{member.name}</h2>
|
|
|
|
<p className={styles.pronouns}>{member.mainPronouns}</p>
|
|
|
|
<p className={styles.bio}>
|
|
|
|
{member.bioShort}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
|
|
|
|
</p>
|
|
|
|
</section>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</main>
|
|
|
|
<div className={styles.summary}>
|
|
|
|
<p>
|
|
|
|
Generally unless you know us well, the above three members are who you
|
|
|
|
will be interacting with day to day. They handle the majority of our work,
|
|
|
|
conversations, and decisions throughout the day. In addition though, if you
|
|
|
|
get to know us better you will likely meet one or more of the following more
|
|
|
|
private members:
|
|
|
|
</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={member.profileImg}
|
|
|
|
/>
|
|
|
|
<h2>{member.name}</h2>
|
|
|
|
<p className={styles.pronouns}>{member.mainPronouns}</p>
|
|
|
|
<p className={styles.bio}>
|
|
|
|
{member.bioShort}
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<Link href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</Link>
|
|
|
|
</p>
|
|
|
|
</section>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
<p>For avatar sources, see <a href="https://static.tempest.dev/credit.txt">here</a></p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|