blob: 11b3d742d1d56813723f51e73c459e3afe17ede0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
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>
</>
)
}
|
