gallery

Author: artgolwebdev

src/styles/globals.css

@@ -2,24 +2,7 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Slow Motion Animation for Video Background */
-@keyframes slowMotion {
-  0% {
-    transform: scale(1.1) translate(0, 0);
-  }
-  25% {
-    transform: scale(1.1) translate(-2px, -1px);
-  }
-  50% {
-    transform: scale(1.1) translate(1px, -2px);
-  }
-  75% {
-    transform: scale(1.1) translate(-1px, 1px);
-  }
-  100% {
-    transform: scale(1.1) translate(0, 0);
-  }
-}
+
 
 :root {
   --font-size: 14px;

src/types/assets.d.ts

@@ -0,0 +1,34 @@
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}

src/utils/imageUtils.ts

@@ -6,12 +6,39 @@ import heroVideoPoster from '../assets/video/hero-video-poster.svg';
 import cyberBrutalLogo from '../assets/logo/cyber-brutal-logo.svg';
 import cyberDistrictMap from '../assets/map/cyber-district-map.svg';
 
+// Import gallery images
+import futuristicTechnology from '../assets/gallery/futuristic-technology.png';
+import cyberArchitecture from '../assets/gallery/cyber-architecture.png';
+import neonLightsCity from '../assets/gallery/neon-lights-city.png';
+import digitalArtAbstract from '../assets/gallery/digital-art-abstract.png';
+import cyberpunkAesthetic from '../assets/gallery/cyberpunk-aesthetic.png';
+import holographicDisplay from '../assets/gallery/holographic-display.png';
+
+// Utility function to convert snake_case/kebab-case to camelCase
+const toCamelCase = (str: string): string => {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+};
+
 // Image and video utility functions for handling placeholders and fallbacks
 
 export const getGalleryImagePath = (query: string): string => {
-  // Convert query to filename format
-  const filename = query.replace(/\s+/g, '-').toLowerCase();
-  return `/src/assets/gallery/${filename}.png`;
+  // Convert query to camelCase and dynamically access the imported image
+  const camelCaseQuery = toCamelCase(query);
+  
+  // Create an object with all imported images for dynamic access
+  const images = {
+    futuristicTechnology,
+    cyberArchitecture,
+    neonLightsCity,
+    digitalArtAbstract,
+    cyberpunkAesthetic,
+    holographicDisplay,
+  };
+  
+  // Dynamically access the image using the camelCase key
+  return (images as any)[camelCaseQuery] || futuristicTechnology; // fallback to first image
 };
 
 export const getMapImagePath = (): string => {
@@ -22,14 +49,6 @@ export const getLogoPath = (): string => {
   return cyberBrutalLogo;
 };
 
-export const getHeroVideoPath = (): string => {
-  return heroBackgroundMp4;
-};
-
-export const getHeroVideoWebmPath = (): string => {
-  return heroBackgroundWebm;
-};
-
 export const getHeroVideoPosterPath = (): string => {
   return heroVideoPoster;
 };