Merge pull request #3 from gractwo/bluemeth

/o-gractwo & /profile/[id]
2022-12-22 17:13:42 +01:00
parent 8e803af7e9 21e3b32e4b
commit 31af1f6f85
10 changed files with 482 additions and 70 deletions
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -1,13 +1,16 @@
-enum IconSet {
-	Menu,
-	Twitter,
-	GitHub,
-	YouTube,
-	Discord,
-}
+type iconselection =
+	| "Menu"
+	| "Users"
+	| "Link2"
+	| "ExternalLink"
+	| "Code"
+	| "Twitter"
+	| "GitHub"
+	| "YouTube"
+	| "Discord";

 type iconprops = {
-	icon: IconSet;
+	icon: iconselection;
 	width?: number;
 	height?: number;
 } & React.SVGProps<SVGSVGElement>;
@@ -18,7 +21,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 		// - add {width || ogWidth}
 		// - add {height || ogHeight}
 		// - add {...props}
-		case IconSet.Menu:
+		case "Menu":
 			return (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +41,86 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			);
-		case IconSet.Twitter:
+		case "Users":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-users"
+					{...props}
+				>
+					<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+					<circle cx="9" cy="7" r="4" />
+					<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+					<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+				</svg>
+			);
+		case "Link2":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-link-2"
+					{...props}
+				>
+					<path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" />
+					<line x1="8" y1="12" x2="16" y2="12" />
+				</svg>
+			);
+		case "ExternalLink":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-external-link"
+					{...props}
+				>
+					<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+					<polyline points="15 3 21 3 21 9" />
+					<line x1="10" y1="14" x2="21" y2="3" />
+				</svg>
+			);
+		case "Code":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-code"
+					{...props}
+				>
+					<polyline points="16 18 22 12 16 6" />
+					<polyline points="8 6 2 12 8 18" />
+				</svg>
+			);
+		case "Twitter":
 			// twitter icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -54,7 +136,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
 				</svg>
 			);
-		case IconSet.GitHub:
+		case "GitHub":
 			// github icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -70,7 +152,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 				</svg>
 			);
-		case IconSet.YouTube:
+		case "YouTube":
 			// youtube icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -86,7 +168,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
 				</svg>
 			);
-		case IconSet.Discord:
+		case "Discord":
 			// discord icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -102,7 +184,10 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
 				</svg>
 			);
+		default:
+			return <></>;
 	}
 };

-export { Icon, IconSet };
+export { Icon };
+export type { iconselection };
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -1,6 +1,6 @@
 import styles from "./Navigation.module.scss";
 import { GractwoLogo } from "../Logo";
-import { Icon, IconSet } from "../Icon";
+import { Icon } from "../Icon";

 import navigation from "../../data/navigation.json";
 import Link from "next/link";
@@ -26,7 +26,7 @@ const Navigation = () => {
 					);
 				})}
 				<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
-					<Icon icon={IconSet.Menu} />
+					<Icon icon="Menu" />
 					{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
 					<div className={styles.innerdropdown}>
 						{navigation.map((navlink) => {
--- a/data/administracja.json
+++ b/data/administracja.json
@@ -0,0 +1,58 @@
+[
+	{
+		"name": "jamesen",
+		"desc": "project pioneer.",
+		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg",
+		"devBadge": true,
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."],
+			"links": [
+				{
+					"resname": "Website",
+					"href": "https://manczak.net"
+				}
+			]
+		}
+	},
+	{
+		"name": "Mollin",
+		"desc": "porucznik essy.",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3",
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
+		}
+	},
+	{
+		"name": "Elephant",
+		"desc": "osobnik demencyjny.",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A",
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
+		}
+	},
+	{
+		"name": "Dzioba",
+		"desc": "backend bastard.",
+		"img": "https://avatars.githubusercontent.com/u/62724833?v=4",
+		"devBadge": true,
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
+		}
+	},
+	{
+		"name": "KuOlek",
+		"desc": "duch. (bo go nie ma)",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121",
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
+		}
+	},
+	{
+		"name": "Bavil Gravlax",
+		"desc": "śpiący rękawek.",
+		"img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657",
+		"profile": {
+			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
+		}
+	}
+]
--- a/data/links.json
+++ b/data/links.json
@@ -3,30 +3,39 @@
 		"name": "Discord",
 		"href": "https://discord.gg/NBXq95C",
 		"hrefalias": ["/discord", "/dsc", "/dc"],
