mirror of
https://github.com/versia-pub/docs.git
synced 2025-12-06 06:18:19 +01:00
feat: ✨ Add Team section to front page
This commit is contained in:
Jesse Wierzbinski
parent
44630831be
commit
d3d837e58f
105
app/page.tsx
105
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>
|
||||
</>
|
||||
),
|
||||
});
|
||||
|
|
|
|||
56
components/Team.tsx
Normal file
56
components/Team.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue