{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portfolio-experience",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/experience-section/portfolio-experience.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { cn } from '@/lib/utils'\r\nimport { motion } from 'motion/react'\r\n\r\ninterface ExperienceItemProps {\r\n  company: string\r\n  tagline: string\r\n  period: string\r\n  position: string\r\n  location: string\r\n  industry: string\r\n  website?: string\r\n  metrics?: string[]\r\n  techStack?: string[]\r\n  description: string[]\r\n}\r\n\r\nconst ExperienceItem: React.FC<ExperienceItemProps> = ({\r\n  company,\r\n  tagline,\r\n  period,\r\n  position,\r\n  location,\r\n  industry,\r\n  website,\r\n  metrics,\r\n  techStack,\r\n  description,\r\n}) => {\r\n  return (\r\n    <motion.div\r\n      initial={{ opacity: 0, y: 20 }}\r\n      whileInView={{ opacity: 1, y: 0 }}\r\n      viewport={{ once: true, margin: '-100px' }}\r\n      transition={{ duration: 0.5, ease: 'easeOut' }}\r\n      className=\"grid grid-cols-1 md:grid-cols-12 gap-8 py-20 border-t border-gray-200\"\r\n    >\r\n      {/* 1. Company Identity & Timeline */}\r\n      <div className=\"md:col-span-3 space-y-4\">\r\n        <h3 className=\"text-4xl font-bold text-gray-900 leading-tight tracking-tight\">\r\n          {company}\r\n        </h3>\r\n        <div className=\"space-y-1\">\r\n          <p className=\"text-sm text-violet-600 font-bold uppercase tracking-widest\">\r\n            {tagline}\r\n          </p>\r\n          <p className=\"text-sm text-gray-400 font-medium tabular-nums\">\r\n            {period}\r\n          </p>\r\n        </div>\r\n        {metrics && metrics.length > 0 && (\r\n          <div className=\"pt-4 space-y-3\">\r\n            {metrics.map((metric, idx) => (\r\n              <div\r\n                key={idx}\r\n                className=\"flex flex-col border-l-2 border-violet-100 pl-4\"\r\n              >\r\n                <span className=\"text-xs text-gray-400 uppercase font-bold tracking-tighter\">\r\n                  Impact\r\n                </span>\r\n                <span className=\"text-lg font-bold text-gray-900 tabular-nums leading-none\">\r\n                  {metric}\r\n                </span>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* 2. Professional Metadata & Tech Stack */}\r\n      <div className=\"md:col-span-4 space-y-8\">\r\n        <div className=\"grid grid-cols-2 gap-y-6\">\r\n          <div className=\"flex flex-col gap-1\">\r\n            <span className=\"text-xs text-gray-400 font-bold uppercase tracking-wider\">\r\n              Position\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-gray-900\">\r\n              {position}\r\n            </span>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-1\">\r\n            <span className=\"text-xs text-gray-400 font-bold uppercase tracking-wider\">\r\n              Location\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-gray-900\">\r\n              {location}\r\n            </span>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-1\">\r\n            <span className=\"text-xs text-gray-400 font-bold uppercase tracking-wider\">\r\n              Industry\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-gray-900\">\r\n              {industry}\r\n            </span>\r\n          </div>\r\n\r\n          {website && (\r\n            <div className=\"flex flex-col gap-1\">\r\n              <span className=\"text-xs text-gray-400 font-bold uppercase tracking-wider\">\r\n                Platform\r\n              </span>\r\n              <a\r\n                href={`https://${website}`}\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                className=\"text-sm font-semibold text-gray-900 border-b border-gray-200 w-fit inline-flex items-center gap-1 hover:text-violet-600 hover:border-violet-600 transition-colors\"\r\n              >\r\n                {website} <span className=\"text-[10px]\">↗</span>\r\n              </a>\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {techStack && (\r\n          <div className=\"space-y-3\">\r\n            <span className=\"text-xs text-gray-400 font-bold uppercase tracking-wider block\">\r\n              Key Stack\r\n            </span>\r\n            <div className=\"flex flex-wrap gap-2\">\r\n              {techStack.map((tech) => (\r\n                <span\r\n                  key={tech}\r\n                  className=\"px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-[11px] font-bold border border-gray-100 uppercase\"\r\n                >\r\n                  {tech}\r\n                </span>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* 3. Detailed Contributions */}\r\n      <div className=\"md:col-span-5 space-y-6\">\r\n        {description.map((para, i) => (\r\n          <p\r\n            key={i}\r\n            className=\"text-lg text-gray-600 leading-relaxed text-pretty\"\r\n          >\r\n            {para}\r\n          </p>\r\n        ))}\r\n      </div>\r\n    </motion.div>\r\n  )\r\n}\r\n\r\nexport const PortfolioExperience = () => {\r\n  return (\r\n    <section className=\"bg-white px-6 md:px-12 lg:px-24 font-dmSans\">\r\n      <div className=\"max-w-7xl mx-auto py-32\">\r\n        <header className=\"mb-24 space-y-4\">\r\n          <div className=\"inline-flex items-center gap-2 text-xs text-violet-600 font-black uppercase tracking-[0.3em]\">\r\n            « Professional Journey »\r\n          </div>\r\n          <h2 className=\"text-7xl md:text-8xl font-black tracking-tighter text-gray-900 text-balance uppercase leading-[0.9]\">\r\n            SaaS <br />\r\n            Expertise.\r\n          </h2>\r\n        </header>\r\n\r\n        <ExperienceItem\r\n          company=\"Vertex AI\"\r\n          tagline=\"Enterprise Model Ops & Governance\"\r\n          period=\"2023 — Present\"\r\n          position=\"Senior Product Engineer\"\r\n          location=\"Palo Alto, CA\"\r\n          industry=\"B2B SaaS / Artificial Intelligence\"\r\n          website=\"vertex.ai\"\r\n          metrics={[\r\n            '$12M ARR Growth',\r\n            '99.99% Uptime',\r\n            '300+ Enterprise Clients',\r\n          ]}\r\n          techStack={['Next.js', 'TypeScript', 'Go', 'PostgreSQL', 'Kafka']}\r\n          description={[\r\n            'Driving the engineering efforts for a multi-tenant AI governance platform. I architected a low-latency inference monitoring dashboard that serves real-time analytics to Fortune 500 customers, enabling them to audit model compliance at scale.',\r\n            'Spearheaded the integration of a declarative UI system that reduced frontend feature-to-production time from 5 days to 6 hours. I currently mentor 4 junior engineers on distributed systems and high-scale React patterns.',\r\n          ]}\r\n        />\r\n\r\n        <ExperienceItem\r\n          company=\"ClarityFlow\"\r\n          tagline=\"Product-Led Growth (PLG) Engine\"\r\n          period=\"2021 — 2023\"\r\n          position=\"Founding Frontend Engineer\"\r\n          location=\"Remote (Global)\"\r\n          industry=\"SaaS / Marketing Tech\"\r\n          website=\"clarityflow.com\"\r\n          metrics={['0 to 15k Users', '2.1s Avg. TTI', '84% UX CSAT']}\r\n          techStack={['React', 'GraphQL', 'Tailwind', 'Node.js', 'Vercel']}\r\n          description={[\r\n            'As the first frontend hire, I built the entire SaaS dashboard from scratch using a custom design system. I optimized the client-side data fetching layer using React Query, resulting in a 40% reduction in server load during peak traffic.',\r\n            'Led the design and implementation of an automated user onboarding flow that increased trial-to-paid conversion by 18% in the first quarter of deployment. Collaborated directly with the CEO on product strategy and PLG experiments.',\r\n          ]}\r\n        />\r\n\r\n        <ExperienceItem\r\n          company=\"SecureStack\"\r\n          tagline=\"Cloud-Native Security Platform\"\r\n          period=\"2019 — 2021\"\r\n          position=\"Software Engineer\"\r\n          location=\"London, UK\"\r\n          industry=\"SaaS / Cybersecurity\"\r\n          metrics={[\r\n            '-35% Mean Time to Resolve',\r\n            'SOC2 Compliance',\r\n            '5k Managed Nodes',\r\n          ]}\r\n          techStack={[\r\n            'TypeScript',\r\n            'React',\r\n            'Rust',\r\n            'AWS Lambda',\r\n            'Kubernetes',\r\n          ]}\r\n          description={[\r\n            'Developed complex data visualization tools for cloud security threat detection. I implemented a graph-based network explorer that allowed security analysts to trace attack vectors through thousands of nodes in real-time.',\r\n            'Refactored the core authentication flow to support SAML and OIDC for enterprise clients, which was critical for securing our first three Tier-1 banking partnerships. Established rigorous CI/CD pipelines with automated accessibility testing.',\r\n          ]}\r\n        />\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}