-		"desc": "Nasz serwer na Discordzie!"
+		"desc": "Nasz serwer na Discordzie!",
+		"icon": "Discord"
 	},
 	{
 		"name": "YouTube",
 		"href": "https://www.youtube.com/@gractwopl",
 		"hrefalias": ["/youtube", "/yt"],
-		"desc": "Nasz kanał na YouTubie!"
+		"desc": "Nasz kanał na YouTubie!",
+		"icon": "YouTube"
 	},
 	{
 		"name": "Twitter",
 		"href": "https://twitter.com/gractwo",
 		"hrefalias": ["/twitter", "/twt"],
-		"desc": "Nasz profil na Twitterze!"
+		"desc": "Nasz profil na Twitterze!",
+		"icon": "Twitter"
 	},
 	{
 		"name": "GitHub",
 		"href": "https://github.com/gractwo",
 		"hrefalias": ["/github", "/gh"],
-		"desc": "Nasz org na GitHubie!"
+		"desc": "Nasz org na GitHubie!",
+		"icon": "GitHub"
+	},
+	{
+		"href": "/o-gractwie#sklad-administracji",
+		"hrefalias": ["/profile"]
 	},
 	{
 		"name": "Kod Źródłowy",
 		"href": "https://github.com/gractwo/gractwo-web",
 		"hrefalias": ["/source", "/oss"],
-		"desc": "Kod źródłowy naszej strony internetowej."
+		"desc": "Kod źródłowy naszej strony internetowej.",
+		"icon": "Code"
 	}
 ]
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,7 @@
 import styles from "../styles/Index.module.scss";
 import { useEffect, useState } from "react";
 import { SEO } from "../components/SEO";
-import { Icon, IconSet } from "../components/Icon";
+import { Icon } from "../components/Icon";
 import splashes from "../data/splashes.json";
 import Link from "next/link";
 import { IndexGallery } from "../components/IndexGallery/IndexGallery";
