358 lines
9.2 KiB
Vue
358 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
type ImageMetadata = {
|
|
url: string;
|
|
date: string;
|
|
camera: string;
|
|
lens: string;
|
|
settings?: {
|
|
aperture?: string;
|
|
shutter?: string;
|
|
iso?: string;
|
|
focalLength?: string;
|
|
};
|
|
};
|
|
|
|
const images: ImageMetadata[] = [
|
|
{
|
|
url: "https://picsum.photos/640/640?random=1",
|
|
date: "March 7, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/640/800?random=2",
|
|
date: "March 8, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/800/640?random=3",
|
|
date: "March 10, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/1000/640?random=4",
|
|
date: "March 12, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/640/400?random=5",
|
|
date: "March 15, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/640/800?random=6",
|
|
date: "March 18, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/810/640?random=7",
|
|
date: "March 20, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/760/640?random=8",
|
|
date: "March 22, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/640/900?random=9",
|
|
date: "March 25, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/1000/640?random=10",
|
|
date: "March 28, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
{
|
|
url: "https://picsum.photos/640/600?random=11",
|
|
date: "March 30, 2025",
|
|
camera: "Olympus EPL-7",
|
|
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
|
settings: {
|
|
aperture: "f/10",
|
|
shutter: "1/250s",
|
|
iso: "500",
|
|
focalLength: "60mm",
|
|
},
|
|
},
|
|
];
|
|
|
|
const columnCount = ref(3);
|
|
const isModalOpen = ref(false);
|
|
const currentImageIndex = ref(0);
|
|
|
|
const currentImage = computed(() => images[currentImageIndex.value]!);
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
const openModal = (image: ImageMetadata) => {
|
|
const index = images.indexOf(image);
|
|
if (index !== -1) {
|
|
currentImageIndex.value = index;
|
|
isModalOpen.value = true;
|
|
}
|
|
};
|
|
|
|
const closeModal = () => {
|
|
isModalOpen.value = false;
|
|
};
|
|
|
|
const nextImage = () => {
|
|
currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
|
|
};
|
|
|
|
const prevImage = () => {
|
|
currentImageIndex.value =
|
|
(currentImageIndex.value - 1 + images.length) % images.length;
|
|
};
|
|
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
if (!isModalOpen.value) return;
|
|
|
|
if (event.key === "Escape") {
|
|
closeModal();
|
|
} else if (event.key === "ArrowRight") {
|
|
nextImage();
|
|
} else if (event.key === "ArrowLeft") {
|
|
prevImage();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
updateColumns();
|
|
window.addEventListener("resize", updateColumns);
|
|
window.addEventListener("keydown", handleKeydown);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", updateColumns);
|
|
window.removeEventListener("keydown", handleKeydown);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono]"
|
|
>
|
|
<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"
|
|
@click="openModal(image)"
|
|
>
|
|
<img
|
|
:src="image.url"
|
|
class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Teleport to="body">
|
|
<Transition name="modal">
|
|
<div
|
|
v-if="isModalOpen"
|
|
class="fixed inset-0 z-50 flex items-center font-[JetBrains_Mono] justify-center bg-black/95 backdrop-blur-sm"
|
|
@click="closeModal"
|
|
>
|
|
<!-- close -->
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="link"
|
|
:ui="{ leadingIcon: 'size-8' }"
|
|
class="absolute top-6 right-6 z-10"
|
|
aria-label="Close modal"
|
|
@click="closeModal"
|
|
/>
|
|
|
|
<!-- previous -->
|
|
<UButton
|
|
icon="i-lucide-chevron-left"
|
|
color="neutral"
|
|
variant="link"
|
|
:ui="{ leadingIcon: 'size-8' }"
|
|
class="absolute left-6 z-10 hidden md:block"
|
|
aria-label="Previous image"
|
|
@click.stop="prevImage"
|
|
/>
|
|
<div
|
|
class="flex flex-col items-center justify-center gap-3 max-w-[95vw] max-h-[90vh] px-4 md:px-20"
|
|
@click.stop
|
|
>
|
|
<img
|
|
:key="currentImageIndex"
|
|
:src="currentImage.url"
|
|
class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
|
|
alt="Gallery image"
|
|
/>
|
|
|
|
<!-- metadata -->
|
|
<div
|
|
class="bg-black px-4 py-2 text-sm text-white flex flex-wrap items-center justify-center gap-2"
|
|
>
|
|
<span>{{ currentImage.date }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ currentImage.camera }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ currentImage.lens }}</span>
|
|
<template v-if="currentImage.settings">
|
|
<span class="text-white/50">|</span>
|
|
<span v-if="currentImage.settings.aperture">{{
|
|
currentImage.settings.aperture
|
|
}}</span>
|
|
<span v-if="currentImage.settings.shutter">{{
|
|
currentImage.settings.shutter
|
|
}}</span>
|
|
<span v-if="currentImage.settings.iso"
|
|
>ISO {{ currentImage.settings.iso }}</span
|
|
>
|
|
<span v-if="currentImage.settings.focalLength">{{
|
|
currentImage.settings.focalLength
|
|
}}</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- next -->
|
|
<UButton
|
|
icon="i-lucide-chevron-right"
|
|
color="neutral"
|
|
variant="link"
|
|
:ui="{ leadingIcon: 'size-8' }"
|
|
class="absolute right-6 z-10 hidden md:block"
|
|
aria-label="Next image"
|
|
@click.stop="nextImage"
|
|
/>
|
|
|
|
<!-- TODO: mobile navigation (use md:hidden) -->
|
|
|
|
<div
|
|
class="absolute bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-sm"
|
|
>
|
|
{{ currentImageIndex + 1 }} / {{ images.length }}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-enter-active,
|
|
.modal-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-enter-from,
|
|
.modal-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|