TechStackBadges

techstackbadges-1779388705837.tsx

'use client';
import { useState } from 'react';

export default function TechStackBadges() {
  const [hovered, setHovered] = useState(null);
  const stack = [
    { name: 'Next.js', icon: '▲', color: '#fff', desc: 'React framework' },
    { name: 'TypeScript', icon: 'TS', color: '#3178c6', desc: 'Type safety' },
    { name: 'Tailwind', icon: '🌊', color: '#06b6d4', desc: 'Utility CSS' },
    { name: 'PostgreSQL', icon: '🐘', color: '#336791', desc: 'Database' },
    { name: 'Redis', icon: '⚡', color: '#dc382d', desc: 'Cache layer' },
    { name: 'Docker', icon: '🐳', color: '#2496ed', desc: 'Containers' },
    { name: 'Rust', icon: '🦀', color: '#f74c00', desc: 'Performance' },
    { name: 'GraphQL', icon: '◈', color: '#e535ab', desc: 'API layer' },
  ];

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 16px 0', fontSize: '15px', fontWeight: 700 }}>Tech Stack</h3>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
        {stack.map((tech, i) => (
          <div
            key={i}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            style={{
              display: 'flex', alignItems: 'center', gap: '8px',
              background: hovered === i ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)',
              border: `1px solid ${hovered === i ? tech.color + '60' : 'rgba(255,255,255,0.08)'}`,
              borderRadius: '10px',
              padding: '7px 14px',
              cursor: 'default',
              transition: 'all 0.2s ease',
              transform: hovered === i ? 'translateY(-2px)' : 'translateY(0)',
              boxShadow: hovered === i ? `0 6px 20px ${tech.color}30` : 'none',
            }}
          >
            <span style={{
              background: tech.color + '20',
              color: tech.color,
              borderRadius: '6px',
              padding: '2px 5px',
              fontSize: '11px',
              fontWeight: 800,
              fontFamily: 'monospace',
            }}>{tech.icon}</span>
            <span style={{ color: hovered === i ? '#F5F5F0' : 'rgba(245,245,240,0.7)', fontSize: '13px', fontWeight: 500 }}>
              {tech.name}
            </span>
            {hovered === i && (
              <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '11px', borderLeft: '1px solid rgba(255,255,255,0.1)', paddingLeft: '8px' }}>
                {tech.desc}
              </span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

CategoryBadges

Frameworkreact

TierFREE

Copies0

About

Animated tech stack badge showcase

More from Badges

'use client'
import { useState } from 'react'

export default function BadgeShowcase() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Next.js', 'Tailwind', 'Prisma'])
  const [count, setCount] = useState(12)

  return (
    <div style=

BadgeShowcase

Badges