From d3d837e58fef94c85ac1bc5ef9d5bb7d81f98173 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 10 Aug 2024 00:04:01 +0200
Subject: [PATCH] feat: :sparkles: Add Team section to front page

---
 app/page.tsx        | 105 ++++++++++++++++++++++++++++++++++++++++++++
 components/Team.tsx |  56 +++++++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 components/Team.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 1aa3510..7b18adc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import { Resource, type ResourceType } from "@/components/Resources";
+import { TeamMember } from "@/components/Team";
 import { wrapper } from "@/components/mdx";
 import type { Metadata } from "next";
 import type { FC } from "react";
@@ -96,6 +97,110 @@ const Page: FC = () => {
                         <Resource key={resource.name} resource={resource} />
                     ))}
                 </div>
+
+                <h2>Team</h2>
+
+                <div className="not-prose mt-4 grid grid-cols-1 max-w-full gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-3 dark:border-white/5">
+                    <TeamMember
+                        name="Jesse"
+                        bio="Lead developer, spec design, UI design."
+                        username="CPlusPatch"
+                        avatarUrl="https://avatars.githubusercontent.com/u/42910258?v=4"
+                        socials={[
+                            {
+                                name: "Website",
+                                icon: "bx:link",
+                                url: "https://cpluspatch.com",
+                            },
+                            {
+                                name: "GitHub",
+                                icon: "bxl:github",
+                                url: "https://github.com/cpluspatch",
+                            },
+                            {
+                                name: "Fediverse",
+                                icon: "bxl:mastodon",
+                                url: "https://mk.cpluspatch.com/@jessew",
+                            },
+                            {
+                                name: "Lysand",
+                                icon: "bx:server",
+                                url: "https://social.lysand.org/@jessew",
+                            },
+                            {
+                                name: "Matrix",
+                                icon: "simple-icons:matrix",
+                                url: "https://matrix.to/#/@jesse:cpluspatch.dev",
+                            },
+                            {
+                                name: "Signal",
+                                icon: "simple-icons:signal",
+                                url: "https://signal.me/#eu/mdX6iV0ayndNmJst43sNtlw3eFXgHSm7if4Y/mwYT1+qFDzl1PFAeroW+RpHGaRu",
+                            },
+                            {
+                                name: "Email",
+                                icon: "bx:bxs-envelope",
+                                url: "mailto:contact@cpluspatch.com",
+                            },
+                        ]}
+                    />
+                    <TeamMember
+                        name="April"
+                        bio="Spec design, ActivityPub bridge, emotional support cat."
+                        username="aprl"
+                        avatarUrl="https://avatars.githubusercontent.com/u/30842467?v=4"
+                        socials={[
+                            {
+                                name: "GitHub",
+                                icon: "bxl:github",
+                                url: "https://github.com/cutestnekoaqua",
+                            },
+                            {
+                                name: "Fediverse",
+                                icon: "bxl:mastodon",
+                                url: "https://donotsta.re/april",
+                            },
+                            {
+                                name: "Lysand",
+                                icon: "bx:server",
+                                url: "https://social.lysand.org/@aprl",
+                            },
+                            {
+                                name: "Matrix",
+                                icon: "simple-icons:matrix",
+                                url: "https://matrix.to/#/@aprl:uwu.is",
+                            },
+                            {
+                                name: "Email",
+                                icon: "bx:bxs-envelope",
+                                url: "mailto:aprl@acab.dev",
+                            },
+                        ]}
+                    />
+                    <TeamMember
+                        name="Anna"
+                        username="devminer"
+                        avatarUrl="https://i.imgur.com/grHNY7G.png"
+                        bio="Golang SDK, spec design."
+                        socials={[
+                            {
+                                name: "Website",
+                                icon: "bx:link",
+                                url: "https://devminer.xyz/",
+                            },
+                            {
+                                name: "GitHub",
+                                icon: "bxl:github",
+                                url: "https://github.com/TheDevMinerTV",
+                            },
+                            {
+                                name: "Matrix",
+                                icon: "simple-icons:matrix",
+                                url: "https://matrix.to/#/@devminer:devminer.xyz",
+                            },
+                        ]}
+                    />
+                </div>
             </>
         ),
     });
diff --git a/components/Team.tsx b/components/Team.tsx
new file mode 100644
index 0000000..4e98a41
--- /dev/null
+++ b/components/Team.tsx
@@ -0,0 +1,56 @@
+import { Icon } from "@iconify-icon/react/dist/iconify.mjs";
+import type { FC } from "react";
+
+export const TeamMember: FC<{
+    name: string;
+    bio?: string;
+    username?: string;
+    avatarUrl: string;
+    socials?: {
+        name: string;
+        url: string;
+        icon: string;
+    }[];
+}> = ({ name, bio, socials, avatarUrl, username }) => {
+    return (
+        <div className="bg-stone-950 rounded-lg overflow-hidden pb-4 h-full ring-1 ring-black/10 dark:ring-white/10 flex flex-col">
+            <div className="bg-pink-100 py-8" />
+
+            <div className="px-4 -mt-6 flex items-center gap-2">
+                <div className="border-8 border-stone-950 relative bg-white rounded-full ">
+                    <img
+                        className="rounded-full size-20"
+                        src={avatarUrl}
+                        alt={`${name}'s avatar`}
+                    />
+                    <div className="absolute bg-green-600 bottom-0 right-0 p-2 rounded-full border-[6px] border-gray-900" />
+                </div>
+
+                <div className="font-bold text-xl flex flex-col mt-4">
+                    <h1 className="text-white">{name}</h1>
+                    <span className="text-gray-400">@{username}</span>
+                </div>
+            </div>
+
+            <div className="px-6 mt-4 text-gray-300">{bio}</div>
+
+            <ul className="pt-6 mt-auto flex gap-5 list-none px-6 flex-wrap">
+                {socials?.map((social) => (
+                    <li className="!m-0" key={social.name}>
+                        <a
+                            href={social.url}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                        >
+                            <Icon
+                                icon={social.icon}
+                                className="size-5 text-gray-300"
+                                width="unset"
+                            />
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};