You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import Image from 'next/image'
|
|
|
|
import system from '~/config/system.json'
|
|
import styles from '~/styles/about.module.css'
|
|
import profilePics from '~/utils/profiles'
|
|
|
|
export interface Member {
|
|
name: string,
|
|
mainPronouns: string,
|
|
color: string,
|
|
bioShort: string,
|
|
readMore: string,
|
|
}
|
|
|
|
export default function About() {
|
|
return (
|
|
<>
|
|
<h1 className="pageTitle">
|
|
About Us
|
|
</h1>
|
|
<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}>
|
|
<Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
|
|
<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>
|
|
</>
|
|
)
|
|
}
|