TechLogoScroll Review

Component isolated for testing. Currently used on 2 pages with different tech stacks.

Homepage

Frontend & full-stack technologies

📍 /pages/index.vue line 85

🎯 Section: "Built With Industry-Leading Technologies"

📊 Logos: 11 technologies

Software Development

Complete development stack with databases & deployment

📍 /pages/services/software-development.vue line 202

🎯 Section: "Trusted Technology Stack"

📊 Logos: 12 technologies

Implementation Details

Component

/components/TechLogoScroll.vue

Infinite scrolling carousel using Nuxt Icon with lucide and logoipsum collections. Creates duplicate sets for seamless looping animation.

Props

logos: TechLogo[] (required)

└─ name: string (icon name, e.g., 'logos:react')

└─ title?: string (tooltip)

speed?: number (animation duration in seconds, default: 30)

Icon Naming Convention

logos:* collection

Framework & infrastructure logos (react, vue, docker, aws, etc.)

simple-icons:* collection

Service-specific logos (openai, github, etc.)

Live Examples

1. TechLogoScroll (Infinite Carousel)

Used on: Homepage & Software Development page

✓ Infinite looping animation with pause on hover

✓ Duplicate sets for seamless loop

✓ CSS custom property for dynamic speed (currently unused but available)

2. TechLogoGrid (Static Grid)

Minimal alternative - clean grid layout

✓ Responsive grid with auto-fit columns

✓ No animation overhead

✓ Interactive hover effects

✓ Pure Nuxt Icon - no wrapper complexity

3. TechLogoStagger (Animated Entry)

Engaging entrance animation with staggered fade-in

✓ Staggered animation on mount (each logo delays by 50ms)

✓ Fade-in + slide-up effect on entry

✓ Respects prefers-reduced-motion for accessibility

✓ Interactive hover scaling

How It Works

✨ Animation Strategy

Creates two identical sets of logos. Animates translateX to move exactly 50% (one full set). When animation completes, browser restarts instantly, creating seamless infinite loop.

🎨 Styling

Uses semantic color tokens via Nuxt Icon component rendering.

  • • Icons inherit color from CSS variable: var(--foreground, currentColor)
  • • Hover effect: opacity 0.7 → 1.0 and scale 1 → 1.05
  • • Mask gradient fades edges for smooth visual effect
  • • Pause animation on hover

📱 Responsive

  • • Desktop (>768px): 56px height, 3rem gap
  • • Mobile (<768px): 40px height, 2rem gap
  • • Respects prefers-reduced-motion