diff --git a/app/about/page.tsx b/app/about/page.tsx
index dd04ccc..82d4864 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,12 +1,46 @@
+import system from '~/config/system.json'
+
+import styles from '~/styles/about.module.css'
+
+interface Member {
+ name: string,
+ mainPronouns: string,
+ avatarUrl: string,
+ color: string,
+ bioShort: string,
+ readMore: string,
+}
+
export default function About() {
return (
<>
- About
+ About Us
-
- Maybe we say some things about ourselves?
-
+
+ {system.members.map((member: Member) => {
+ const style = { "--member-color": member.color } as React.CSSProperties
+ return (
+
+
+ {member.name}
+ {member.mainPronouns}
+
+ {member.bioShort}
+
+ {member.readMore}
+
+ )
+ })}
+
+
+
+ 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
+
+
>
)
}
diff --git a/config/system.json b/config/system.json
new file mode 100644
index 0000000..d71df22
--- /dev/null
+++ b/config/system.json
@@ -0,0 +1,25 @@
+{
+ "pluralkit": "aypoe",
+ "members": [{
+ "name": "rose",
+ "mainPronouns": "they/them",
+ "avatarUrl": "https://placekitten.com/200/200",
+ "bioShort": "web developer and system administrator, i'm the part of us that spends most of my time online and maintains our technical infrastructure",
+ "readMore": "read my docs",
+ "color": "#df5c87"
+ },{
+ "name": "Dawn",
+ "mainPronouns": "she/her",
+ "avatarUrl": "https://placekitten.com/200/200",
+ "bioShort": "As our artist, our performer, and our orator I'm the one of us who maintains in-person relationships and makes sure we care for each other",
+ "readMore": "Ask me more",
+ "color": "#9495b5"
+ },{
+ "name": "echo",
+ "mainPronouns": "it/its",
+ "avatarUrl": "https://placekitten.com/200/200",
+ "bioShort": "hi! i'm the one who catalogues and digs through our understanding of the outside world. also i don't talk much",
+ "readMore": "see the archive",
+ "color": "#67d4b3"
+ }]
+}
diff --git a/styles/about.module.css b/styles/about.module.css
new file mode 100644
index 0000000..40a9b72
--- /dev/null
+++ b/styles/about.module.css
@@ -0,0 +1,62 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ max-width: var(--system-width);
+ width: calc(100vw - 2 * var(--text-padding));
+ margin: 0 auto;
+ margin-top: 75px;
+ justify-content: space-between;
+}
+
+.member {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ max-width: 280px;
+ box-sizing: border-box;
+ margin: 0 calc(.5 * var(--text-padding));
+ padding: 0 var(--text-padding);
+ background: var(--main-background);
+ box-shadow: var(--card-shadow);
+}
+
+.member img {
+ display: block;
+ width: 150px;
+ box-sizing: border-box;
+ border: solid 4px var(--member-color);
+ border-radius: 75px;
+ margin: 0 auto;
+ margin-top: -75px;
+ user-select: none;
+}
+
+.member h2 {
+ text-align: center;
+ color: var(--member-color);
+ margin: 0;
+}
+
+.member p {
+ margin-top: 0;
+}
+
+.member .pronouns {
+ text-align: center;
+ margin-top: 0;
+}
+
+.member p:nth-last-child(2) {
+ flex: 1;
+}
+
+.member p:last-child {
+ text-align: center;
+}
+
+.summary {
+ width: var(--main-width);
+ box-sizing: border-box;
+ padding: var(--text-padding);
+ margin: 0 auto;
+}
diff --git a/styles/layout.css b/styles/layout.css
index 6c8578d..4052091 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -4,6 +4,7 @@
--min-main-overhang: 100px;
--header-bar-height: 48px;
--main-width: 600px;
+ --system-width: 1000px;
--footer-spacing: 8px;
--page-background: #262626;
--main-background: #423c3c;
@@ -11,7 +12,7 @@
--text-medium:rgba(255,255,255, .75);
--text-dimmed:rgba(255,255,255, .55);
--text-padding: 16px;
-
+ --card-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
body {
@@ -134,7 +135,7 @@ main.mainColumn {
padding: var(--text-padding);
margin: 0 auto;
background: var(--main-background);
- box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+ box-shadow: var(--card-shadow);
}
header.homepage ~ .mainColumn {
diff --git a/styles/text.css b/styles/text.css
index 93364a7..427d526 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -1,5 +1,6 @@
body {
color: var(--text-medium);
+ font-family: 'Victor Mono', sans-serif;
}
a {
@@ -30,10 +31,6 @@ em {
color: var(--text-bright);
}
-main {
- font-family: 'Victor Mono', sans-serif;
-}
-
footer {
font-family: 'Victor Mono', sans-serif;
opacity: .5;