2 files changed, 39 insertions, 4 deletions
diff --git a/app/about/[name]/page.tsx b/app/about/[name]/page.tsx
new file mode 100644
index 0000000..625af62
--- /dev/null
+++ b/app/about/[name]/page.tsx
@@ -0,0 +1,34 @@
+import Markdown from "markdown-to-jsx";
+import { notFound } from "next/navigation";
+
+import InfoBar from "~/components/InfoBar";
+
+import styles from "~/styles/index.module.css"
+import system from "~/config/system.json"
+
+export default function MemberPage({ params: { name } }) {
+  const member = system.members.find(member => member.name.toLowerCase() === name)
+
+  if (!member) notFound()
+
+  return (
+    <>
+      <main className="mainColumn">
+        <InfoBar memberName={member.name} />
+        <p>{member.bioShort}</p>
+        <Markdown>{member.bioContinued}</Markdown>
+        {member.bioFields?.length && (
+
+          <div className={styles.glance}>
+            {member.bioFields.map(({ name, value }) => (
+              <>
+                <span className={styles.label}>{name}</span>
+                <span>{value}</span>
+              </>
+            ))}
+          </div>
+        )}
+      </main >
+    </>
+  )
+}
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 82d4864..57b9aa7 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,11 +1,12 @@
-import system from '~/config/system.json'
+import Image from 'next/image'
 
+import system from '~/config/system.json'
 import styles from '~/styles/about.module.css'
+import profilePics from '~/utils/profiles'
 
-interface Member {
+export interface Member {
   name: string,
   mainPronouns: string,
-  avatarUrl: string,
   color: string,
   bioShort: string,
   readMore: string,
@@ -22,7 +23,7 @@ export default function About() {
           const style = { "--member-color": member.color } as React.CSSProperties
           return (
             <section className={styles.member} style={style}>
-              <img src={member.avatarUrl} />
+              <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
               <p>