major update in looks and feel

src/components/ui/Background.astro

@@ -1,11 +1,302 @@
 ---
+import { Icon } from 'astro-icon/components';
+
 export interface Props {
   isDark?: boolean;
+  showIcons?: boolean;
+  disableParallax?: boolean;
 }
 
-const { isDark = false } = Astro.props;
----
+const { isDark = false, showIcons = true, disableParallax = false } = Astro.props;
 
-<div class:list={['absolute inset-0', { 'bg-dark dark:bg-transparent': isDark }]}>
+// Define color palettes for light and dark modes with higher contrast
+const lightModeColors = [
+  'text-blue-600/40',
+  'text-indigo-600/40',
+  'text-purple-600/40',
+  'text-cyan-600/40',
+  'text-teal-600/40',
+  'text-emerald-600/40',
+  'text-sky-600/40',
+  'text-violet-600/40',
+];
+
+const darkModeColors = [
+  'dark:text-blue-400/45',
+  'dark:text-indigo-400/45',
+  'dark:text-purple-400/45',
+  'dark:text-cyan-400/45',
+  'dark:text-teal-400/45',
+  'dark:text-emerald-400/45',
+  'dark:text-sky-400/45',
+  'dark:text-violet-400/45',
+];
+
+// Define interfaces for our icon objects
+interface BaseIconObject {
+  icon: string;
+  x: string;
+  y: string;
+  size: string;
+  opacity: string;
+  rotate: string;
+}
+
+interface IconWithColors extends BaseIconObject {
+  lightColor: string;
+  darkColor: string;
+}
+
+// Function to get a random color from the palette
+const getRandomColor = (palette: string[]): string => {
+  const randomIndex = Math.floor(Math.random() * palette.length);
+  return palette[randomIndex];
+};
+
+// List of icons to be used in the background
+// Expanded to include a wider variety of symbols for more visual diversity
+const iconNames: string[] = [
+  // Core IT/Tech icons
+  'tabler:settings-automation',
+  'tabler:brand-office',
+  'tabler:api',
+  'tabler:server',
+  'tabler:message-chatbot',
+  'tabler:share',
+  'tabler:code',
+  'tabler:cloud',
+  'tabler:device-laptop',
+  'tabler:chart-line',
+  'tabler:database',
+  'tabler:brand-github',
+  'tabler:device-desktop',
+  'tabler:brand-azure',
+  
+  // Additional tech-related icons
+  'tabler:cpu',
+  'tabler:device-mobile',
+  'tabler:wifi',
+  'tabler:network',
+  'tabler:shield',
+  'tabler:lock',
+  'tabler:key',
+  'tabler:rocket',
+  
+  // Tangentially related icons for visual diversity
+  'tabler:bulb',
+  'tabler:compass',
+  'tabler:binary',
+  'tabler:infinity',
+  'tabler:brain',
+];
+
+// Function to get a random value within a range
+const getRandomInRange = (min: number, max: number): number => {
+  return Math.random() * (max - min) + min;
+};
+
+// Function to get a random rotation with increased range
+const getRandomRotation = (): string => {
+  return `${getRandomInRange(-30, 30)}deg`;
+};
+
+// Function to get a random size (restored to original dimensions)
+const getRandomSize = (): string => {
+  return `${getRandomInRange(140, 180)}px`;
+};
+
+// Function to get a random opacity
+const getRandomOpacity = (): string => {
+  return getRandomInRange(0.32, 0.38).toFixed(2);
+};
+
+// Create a spacious layout with well-separated icons
+const createSpacedIcons = (): BaseIconObject[] => {
+  const icons: BaseIconObject[] = [];
+  const rows = 6; // Reduced from 8 to 6 for fewer potential positions
+  const cols = 6; // Reduced from 8 to 6 for fewer potential positions
+  
+  // Define larger margins to keep icons away from edges (in percentage)
+  const marginX = 10; // 10% margin from left and right edges (increased from 5%)
+  const marginY = 10; // 10% margin from top and bottom edges (increased from 5%)
+  
+  // Minimum distance between icons (in percentage points)
+  const minDistance = 20; // Ensure at least 20% distance between any two icons
+  
+  // Create a base grid of positions
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      // Randomly skip more positions (75% chance) for fewer icons overall
+      if (Math.random() < 0.75) {
+        continue;
+      }
+      
+      // Base position in the grid with margins applied
+      const baseX = marginX + ((col / cols) * (100 - 2 * marginX));
+      const baseY = marginY + ((row / rows) * (100 - 2 * marginY));
+      
+      // Add limited randomness to the position (±5%) to maintain spacing
+      const randomOffsetX = getRandomInRange(-5, 5);
+      const randomOffsetY = getRandomInRange(-5, 5);
+      
+      // Ensure positions stay within margins
+      const x = Math.max(marginX, Math.min(100 - marginX, baseX + randomOffsetX));
+      const y = Math.max(marginY, Math.min(100 - marginY, baseY + randomOffsetY));
+      
+      // Check if this position is too close to any existing icon
+      let tooClose = false;
+      for (const existingIcon of icons) {
+        // Extract numeric values from percentage strings
+        const existingX = parseFloat(existingIcon.x);
+        const existingY = parseFloat(existingIcon.y);
+        
+        // Calculate distance between points
+        const distance = Math.sqrt(
+          Math.pow(x - existingX, 2) +
+          Math.pow(y - existingY, 2)
+        );
+        
+        // If too close to an existing icon, skip this position
+        if (distance < minDistance) {
+          tooClose = true;
+          break;
+        }
+      }
+      
+      if (tooClose) {
+        continue;
+      }
+      
+      // Randomly select an icon from the expanded set
+      const iconIndex = Math.floor(Math.random() * iconNames.length);
+      
+      icons.push({
+        icon: iconNames[iconIndex],
+        x: `${x}%`,
+        y: `${y}%`,
+        size: getRandomSize(),
+        opacity: getRandomOpacity(),
+        rotate: getRandomRotation(),
+      });
+    }
+  }
+  
+  return icons;
+};
+
+const icons: BaseIconObject[] = createSpacedIcons();
+
+// Assign random colors to each icon
+const iconsWithColors: IconWithColors[] = icons.map(icon => ({
+  icon: icon.icon,
+  x: icon.x,
+  y: icon.y,
+  size: icon.size,
+  opacity: icon.opacity,
+  rotate: icon.rotate,
+  lightColor: getRandomColor(lightModeColors),
+  darkColor: getRandomColor(darkModeColors),
+}));
+---
+<div class:list={['absolute inset-0', { 'backdrop-blur-sm bg-white/5 dark:bg-gray-900/10': isDark }]}>
   <slot />
