'use client' import React, { useState } from 'react' import { motion } from 'motion/react' import { Briefcase, MapPin, ExternalLink } from 'lucide-react' import { cn } from '@/lib/utils' interface WorkHistory { company: string role: string period: string description: string location: string skills: string[] logo: string link?: string } const history: WorkHistory[] = [ { company: 'OpenAI', role: 'Principal Product Engineer', period: '2021 — Present', location: 'San Francisco, CA', description: 'Leading the development of high-performance desktop and mobile surfaces for project management tools.', skills: ['React', 'TypeScript', 'Electron', 'GraphQL'], logo: 'https://upload.wikimedia.org/wikipedia/commons/6/66/OpenAI_logo_2025_%28symbol%29.svg', link: 'https://linear.app', }, { company: 'Stripe', role: 'Senior Software Engineer', period: '2018 — 2021', location: 'Remote', description: 'Architected critical payment processing infrastructure used by millions of global businesses.', skills: ['Ruby', 'Go', 'Kubernetes', 'PostgreSQL'], logo: 'https://upload.wikimedia.org/wikipedia/commons/b/ba/Stripe_Logo%2C_revised_2016.svg', link: 'https://stripe.com', }, { company: 'Airbnb', role: 'Software Engineer', period: '2015 — 2018', location: 'San Francisco, CA', description: 'Developed core search and discovery experiences within the guest-facing application.', skills: ['React', 'Node.js', 'Redux', 'AWS'], logo: 'https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg', link: 'https://airbnb.com', }, ] export const WorkExperience = () => { const [hoveredIndex, setHoveredIndex] = useState(null) return (

{/* Header */}

Work Experience

Building products that millions of people use every day

{history.map((item, idx) => ( setHoveredIndex(idx)} onHoverEnd={() => setHoveredIndex(null)} className="relative group" > {/* Timeline Container */}

{/* Timeline Line & Node */}

{idx !== history.length - 1 && (

)}

{/* Content Card */}

{/* Header */}

{/* Company Logo */}

{item.company}

{item.link && ( )}

{item.period}

{item.role}

{item.location}

{/* Description */}

{item.description}

{/* Skills */}

{item.skills.map((skill, skillIdx) => ( {skill} ))}

))}

{/* Footer Stats */} {[ { label: 'Years Experience', value: '8+' }, { label: 'Companies', value: '3' }, { label: 'Projects Shipped', value: '50+' }, ].map((stat, idx) => (

{stat.value}

{stat.label}

))}

) }