84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
const images = [
|
|
"https://picsum.photos/640/640?random=1",
|
|
"https://picsum.photos/640/800?random=2",
|
|
"https://picsum.photos/800/640?random=3",
|
|
"https://picsum.photos/1000/640?random=4",
|
|
"https://picsum.photos/640/400?random=5",
|
|
"https://picsum.photos/640/800?random=6",
|
|
"https://picsum.photos/810/640?random=7",
|
|
"https://picsum.photos/760/640?random=8",
|
|
"https://picsum.photos/640/900?random=9",
|
|
"https://picsum.photos/1000/640?random=10",
|
|
"https://picsum.photos/640/600?random=11",
|
|
];
|
|
|
|
const columnCount = ref(3);
|
|
|
|
const getColumnImages = (columnNumber: number) =>
|
|
images.filter((_, index) => index % columnCount.value === columnNumber - 1);
|
|
|
|
const updateColumns = () => {
|
|
if (window.innerWidth < 768) {
|
|
columnCount.value = 1;
|
|
} else if (window.innerWidth < 1152) {
|
|
columnCount.value = 2;
|
|
} else {
|
|
columnCount.value = 3;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
updateColumns();
|
|
window.addEventListener("resize", updateColumns);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", updateColumns);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono,monospace]"
|
|
>
|
|
<div class="flex gap-6">
|
|
<div
|
|
v-for="col in columnCount"
|
|
:key="col"
|
|
class="flex-1 flex flex-col gap-6"
|
|
>
|
|
<header v-if="col === 1" class="pr-2 pb-6">
|
|
<UButton
|
|
icon="i-lucide-arrow-left"
|
|
size="md"
|
|
color="neutral"
|
|
variant="link"
|
|
:ui="{
|
|
base: 'px-0 text-neutral-600 hover:text-neutral-400',
|
|
leadingIcon: 'size-4',
|
|
}"
|
|
>Back to Home</UButton
|
|
>
|
|
|
|
<h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
|
|
<p class="text-neutral-600 text-sm mt-2 w-4/5">
|
|
Started on March 7th, 2025. I love macro photography of insects and
|
|
flowers.
|
|
</p>
|
|
</header>
|
|
<div
|
|
v-for="(image, idx) in getColumnImages(col)"
|
|
:key="idx"
|
|
class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
|
|
>
|
|
<img
|
|
:src="image"
|
|
class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|