primitive gallery on indexpage

components/IndexGallery/IndexGallery.module.scss

@@ -0,0 +1,55 @@
+.gallerycontainer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	@media screen and (max-width: 800px) {
+		flex-direction: column;
+		align-items: center;
+	}
+	gap: 1.5rem;
+	.galleryimg {
+		position: relative;
+		@media screen and (max-width: 800px) {
+			text-decoration: none;
+		}
+		img {
+			max-height: 18rem;
+			border-radius: 8px;
+			@media screen and (max-width: 800px) {
+				max-width: 250px;
+			}
+		}
+		article {
+			position: absolute;
+			backdrop-filter: blur(8px);
+			background: rgba(#fff, 0.4);
+			color: var(--backdrop);
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: baseline;
+			justify-content: space-between;
+			padding: 0.25rem 0.5rem;
+			border-radius: 8px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			transition-duration: 100ms;
+			opacity: 0;
+			@media screen and (max-width: 800px) {
+				display: block;
+				position: unset;
+				background: unset;
+				color: var(--white0);
+				padding: 0;
+				opacity: 1;
+			}
+		}
+		&:hover {
+			article {
+				opacity: 1;
+			}
+		}
+	}
+}

components/IndexGallery/IndexGallery.tsx

@@ -0,0 +1,32 @@
+import styles from "./IndexGallery.module.scss";
+import gallery from "../../data/gallery.json";
+import Link from "next/link";
+
+const IndexGallery = () => {
+	return (
+		<>
+			<main>
+				<h2>galeria zdjęć idących mocno</h2>
+			</main>
+			<main className={styles.gallerycontainer}>
+				{gallery.map((entry) => {
+					return (
+						<Link
+							key={entry.link}
+							href={entry.link}
+							className={styles.galleryimg}
+						>
+							<img src={entry.link} alt={entry.description} />
+							<article>
+								<h3>{entry.title}</h3>
+								<p>{entry.meta}</p>
+							</article>
+						</Link>
+					);
+				})}
+			</main>
+		</>
+	);
+};
+
+export { IndexGallery };

data/gallery.json

@@ -0,0 +1,20 @@
+[
+	{
+		"title": "RemCon 2022",
+		"description": "Bavil, Dzioba, Mollin i BeElephant pozują nad morzem.",
+		"meta": "Gdynia, 25.02.2022",
+		"link": "https://media.discordapp.net/attachments/719165033090908190/946703702864060466/20220225_104137.jpg"
+	},
+	{
+		"title": "Mollin Stream II",
+		"description": "BeElephant i Mollin w kompromitujących przebraniach.",
+		"meta": "Poznań, 02.12.2022",
+		"link": "https://media.discordapp.net/attachments/719166032714924045/1048341477329227847/image.png"
+	},
+	{
+		"title": "Morasko Chill",
+		"description": "Album cover dla nieistniejącej płyty, featuring BeElephant, J4roid, Mollin i MrMichal564.",
+		"meta": "Poznań, 11.2022",
+		"link": "https://media.discordapp.net/attachments/719165033090908190/1043955363327783042/Pamiec_wody_o_jabku.jpg"
+	}
+]

pages/index.tsx

@@ -4,6 +4,7 @@ import { SEO } from "../components/SEO";
 import { Icon, IconSet } from "../components/Icon";
 import splashes from "../data/splashes.json";
 import Link from "next/link";
+import { IndexGallery } from "../components/IndexGallery/IndexGallery";
 
 const PageIndex = () => {
 	const [splash, setSplash] = useState("");
@@ -64,6 +65,7 @@ const PageIndex = () => {
 					github <Icon icon={IconSet.GitHub} />
 				</Link>
 			</main>
+			<IndexGallery />
 		</>
 	);
 };