+  
+  {showIcons && (
+    /* Decorative background icons with parallax effect */
+    <div id="parallax-background" class="absolute inset-0 overflow-hidden pointer-events-none z-[-5]">
+      {iconsWithColors.map(({ icon, x, y, size, opacity, rotate, lightColor, darkColor }, index) => (
+        <div
+          class={`absolute ${lightColor} ${darkColor} parallax-icon`}
+          style={`left: ${x}; top: ${y}; opacity: ${opacity}; transform: rotate(${rotate}); will-change: transform; transition: transform 0.1s ease-out;`}
+          data-depth={`${0.5 + (index % 3) * 0.2}`}
+          data-initial-x={x}
+          data-initial-y={y}
+        >
+          <Icon name={icon} style={`width: ${size}; height: ${size};`} />
+        </div>
+      ))}
+    </div>
+  )}
 </div>
+
+{showIcons && (
+  <script define:vars={{ disableParallax }}>
+    // Parallax scrolling effect for background icons
+    document.addEventListener('DOMContentLoaded', () => {
+      // Get all parallax icons
+      const parallaxIcons = document.querySelectorAll('.parallax-icon');
+      
+      // Skip parallax on mobile devices for better performance or if parallax is disabled
+      const isMobile = window.matchMedia('(max-width: 768px)').matches;
+      if (isMobile || disableParallax) return;
+      
+      // Variables to track scroll position
+      let lastScrollY = window.scrollY;
+      let ticking = false;
+      
+      // Function to update icon positions based on scroll
+      const updateParallax = () => {
+        parallaxIcons.forEach((icon) => {
+          const depth = parseFloat(icon.getAttribute('data-depth') || '0.5');
+          
+          // Calculate parallax offset based on scroll position and depth
+          // Lower depth value means the icon moves slower (appears further away)
+          const yOffset = (lastScrollY * depth * 0.15);
+          
+          // Get the original rotation
+          const transformValue = icon.style.transform;
+          const rotateMatch = transformValue.match(/rotate\([^)]+\)/);
+          const rotateValue = rotateMatch ? rotateMatch[0] : 'rotate(0deg)';
+          
+          // Apply transform with the original rotation plus the parallax offset
+          icon.style.transform = `${rotateValue} translate3d(0, ${yOffset}px, 0)`;
+        });
+        
+        ticking = false;
+      };
+      
+      // Throttle scroll events for better performance
+      const onScroll = () => {
+        lastScrollY = window.scrollY;
+        
+        if (!ticking) {
+          window.requestAnimationFrame(() => {
+            updateParallax();
+            ticking = false;
+          });
+          
+          ticking = true;
+        }
+      };
+      
+      // Add scroll event listener
+      window.addEventListener('scroll', onScroll, { passive: true });
+      
+      // Update on resize (debounced)
+      let resizeTimer;
+      window.addEventListener('resize', () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+          // Check if device is now mobile and disable parallax if needed
+          const isMobileNow = window.matchMedia('(max-width: 768px)').matches;
+          
+          if (isMobileNow) {
+            // Reset positions on mobile
+            parallaxIcons.forEach((icon) => {
+              const transformValue = icon.style.transform;
+              const rotateMatch = transformValue.match(/rotate\([^)]+\)/);
+              const rotateValue = rotateMatch ? rotateMatch[0] : 'rotate(0deg)';
+              icon.style.transform = rotateValue;
+            });
+          } else {
+            // Update parallax on desktop
+            updateParallax();
+          }
+        }, 200);
+      }, { passive: true });
+      
+      // Initial update
+      updateParallax();
+    });
+  </script>
+)}