{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resume-card-shadcnui",
  "type": "registry:component",
  "title": "Interactive Resume Card",
  "description": "Professional resume template with animated sections and interactive elements",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/resume-card.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { motion } from \"framer-motion\";\nimport {\n  Download,\n  Github,\n  Globe,\n  Linkedin,\n  Mail,\n  MapPin,\n  Phone,\n  Star,\n} from \"lucide-react\";\n\nconst RESUME_DATA = {\n  personalInfo: {\n    name: \"John Doe\",\n    title: \"Senior Full Stack Developer\",\n    summary:\n      \"Passionate developer with 8+ years of experience building scalable web applications. Specializing in React, Node.js, and cloud architecture.\",\n    location: \"San Francisco, CA\",\n    email: \"john.doe@example.com\",\n    phone: \"+1 (555) 123-4567\",\n    avatarUrl: \"https://github.com/shadcn.png\",\n    initials: \"JD\",\n    socials: [\n      { name: \"GitHub\", icon: Github, url: \"#\" },\n      { name: \"LinkedIn\", icon: Linkedin, url: \"#\" },\n      { name: \"Portfolio\", icon: Globe, url: \"#\" },\n    ],\n  },\n  experience: [\n    {\n      role: \"Senior Full Stack Developer\",\n      company: \"Tech Corp Inc.\",\n      period: \"2021 - Present\",\n      location: \"San Francisco, CA\",\n      achievements: [\n        \"Led the frontend team in rebuilding the core product using Next.js 14 and React, improving performance by 40%\",\n        \"Architected and implemented a microservices-based backend using Node.js and GraphQL\",\n        \"Mentored 5 junior developers and conducted weekly code review sessions\",\n      ],\n    },\n    {\n      role: \"Full Stack Developer\",\n      company: \"StartUp Ltd.\",\n      period: \"2019 - 2021\",\n      location: \"Remote\",\n      achievements: [\n        \"Developed and maintained multiple client-facing applications with 99.9% uptime\",\n        \"Implemented CI/CD pipelines using GitHub Actions, reducing deployment time by 60%\",\n        \"Built a real-time analytics dashboard using React and WebSockets\",\n      ],\n    },\n    {\n      role: \"Junior Developer\",\n      company: \"Digital Agency\",\n      period: \"2017 - 2019\",\n      location: \"New York, NY\",\n      achievements: [\n        \"Contributed to 20+ client projects using React, Vue.js, and WordPress\",\n        \"Optimized web applications for SEO and accessibility (WCAG 2.1 AA)\",\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"E-commerce Platform\",\n      tech: [\"Next.js\", \"Stripe\", \"Prisma\"],\n      desc: \"A full-featured online store with real-time inventory management and payment processing.\",\n      stars: \"2.3k\",\n    },\n    {\n      name: \"Task Management App\",\n      tech: [\"React\", \"Firebase\", \"Tailwind\"],\n      desc: \"Collaborative task manager with drag-and-drop interface and real-time updates.\",\n      stars: \"1.8k\",\n    },\n    {\n      name: \"Analytics Dashboard\",\n      tech: [\"Vue.js\", \"D3.js\", \"Node.js\"],\n      desc: \"Real-time data visualization platform with custom chart components.\",\n      stars: \"1.2k\",\n    },\n    {\n      name: \"Social Media API\",\n      tech: [\"GraphQL\", \"PostgreSQL\", \"Redis\"],\n      desc: \"Scalable REST and GraphQL API serving 100k+ daily requests.\",\n      stars: \"890\",\n    },\n  ],\n  skills: [\n    {\n      category: \"Frontend\",\n      skills: [\"React\", \"Next.js\", \"TypeScript\", \"Tailwind CSS\", \"Vue.js\"],\n    },\n    {\n      category: \"Backend\",\n      skills: [\"Node.js\", \"Express\", \"GraphQL\", \"PostgreSQL\", \"MongoDB\"],\n    },\n    {\n      category: \"DevOps & Tools\",\n      skills: [\"Docker\", \"AWS\", \"CI/CD\", \"Git\", \"Vercel\"],\n    },\n  ],\n  education: [\n    {\n      degree: \"BS Computer Science\",\n      institution: \"University of Technology\",\n      period: \"2015 - 2019\",\n      extra: \"GPA: 3.8/4.0\",\n    },\n    {\n      degree: \"Full Stack Web Development\",\n      institution: \"Code Academy Bootcamp\",\n      period: \"2019\",\n      extra: \"Certificate\",\n    },\n    {\n      degree: \"AWS Certified Solutions Architect\",\n      institution: \"Amazon Web Services\",\n      period: \"2022\",\n      extra: null,\n    },\n  ],\n  languages: [\n    { lang: \"English\", level: \"Native\", percentage: 100 },\n    { lang: \"Spanish\", level: \"Professional\", percentage: 75 },\n    { lang: \"French\", level: \"Intermediate\", percentage: 50 },\n    { lang: \"Mandarin\", level: \"Basic\", percentage: 30 },\n  ],\n};\n\nexport function ResumeCard() {\n  const container = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.08,\n      },\n    },\n  };\n\n  const item = {\n    hidden: { opacity: 0, y: 20 },\n    show: { opacity: 1, y: 0 },\n  };\n\n  return (\n    <div className=\"w-full max-w-4xl mx-auto p-6 md:p-8 bg-background\">\n      <motion.div\n        variants={container}\n        initial=\"hidden\"\n        animate=\"show\"\n        className=\"space-y-12\"\n      >\n        {/* Header Section */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <div className=\"flex flex-col md:flex-row gap-6 items-center md:items-start\">\n            <motion.div\n              whileHover={{ scale: 1.05 }}\n              transition={{ duration: 0.2 }}\n            >\n              <Avatar className=\"w-24 h-24 md:w-28 md:h-28\">\n                <AvatarImage\n                  src={RESUME_DATA.personalInfo.avatarUrl}\n                  alt=\"Profile\"\n                />\n                <AvatarFallback>\n                  {RESUME_DATA.personalInfo.initials}\n                </AvatarFallback>\n              </Avatar>\n            </motion.div>\n\n            <div className=\"flex-1 text-center md:text-left space-y-3\">\n              <div>\n                <h1 className=\"text-3xl md:text-4xl font-bold text-foreground tracking-tight\">\n                  {RESUME_DATA.personalInfo.name}\n                </h1>\n                <p className=\"text-lg text-muted-foreground font-medium mt-1\">\n                  {RESUME_DATA.personalInfo.title}\n                </p>\n              </div>\n\n              <p className=\"text-sm text-muted-foreground max-w-2xl leading-relaxed\">\n                {RESUME_DATA.personalInfo.summary}\n              </p>\n\n              <div className=\"flex flex-wrap justify-center md:justify-start gap-x-4 gap-y-2 text-sm text-muted-foreground pt-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <MapPin className=\"w-4 h-4\" />\n                  <span>{RESUME_DATA.personalInfo.location}</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <Mail className=\"w-4 h-4\" />\n                  <span>{RESUME_DATA.personalInfo.email}</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <Phone className=\"w-4 h-4\" />\n                  <span>{RESUME_DATA.personalInfo.phone}</span>\n                </div>\n              </div>\n\n              <div className=\"flex flex-wrap justify-center md:justify-start gap-2 pt-2\">\n                {RESUME_DATA.personalInfo.socials.map((social, index) => (\n                  <Button\n                    key={index}\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"gap-2\"\n                  >\n                    <social.icon className=\"w-4 h-4\" />\n                    {social.name}\n                  </Button>\n                ))}\n                <Button size=\"sm\" className=\"gap-2\">\n                  <Download className=\"w-4 h-4\" />\n                  Download PDF\n                </Button>\n              </div>\n            </div>\n          </div>\n        </motion.div>\n\n        <Separator />\n\n        {/* Experience */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <h2 className=\"text-2xl font-bold flex items-center gap-2\">\n            Experience\n          </h2>\n\n          <div className=\"space-y-8\">\n            {RESUME_DATA.experience.map((job, index) => (\n              <div key={index} className=\"space-y-3\">\n                <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2\">\n                  <div>\n                    <h3 className=\"text-lg font-semibold text-foreground\">\n                      {job.role}\n                    </h3>\n                    <p className=\"font-medium\">{job.company}</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {job.location}\n                    </p>\n                  </div>\n                  <Badge variant=\"secondary\" className=\"w-fit\">\n                    {job.period}\n                  </Badge>\n                </div>\n                <ul className=\"space-y-1.5 text-sm text-muted-foreground\">\n                  {job.achievements.map((achievement, i) => (\n                    <li key={i} className=\"flex gap-2\">\n                      <span className=\"text-accent mt-0.5\">•</span>\n                      <span>{achievement}</span>\n                    </li>\n                  ))}\n                </ul>\n                {index < RESUME_DATA.experience.length - 1 && (\n                  <Separator className=\"mt-6\" />\n                )}\n              </div>\n            ))}\n          </div>\n        </motion.div>\n\n        <Separator />\n\n        {/* Projects */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <h2 className=\"text-2xl font-bold flex items-center gap-2\">\n            Featured Projects\n          </h2>\n\n          <div className=\"grid sm:grid-cols-2 gap-6\">\n            {RESUME_DATA.projects.map((project, index) => (\n              <motion.div\n                key={index}\n                whileHover={{ y: -4 }}\n                transition={{ duration: 0.2 }}\n                className=\"p-5 rounded-lg bg-accent/5 hover:bg-accent/10 transition-colors cursor-pointer space-y-3\"\n              >\n                <div className=\"flex justify-between items-start\">\n                  <h3 className=\"font-semibold text-foreground\">\n                    {project.name}\n                  </h3>\n                  <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n                    <Star className=\"w-3 h-3 fill-accent text-accent\" />\n                    <span>{project.stars}</span>\n                  </div>\n                </div>\n                <p className=\"text-sm text-muted-foreground\">{project.desc}</p>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {project.tech.map((tech) => (\n                    <Badge key={tech} variant=\"outline\" className=\"text-xs\">\n                      {tech}\n                    </Badge>\n                  ))}\n                </div>\n              </motion.div>\n            ))}\n          </div>\n        </motion.div>\n\n        <Separator />\n\n        {/* Skills */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <h2 className=\"text-2xl font-bold flex items-center gap-2\">Skills</h2>\n\n          <div className=\"space-y-5\">\n            {RESUME_DATA.skills.map((group, index) => (\n              <div key={index}>\n                <h4 className=\"text-sm font-semibold text-muted-foreground mb-3\">\n                  {group.category}\n                </h4>\n                <div className=\"flex flex-wrap gap-2\">\n                  {group.skills.map((skill) => (\n                    <Badge\n                      key={skill}\n                      variant=\"secondary\"\n                      className=\"hover:bg-accent hover:text-accent-foreground transition-colors cursor-default\"\n                    >\n                      {skill}\n                    </Badge>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </motion.div>\n\n        <Separator />\n\n        {/* Education */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <h2 className=\"text-2xl font-bold flex items-center gap-2\">\n            Education\n          </h2>\n\n          <div className=\"space-y-5\">\n            {RESUME_DATA.education.map((edu, index) => (\n              <div key={index}>\n                <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2\">\n                  <div>\n                    <h3 className=\"font-semibold text-foreground\">\n                      {edu.degree}\n                    </h3>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {edu.institution}\n                    </p>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {edu.period}\n                  </span>\n                </div>\n                {edu.extra && (\n                  <Badge variant=\"outline\" className=\"mt-2 text-xs\">\n                    {edu.extra}\n                  </Badge>\n                )}\n              </div>\n            ))}\n          </div>\n        </motion.div>\n\n        <Separator />\n\n        {/* Languages */}\n        <motion.div variants={item} className=\"space-y-6\">\n          <h2 className=\"text-2xl font-bold flex items-center gap-2\">\n            Languages\n          </h2>\n\n          <div className=\"grid sm:grid-cols-2 gap-6\">\n            {RESUME_DATA.languages.map((language, index) => (\n              <div key={index} className=\"space-y-2\">\n                <div className=\"flex justify-between items-center\">\n                  <span className=\"text-sm font-medium text-foreground\">\n                    {language.lang}\n                  </span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {language.level}\n                  </span>\n                </div>\n                <div className=\"w-full bg-accent/20 h-2 rounded-full overflow-hidden\">\n                  <motion.div\n                    initial={{ width: 0 }}\n                    animate={{ width: `${language.percentage}%` }}\n                    transition={{ duration: 1, delay: 0.5 + index * 0.1 }}\n                    className=\"bg-accent h-full rounded-full\"\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/resume-card-shadcnui.tsx"
    }
  ]
}