{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-work-experience-cards-accordion-experience-cards","type":"registry:block","title":"Accordion Experience Cards","files":[{"path":"components/blocks/portfolio/portfolio-work-experience-cards/accordion-experience-cards.tsx","content":"import { useState } from 'react';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Calendar, MapPin, ExternalLink, Briefcase } from 'lucide-react';\n\nexport default function AccordionExperienceCards() {\n  const [openItems, setOpenItems] = useState<string[]>([]);\n\n  const handleValueChange = (value: string[]) => {\n    setOpenItems(value);\n  };\n\n  const workExperiences = [\n    {\n      company: 'Innovative Solutions Inc.',\n      logo: 'https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3',\n      role: 'Senior Product Designer',\n      location: 'San Francisco, CA',\n      duration: '2021 - Present',\n      description:\n        'Leading the product design team in creating user-centered experiences for enterprise software applications. Collaborating with cross-functional teams to define product vision and roadmap.',\n      achievements: [\n        'Redesigned flagship product resulting in 40% increase in user engagement',\n        'Established design system reducing development time by 30%',\n        'Led research initiatives that shaped three major feature releases',\n      ],\n      skills: [\n        'UX/UI Design',\n        'Design Systems',\n        'User Research',\n        'Figma',\n        'Prototyping',\n      ],\n      link: '#',\n    },\n    {\n      company: 'Digital Creations Studio',\n      logo: 'https://images.unsplash.com/photo-1560472355-536de3962603?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3',\n      role: 'UX Designer',\n      location: 'Remote',\n      duration: '2019 - 2021',\n      description:\n        'Designed digital experiences for clients in finance, healthcare, and e-commerce sectors. Conducted user research and testing to inform design decisions and iterate on solutions.',\n      achievements: [\n        'Created mobile app interface that increased conversion by 25%',\n        'Developed user personas and journey maps for 5 major clients',\n        'Optimized checkout flow reducing cart abandonment by 18%',\n      ],\n      skills: [\n        'UX Design',\n        'User Testing',\n        'Wireframing',\n        'Adobe XD',\n        'Sketch',\n      ],\n      link: '#',\n    },\n    {\n      company: 'CreativeTech Agency',\n      logo: 'https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3',\n      role: 'UI Designer',\n      location: 'New York, NY',\n      duration: '2017 - 2019',\n      description:\n        'Created visually compelling user interfaces for web and mobile applications. Collaborated with developers to ensure design integrity through implementation.',\n      achievements: [\n        'Designed UI for award-winning healthcare application',\n        'Created visual identity for startup that secured $2M in funding',\n        'Improved design handoff process reducing developer questions by 40%',\n      ],\n      skills: [\n        'UI Design',\n        'Visual Design',\n        'Typography',\n        'Illustrator',\n        'Brand Guidelines',\n      ],\n      link: '#',\n    },\n    {\n      company: 'TechStart Studios',\n      logo: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3',\n      role: 'Graphic Designer',\n      location: 'Chicago, IL',\n      duration: '2015 - 2017',\n      description:\n        'Designed marketing materials, website graphics, and brand assets for technology startups and small businesses. Ensured consistent brand identity across all touchpoints.',\n      achievements: [\n        'Created visual assets for 15+ product launches',\n        'Redesigned company website increasing traffic by 30%',\n        'Developed social media templates that improved engagement by 25%',\n      ],\n      skills: [\n        'Graphic Design',\n        'Branding',\n        'Marketing Materials',\n        'Photoshop',\n        'InDesign',\n      ],\n      link: '#',\n    },\n  ];\n\n  return (\n    <section className=\"py-16 md:py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"mb-12 text-center md:mb-16\">\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Professional Experience\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n            My career journey through key roles and companies. Click on each\n            position to learn more about my responsibilities and achievements.\n          </p>\n        </div>\n\n        <Accordion\n          type=\"multiple\"\n          value={openItems}\n          onValueChange={handleValueChange}\n          className=\"bg-card mx-auto max-w-4xl rounded-lg border\"\n        >\n          {workExperiences.map((experience, index) => {\n            const itemId = `item-${index}`;\n            return (\n              <AccordionItem\n                key={index}\n                value={itemId}\n                className={`border-b transition-all duration-200 last:border-b-0 ${\n                  openItems.includes(itemId)\n                    ? 'bg-muted/50'\n                    : 'hover:bg-muted/30'\n                }`}\n              >\n                <AccordionTrigger className=\"flex w-full px-6 py-6 text-left hover:no-underline\">\n                  <div className=\"flex w-full items-center gap-4\">\n                    <div className=\"bg-primary/10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full\">\n                      <Briefcase className=\"text-primary h-6 w-6\" />\n                    </div>\n                    <div className=\"flex-grow\">\n                      <h3 className=\"text-xl font-bold\">{experience.role}</h3>\n                      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1\">\n                        <span className=\"font-medium\">\n                          {experience.company}\n                        </span>\n                        <div className=\"text-muted-foreground hidden items-center gap-1 text-sm sm:flex\">\n                          <Calendar className=\"h-3.5 w-3.5\" />\n                          <span>{experience.duration}</span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"text-muted-foreground mr-4 hidden flex-col items-end gap-1 text-sm md:flex\">\n                      <div className=\"flex items-center gap-1\">\n                        <Calendar className=\"h-3.5 w-3.5\" />\n                        <span>{experience.duration}</span>\n                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <MapPin className=\"h-3.5 w-3.5\" />\n                        <span>{experience.location}</span>\n                      </div>\n                    </div>\n                  </div>\n                </AccordionTrigger>\n\n                <AccordionContent className=\"border-t px-6 py-5\">\n                  <div className=\"md:flex md:gap-8\">\n                    <div className=\"mb-6 md:mb-0 md:w-1/2\">\n                      {/* Company Logo & Description */}\n                      <div className=\"mb-6 flex items-center gap-4\">\n                        <div className=\"relative h-16 w-16 overflow-hidden rounded-md border\">\n                          <img\n                            src={experience.logo}\n                            alt={experience.company}\n                            className=\"object-cover\"\n                          />\n                        </div>\n                        <div className=\"text-muted-foreground flex flex-col gap-1 text-sm md:hidden\">\n                          <div className=\"flex items-center gap-1\">\n                            <MapPin className=\"h-3.5 w-3.5\" />\n                            <span>{experience.location}</span>\n                          </div>\n                        </div>\n                      </div>\n\n                      <h4 className=\"text-muted-foreground mb-2 text-sm font-semibold tracking-wider uppercase\">\n                        Description\n                      </h4>\n                      <p className=\"mb-6 text-base\">{experience.description}</p>\n\n                      <h4 className=\"text-muted-foreground mb-2 text-sm font-semibold tracking-wider uppercase\">\n                        Skills & Technologies\n                      </h4>\n                      <div className=\"flex flex-wrap gap-2\">\n                        {experience.skills.map((skill, skillIndex) => (\n                          <Badge key={skillIndex} variant=\"secondary\">\n                            {skill}\n                          </Badge>\n                        ))}\n                      </div>\n                    </div>\n\n                    <div className=\"md:w-1/2\">\n                      <h4 className=\"text-muted-foreground mb-3 text-sm font-semibold tracking-wider uppercase\">\n                        Key Achievements\n                      </h4>\n                      <ul className=\"space-y-3\">\n                        {experience.achievements.map(\n                          (achievement, achievementIndex) => (\n                            <li\n                              key={achievementIndex}\n                              className=\"flex items-start gap-3\"\n                            >\n                              <span className=\"bg-primary/10 text-primary flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                                {achievementIndex + 1}\n                              </span>\n                              <span>{achievement}</span>\n                            </li>\n                          )\n                        )}\n                      </ul>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-6 flex justify-end\">\n                    <Button asChild>\n                      <a href={experience.link} className=\"flex items-center\">\n                        View Details\n                        <ExternalLink className=\"ml-2 h-4 w-4\" />\n                      </a>\n                    </Button>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            );\n          })}\n        </Accordion>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-work-experience-cards/accordion-experience-cards.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/accordion.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","type":"registry:ui","target":"components/ui/accordion.tsx"}],"description":"Collapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}