Adds PhotoAlbum, CreatorHome, AboutCreator.

frontend/src/views/creators/AlbumView.vue

@@ -0,0 +1,144 @@
+<template>
+  <div v-if="hasImages" class="album-view">
+    <!-- Album Display -->
+    <div class="image-grid">
+      <div v-for="(url, index) in displayedImages" 
+           :key="index" 
+           class="image-wrapper">
+        <img :src="url"
+             :alt="t('creator.sections.album.image')"
+             class="image"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  images: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+const { t } = useI18n();
+
+// Add a reactive window width
+const windowWidth = ref(window.innerWidth);
+
+// Update window width on resize
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+// Add and remove event listener
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+const hasImages = computed(() => {
+  return props.images.some(url => url);
+});
+
+const nonEmptyImages = computed(() => {
+  return props.images.filter(url => url);
+});
+
+// Show different number of images based on reactive window width
+const displayedImages = computed(() => {
+  const images = nonEmptyImages.value;
+  if (windowWidth.value >= 1024) {
+    return images.slice(0, 5); // 5 images on large screens
+  } else if (windowWidth.value >= 768) {
+    return images.slice(0, 4); // 4 images on medium screens
+  }
+  return images.slice(0, 3); // 3 images on smaller screens
+});
+</script>
+
+<style scoped>
+.album-view {
+  @apply w-full;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Responsive adjustments */
+@media (min-width: 768px) {
+  .image-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .image-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .image-grid {
+    gap: 0.25rem;
+  }
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Photo Album",
+          "image": "Album image"
+        }
+      }
+    }
+  },
+  "fr": {
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Album photo",
+          "image": "Image de l'album"
+        }
+      }
+    }
+  },
+  "es": {
+    "creator": {
+      "sections": {
+        "album": {
+          "title": "Álbum de fotos",
+          "image": "Imagen del álbum"
+        }
+      }
+    }
+  }
+}
+</i18n>