adjust /o-gractwie styling, add 1st profpage, add keys to generated items

data/administracja.json

@@ -2,7 +2,8 @@
 	{
 		"name": "jamesen",
 		"desc": "Frontendowiec nie jebany.",
-		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
+		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg",
+		"profilehref": "jamesen"
 	},
 	{
 		"name": "Mollin",

pages/o-gractwie.tsx

@@ -22,8 +22,9 @@ const PageInfo = () => {
 							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”.
+							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ć
@@ -48,6 +49,10 @@ const PageInfo = () => {
 				<div className={styles.persons}>
 					{administracja.map((el) => {
 						return (
+							<Link
+								key={el.name}
+								href={el.profilehref ? `/profile/${el.profilehref}` : ""}
+							>
 								<article>
 									<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
 									<div>
@@ -55,6 +60,7 @@ const PageInfo = () => {
 										<p>{el.desc || "brak opisu."}</p>
 									</div>
 								</article>
+							</Link>
 						);
 					})}
 				</div>

pages/profile/jamesen.tsx

@@ -0,0 +1,5 @@
+const ProfileJamesen = () => {
+	return <main>Hello, this is jamesen's profile page!!</main>;
+};
+
+export default ProfileJamesen;

styles/oGractwie.module.scss

@@ -44,8 +44,13 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: center;
 	margin-top: 1rem;
-	gap: 1rem;
+	gap: 1.5rem;
+	a {
+		color: inherit;
+		text-decoration: inherit;
+	}
 	article {
 		--radius: 6px;
 		flex: 1;
@@ -53,6 +58,7 @@
 		flex-direction: row;
 		background: var(--black1);
 		border-radius: var(--radius);
+		box-shadow: var(--shadow0);
 		img {
 			width: 128px;
 			max-width: 156px;