blob: 863bea9cf2068df50ffb5432610b0f5dd004f902 (
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
|
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,
featured: boolean,
mainPronouns: string,
color: string,
bioShort: string,
readMore: 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={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>
)
})}
</main>
<div className={styles.summary}>
<p>
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>
</>
)
}
|
