kittens.rip_bio/src/components/ExperienceSection.tsx

import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { Code2, Server, Shield, Cpu, GitBranch, Bot, Cloud, Layers } from 'lucide-react'
import { useReducedMotion } from '../hooks/useReducedMotion'

gsap.registerPlugin(ScrollTrigger)

const skills = [
  { icon: Code2, label: 'Languages', items: 'Rust, V, D, Go, TypeScript, Python, PHP, Elixir' },
  { icon: Layers, label: 'Frontend', items: 'Astro, Svelte 5, lightweight & modern UIs' },
  { icon: Server, label: 'Backend & APIs', items: 'REST API design, complex infrastructure' },
  { icon: Cpu, label: 'Low Level', items: 'Systems programming, kernel research' },
  { icon: Shield, label: 'Security Research', items: 'Evasion, exfiltration, cryptography' },
  { icon: GitBranch, label: 'DevOps', items: 'Self-hosting, Docker, monorepo architecture' },
  { icon: Bot, label: 'Automation', items: 'Telegram / Discord bots & scripts' },
  { icon: Cloud, label: 'Networks', items: 'Secure communications, protocol design' },
]

const earlyProjects = [
  { name: 'Rose-Stealer_old', url: 'https://github.com/0xRose/Rose-Stealer_old', desc: 'Professional & efficient credential stealer written in python' },
  { name: 'Rose-RAT', url: 'https://github.com/0xRose/Rose-RAT', desc: 'Remote Administration Toolkit Extension to Rose-Stealer with web-host and client controller' },
  { name: 'Rose-Stealer', url: 'https://github.com/0xRose/Rose-Stealer', desc: 'Slightly refined & more modern version of Rosev1' },
  { name: 'Rose-Obf', url: 'https://github.com/gumbobrot/Rose-Obf', desc: 'Rose Python obfuscator & encryptor' },
  { name: 'RoseGuardian', url: 'https://github.com/gumbobrot/RoseGuardian', desc: 'Prior experimental version of Rose obf' },
  { name: 'PyAnalyzer', url: 'https://github.com/gumbobrot/PyAnalyzer', desc: 'Python script utilizing pycdc and pyinstxtractor to decompile pyinstaller packed executables' },
  { name: 'Knight-RAT', url: 'https://github.com/gumbobrot/Knight-RAT', desc: 'Discord-bot managed Remote Access Trojan' },
]

export default function ExperienceSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const reducedMotion = useReducedMotion()

  useEffect(() => {
    if (reducedMotion || !sectionRef.current) return

    const ctx = gsap.context(() => {
      gsap.fromTo(
        '.exp-reveal',
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          stagger: 0.08,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 70%',
            toggleActions: 'play none none none',
          },
        }
      )
    }, sectionRef)

    return () => ctx.revert()
  }, [reducedMotion])

  return (
    <section
      id="experience"
      ref={sectionRef}
      className="relative py-32 md:py-40 px-6 overflow-hidden"
    >
      {!reducedMotion && (
        <div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-pink-brand/3 blur-[100px] pointer-events-none translate-x-1/2 -translate-y-1/2" />
      )}

      <div className="max-w-6xl mx-auto relative z-10">
        {/* Section label */}
        <div className="exp-reveal flex items-center gap-4 mb-16">
          <span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
            004
          </span>
          <div className="flex-1 h-px bg-pink-brand/20" />
          <span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
            Experience
          </span>
        </div>

        {/* Skills grid */}
        <h3 className="exp-reveal font-display text-2xl md:text-3xl font-light text-grey-900 mb-10">
          Capabilities
        </h3>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-24">
          {skills.map((skill) => (
            <div
              key={skill.label}
              className="exp-reveal group p-5 rounded-2xl bg-skin-100/40 border border-pink-brand/5 hover:border-pink-brand/15 hover:bg-skin-100/70 transition-all duration-300"
            >
              <skill.icon className="w-5 h-5 text-pink-brand mb-3 group-hover:scale-110 transition-transform" />
              <h4 className="font-display text-sm font-medium text-grey-900 mb-1">{skill.label}</h4>
              <p className="text-grey-500 text-xs leading-relaxed font-body">{skill.items}</p>
            </div>
          ))}
        </div>

        {/* Early history */}
        <h3 className="exp-reveal font-display text-2xl md:text-3xl font-light text-grey-900 mb-4">
          Early History
        </h3>
        <p className="exp-reveal text-grey-500 text-base font-body mb-10 max-w-2xl">
          Projects from 2+ years ago that shaped my foundation. These represent my first 
          serious forays into software development and security research.
        </p>

        <div className="space-y-3">
          {earlyProjects.map((project) => (
            <a
              key={project.name}
              href={project.url}
              target="_blank"
              rel="noopener noreferrer"
              className="exp-reveal group flex items-center justify-between p-4 rounded-xl bg-skin-100/30 border border-pink-brand/5 hover:border-pink-brand/15 hover:bg-skin-100/60 transition-all duration-300"
            >
              <div className="flex items-center gap-4">
                <GitBranch className="w-4 h-4 text-grey-400 group-hover:text-pink-brand transition-colors" />
                <div>
                  <span className="font-display text-sm font-medium text-grey-900 group-hover:text-pink-brand transition-colors">
                    {project.name}
                  </span>
                  <p className="text-grey-500 text-xs font-body hidden sm:block">{project.desc}</p>
                </div>
              </div>
              <span className="text-xs font-mono text-grey-400 group-hover:text-pink-brand transition-colors">
                github
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  )
}