@@ -21,7 +21,6 @@ const PageIndex = () => {
 				return res.text();
 			})
 			.then((data) => {
-				console.log(data);
 				setMemberCount(data);
 			})
 			.catch((err) => {
@@ -41,8 +40,6 @@ const PageIndex = () => {
 						&bdquo;{splash || "..."}&rdquo;
 					</h1>
 					<p>{welcometext}</p>
-					<br />
-					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
 			<div className={styles.statscontainer}>
@@ -65,18 +62,18 @@ const PageIndex = () => {
 					</article>
 				</main>
 			</div>
-			<main className={styles.chips}>
-				<Link href="/discord" className={styles.chip}>
-					discord <Icon icon={IconSet.Discord} />
+			<main className="chips">
+				<Link href="/discord" className="chip">
+					discord <Icon icon="Discord" />
 				</Link>
-				<Link href="/youtube" className={styles.chip}>
-					youtube <Icon icon={IconSet.YouTube} />
+				<Link href="/youtube" className="chip">
+					youtube <Icon icon="YouTube" />
 				</Link>
-				<Link href="/twitter" className={styles.chip}>
-					twitter <Icon icon={IconSet.Twitter} />
+				<Link href="/twitter" className="chip">
+					twitter <Icon icon="Twitter" />
 				</Link>
-				<Link href="/github" className={styles.chip}>
-					github <Icon icon={IconSet.GitHub} />
+				<Link href="/github" className="chip">
+					github <Icon icon="GitHub" />
 				</Link>
 			</main>
 			<IndexGallery />
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -1,10 +1,93 @@
+import { GractwoLogo } from "../components/Logo";
 import { SEO } from "../components/SEO";
+import styles from "../styles/oGractwie.module.scss";
+import Link from "next/link";
+import { Icon } from "../components/Icon";
+import { iconselection } from "../components/Icon";
+import administracja from "../data/administracja.json";
+import links from "../data/links.json";

 const PageInfo = () => {
 	return (
 		<>
 			<SEO title="o gractwie" />
-			<main>Miejsce na stronkę od informacji nt. Gractwa.</main>
+			<main>
+				<div className={styles.biglogocontainer}>
+					<GractwoLogo />
+					<article>
+						<h1>
+							<GractwoLogo />
+							Gractwo
+						</h1>
+						<p style={{ textAlign: "justify" }}>
+							Gractwo jest nieformalną organizacją i społecznością osób
+							zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku
+							jest zreszeniem ludzi w dużej mierze znających się nawzajem i
+							spędzających razem „na Gractwie” czas.
+							{/* Genezą nazwy jest złączenie słów „Gracz” i „Bractwo”. */}
+							{/*  */}
+							{/* discordowa społeczność kryptogenshinowa która jest yyy często
+							charakteryzuje się łączeniem przez relacje interpersonalne
+							kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać
+							naszą kryptogenshinowość */}
+							{/* THANKS, MOLLIN */}
+						</p>
+					</article>
+				</div>
+				<div className="chips">
+					<Link href="#sklad-administracji" className="chip">
+						skład administracji
+						<Icon icon="Users" />
+					</Link>
+					<Link href="#linki" className="chip">
+						linki i przekierowania
+						<Icon icon="Link2" />
+					</Link>
+				</div>
+			</main>
+			<main id="sklad-administracji">
+				<h2>skład administracji</h2>
+				<div className={styles.persons}>
+					{administracja.map((el) => {
+						return (
+							<Link
+								key={el.name}
+								href={`/profile/${el.name
+									.replaceAll(" ", "-")
+									.toLocaleLowerCase()}`}
+							>
+								<article>
+									<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
+									<div>
+										<h3>{el.name}</h3>
+										<p>{el.desc || "brak opisu."}</p>
+										{el.devBadge ? (
+											<span className={styles.devBadge}>DEV</span>
+										) : (
+											""
+										)}
+									</div>
+								</article>
+							</Link>
+						);
+					})}
+				</div>
+			</main>
+			<main id="linki">
+				<h2>linki i przekierowania</h2>
+				<div className="chips">
+					{links.map((el) => {
+						if (el.name) {
+							return (
+								<Link className="chip" key={el.name} href={el.href}>
+									{el.name}
+									{el.icon ? <Icon icon={el.icon as iconselection} /> : ""}
+								</Link>
+							);
+						}
+					})}
+				</div>
+			</main>
 		</>
 	);
 };
--- a/pages/profile/[profname]/index.tsx
+++ b/pages/profile/[profname]/index.tsx
@@ -0,0 +1,72 @@
+import { useRouter } from "next/router";
+import administracja from "../../../data/administracja.json";
+
+const ProfilePage = () => {
+	const router = useRouter();
+	const profname = router.query.profname as string;
+	if (
+		administracja
+			.map((el) => {
+				return el.name.replaceAll(" ", "-").toLocaleLowerCase();
+			})
+			.includes(profname)
+	) {
+		const person = administracja.filter((wpis) => {
+			return wpis.name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
+		})[0];
+		return (
+			<main>
+				<div
+					style={{
+						display: "flex",
+						flexDirection: "row",
+						alignItems: "center",
+						gap: "1rem",
+						marginBottom: "1rem",
+					}}
+				>
+					<img
+						src={person.img}
+						alt={`${person.name} profile image`}
+						style={{
+							width: "128px",
+							aspectRatio: "1/1",
+							objectFit: "cover",
+							borderRadius: "50%",
+						}}
+					/>
+					<div>
+						<h1>{person.name}</h1>
+						<p>{person.desc}</p>
+					</div>
+				</div>
+				{person.profile?.bigdesc.map((el, index) => {
+					return <p key={index}>{el || <br />}</p>;
+				})}
+			</main>
+		);
+	} else {
+		return (
+			<main>
+				<h1>Sorki!{" :("}</h1>
+				<p style={{ lineHeight: "30px" }}>
+					Sprawdź pisownię:
+					<span
+						style={{
+							background: "var(--black1)",
+							boxShadow: "var(--shadow0)",
+							padding: "8px",
+							margin: "10px",
+							borderRadius: "4px",
+						}}
+					>
+						{`/profile/${profname}`}
+					</span>
+					nie jest poprawnym lokatorem profilu.
+				</p>
+			</main>
+		);
+	}
+};
+
+export default ProfilePage;
--- a/styles/Index.module.scss
+++ b/styles/Index.module.scss
@@ -92,38 +92,3 @@
 		}
 	}
 }
-.chips {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: 1rem;
-}
-.chip {
-	display: inline-flex;
-	text-decoration: none;
-	gap: 0.5rem;
-	align-items: center;
-	color: inherit;
-	padding: 6px 8px;
-	border: 1px solid var(--grey);
-	border-radius: 8px;
-	transition-duration: 100ms;
-	text-rendering: geometricPrecision;
-	// font-family: var(--fonts-bold);
-	// color: var(--grey);
-	svg {
-		color: var(--grey);
-	}
-	&:hover,
-	&:focus {
-		outline: none;
-		background: var(--black1);
-		border: 1px solid var(--black1);
-		box-shadow: var(--shadow0);
-		transform: scale(1.1);
-		svg {
-			color: var(--color);
-		}
-	}
-}
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -39,3 +39,39 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+.chip {
+	display: inline-flex;
+	text-decoration: none;
+	gap: 0.5rem;
+	align-items: center;
+	color: inherit;
+	padding: 6px 8px;
+	border: 1px solid var(--grey);
+	border-radius: 8px;
+	transition-duration: 100ms;
+	text-rendering: geometricPrecision;
+	// font-family: var(--fonts-bold);
+	// color: var(--grey);
+	svg {
+		color: var(--grey);
+	}
+	&:hover,
+	&:focus {
+		outline: none;
+		background: var(--black1);
+		border: 1px solid var(--black1);
+		box-shadow: var(--shadow0);
+		transform: scale(1.1);
+		svg {
+			color: var(--color);
+		}
+	}
+}
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -0,0 +1,107 @@
+.biglogocontainer {
+	display: flex;
+	flex-direction: row;
+	background: var(--black1);
+	margin: 1rem 0;
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	svg {
+		min-width: 192px;
+		min-height: 192px;
+		@media screen and (max-width: 800px) {
+			display: none;
+		}
+	}
+	article {
+		background: rgba(white, 5%);
+		border-radius: 8px;
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		@media screen and (max-width: 800px) {
+			border-radius: 8px;
+		}
+		padding: 0.5rem 1rem;
+		h1 {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 1rem;
+			svg {
+				display: inline;
+				min-width: initial;
+				min-height: initial;
+				@media screen and (min-width: 801px) {
+					display: none;
+				}
+			}
+		}
+		p {
+			margin: 6px 0;
+		}
+	}
+}
+.persons {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin-top: 1rem;
+	gap: 1.5rem;
+	a {
+		color: inherit;
+		text-decoration: inherit;
+		article {
+			--radius: 6px;
+			flex: 1;
+			display: flex;
+			flex-direction: row;
+			background: var(--black1);
+			border-radius: var(--radius);
+			box-shadow: var(--shadow0);
+			transition-duration: 100ms;
+			img {
+				width: 128px;
+				max-width: 156px;
+				flex: 1;
+				border-top-left-radius: var(--radius);
+				border-bottom-left-radius: var(--radius);
+				// for alt text
+				color: var(--grey);
+				// for mollin's vertical picture to display well
+				aspect-ratio: 1 / 1;
+				object-fit: cover;
+				object-position: 50% 35%;
+			}
+			div {
+				min-width: 14rem;
+				padding: 0 1rem;
+				position: relative;
+				.devBadge {
+					position: absolute;
+					bottom: 6px;
+					right: 8px;
+					background: rgba(violet, 0.18);
+					font-family: var(--fonts-bold);
+					padding: 1px 4px;
+					border-radius: 2px;
+				}
+			}
+			&:hover {
+				background: var(--black2);
+			}
+		}
+		@media screen and (max-width: 400px) {
+			article {
+				flex-direction: column;
+				width: 100%;
+				img {
+					margin: 1rem auto;
+					border-radius: 8px;
+				}
+				div {
+					padding-bottom: 1rem;
+				}
+			}
+		}
+	}
+}