{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "standard-resume-shadcnui",
  "type": "registry:component",
  "title": "Standard Resume",
  "description": "A standard, professional resume layout with a sidebar, suitable for most industries.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/standard-resume.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 { Card, CardContent } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { motion, Variants } from \"framer-motion\";\nimport {\n  Briefcase,\n  Building2,\n  Code2,\n  Download,\n  ExternalLink,\n  Globe,\n  GraduationCap,\n  Languages,\n  Linkedin,\n  Mail,\n  MapPin,\n  Phone,\n} from \"lucide-react\";\n\nconst RESUME_DATA = {\n  personalInfo: {\n    name: \"Jordan Davis\",\n    title: \"Senior Full Stack Engineer\",\n    summary:\n      \"Passionate developer with 5+ years of experience building scalable web applications. Dedicated to writing clean, efficient code and creating intuitive user experiences that delight users.\",\n    email: \"jordan.davis@example.com\",\n    phone: \"(555) 987-6543\",\n    location: \"San Francisco, CA\",\n    avatarUrl: \"https://github.com/shadcn.png\",\n    initials: \"JD\",\n  },\n  experience: [\n    {\n      role: \"Senior Frontend Engineer\",\n      company: \"TechFlow Systems\",\n      period: \"2021 - Present\",\n      description: [\n        \"Spearheaded the migration of legacy codebase to Next.js, improving load times by 40%.\",\n        \"Implemented a comprehensive design system using Tailwind CSS and Storybook, reducing development time by 25%.\",\n        \"Mentored junior developers and established code quality standards through rigorous code reviews.\",\n      ],\n    },\n    {\n      role: \"Software Developer\",\n      company: \"Creative Solutions Inc.\",\n      period: \"2018 - 2021\",\n      description: [\n        \"Developed and maintained client-facing web applications using React and Redux.\",\n        \"Collaborated with UX designers to implement responsive and accessible interfaces compliant with WCAG 2.1.\",\n        \"Integrated third-party APIs for payment processing and data visualization.\",\n      ],\n    },\n  ],\n  projects: [\n    {\n      title: \"E-commerce Dashboard\",\n      type: \"Open Source\",\n      description:\n        \"A comprehensive analytics dashboard for online retailers featuring real-time data visualization, inventory management, and sales forecasting.\",\n      tech: [\"React\", \"D3.js\", \"Node.js\"],\n    },\n    {\n      title: \"Task Management App\",\n      type: \"SaaS\",\n      description:\n        \"Collaborative project management tool with real-time updates, team chat functionality, and automated workflow triggers.\",\n      tech: [\"Vue.js\", \"Firebase\", \"Tailwind\"],\n    },\n  ],\n  education: [\n    {\n      degree: \"Master of Computer Science\",\n      school: \"Stanford University\",\n      year: \"2016 - 2018\",\n    },\n    {\n      degree: \"BS in Software Engineering\",\n      school: \"MIT\",\n      year: \"2012 - 2016\",\n    },\n  ],\n  skills: {\n    frontend: [\"React\", \"Next.js\", \"TypeScript\", \"Tailwind\", \"Framer Motion\"],\n    backend: [\"Node.js\", \"PostgreSQL\", \"GraphQL\", \"Redis\"],\n    tools: [\"Git\", \"Docker\", \"AWS\", \"Figma\"],\n  },\n  languages: [\n    { name: \"English\", level: \"Native\" },\n    { name: \"Spanish\", level: \"Fluent\" },\n    { name: \"French\", level: \"Intermediate\" },\n  ],\n};\n\nexport function StandardResume() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n        delayChildren: 0.2,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 20 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.5, ease: \"easeOut\" },\n    },\n  };\n\n  return (\n    <div className=\"\">\n      <motion.div\n        variants={containerVariants}\n        initial=\"hidden\"\n        animate=\"visible\"\n        className=\"bg-card text-card-foreground rounded-2xl shadow-xl border border-border/50 overflow-hidden\"\n      >\n        {/* Header Section with Gradient */}\n        <motion.div\n          variants={itemVariants}\n          className=\"relative bg-gradient-to-br from-primary/5 via-muted/50 to-background p-8 md:p-12 border-b border-border/60\"\n        >\n          <div className=\"relative z-10 flex flex-col md:flex-row gap-8 items-center md:items-start text-center md:text-left\">\n            <motion.div\n              whileHover={{ scale: 1.05 }}\n              transition={{ type: \"spring\", stiffness: 300 }}\n              className=\"relative\"\n            >\n              <div className=\"absolute inset-0 rounded-full bg-primary/20 blur-xl transform scale-110\" />\n              <Avatar className=\"h-32 w-32 md:h-40 md:w-40 border-4 border-background shadow-2xl relative\">\n                <AvatarImage\n                  src={RESUME_DATA.personalInfo.avatarUrl}\n                  alt=\"Profile picture\"\n                />\n                <AvatarFallback className=\"text-4xl font-bold bg-primary/10 text-primary\">\n                  {RESUME_DATA.personalInfo.initials}\n                </AvatarFallback>\n              </Avatar>\n            </motion.div>\n\n            <div className=\"flex-1 space-y-4\">\n              <div>\n                <h1 className=\"text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-2\">\n                  {RESUME_DATA.personalInfo.name}\n                </h1>\n                <p className=\"text-xl md:text-2xl text-primary font-medium tracking-wide\">\n                  {RESUME_DATA.personalInfo.title}\n                </p>\n              </div>\n\n              <p className=\"text-muted-foreground max-w-2xl mx-auto md:mx-0 leading-relaxed text-base md:text-lg\">\n                {RESUME_DATA.personalInfo.summary}\n              </p>\n\n              <div className=\"flex flex-wrap justify-center md:justify-start gap-3 pt-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"gap-2 h-9 rounded-full bg-background/50 backdrop-blur-sm hover:bg-primary/10 hover:text-primary hover:border-primary/50 transition-all duration-300\"\n                >\n                  <Mail className=\"h-3.5 w-3.5\" />\n                  <span>{RESUME_DATA.personalInfo.email}</span>\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"gap-2 h-9 rounded-full bg-background/50 backdrop-blur-sm hover:bg-primary/10 hover:text-primary hover:border-primary/50 transition-all duration-300\"\n                >\n                  <Phone className=\"h-3.5 w-3.5\" />\n                  <span>{RESUME_DATA.personalInfo.phone}</span>\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"gap-2 h-9 rounded-full bg-background/50 backdrop-blur-sm hover:bg-primary/10 hover:text-primary hover:border-primary/50 transition-all duration-300\"\n                >\n                  <MapPin className=\"h-3.5 w-3.5\" />\n                  <span>{RESUME_DATA.personalInfo.location}</span>\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-3 min-w-[160px]\">\n              <Button className=\"w-full gap-2 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-all duration-300 rounded-full\">\n                <Download className=\"h-4 w-4\" />\n                Download CV\n              </Button>\n              <div className=\"flex gap-2 justify-center\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-10 w-10 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-full transition-all duration-300\"\n                >\n                  <Linkedin className=\"h-5 w-5\" />\n                  <span className=\"sr-only\">LinkedIn</span>\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-10 w-10 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-full transition-all duration-300\"\n                >\n                  <Globe className=\"h-5 w-5\" />\n                  <span className=\"sr-only\">Website</span>\n                </Button>\n              </div>\n            </div>\n          </div>\n        </motion.div>\n\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-0 lg:divide-x divide-border/60\">\n          {/* Main Content Column */}\n          <div className=\"lg:col-span-2 p-8 md:p-10 space-y-10\">\n            {/* Experience Section */}\n            <motion.section\n              variants={itemVariants}\n              aria-labelledby=\"experience-heading\"\n            >\n              <div className=\"flex items-center gap-3 mb-6\">\n                <div className=\"p-2.5 bg-primary/10 rounded-xl text-primary shadow-sm\">\n                  <Briefcase className=\"h-5 w-5\" />\n                </div>\n                <h2\n                  id=\"experience-heading\"\n                  className=\"text-2xl font-bold text-foreground tracking-tight\"\n                >\n                  Work Experience\n                </h2>\n              </div>\n\n              <div className=\"space-y-8 relative pl-2\">\n                {RESUME_DATA.experience.map((job, index) => (\n                  <div key={index} className=\"relative pl-8 group\">\n                    <div className=\"absolute left-0 top-1.5 h-5 w-5 rounded-full border-4 border-background bg-primary shadow-md group-hover:scale-125 transition-transform duration-300\" />\n                    <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2\">\n                      <h3 className=\"font-bold text-lg text-foreground group-hover:text-primary transition-colors\">\n                        {job.role}\n                      </h3>\n                      <Badge variant=\"secondary\" className=\"font-medium w-fit\">\n                        {job.period}\n                      </Badge>\n                    </div>\n                    <div className=\"flex items-center gap-2 text-primary font-semibold text-sm mb-3\">\n                      <Building2 className=\"h-3.5 w-3.5\" />\n                      <span>{job.company}</span>\n                    </div>\n                    <ul className=\"list-disc list-outside ml-4 space-y-2 text-sm text-muted-foreground/90 leading-relaxed\">\n                      {job.description.map((item, i) => (\n                        <li\n                          key={i}\n                          dangerouslySetInnerHTML={{\n                            __html: item.replace(\n                              /(Next\\.js|Tailwind CSS|React)/g,\n                              '<span class=\"font-medium text-foreground\">$1</span>'\n                            ),\n                          }}\n                        />\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            </motion.section>\n\n            <Separator className=\"bg-border/60\" />\n\n            {/* Projects Section */}\n            <motion.section\n              variants={itemVariants}\n              aria-labelledby=\"projects-heading\"\n            >\n              <div className=\"flex items-center gap-3 mb-6\">\n                <div className=\"p-2.5 bg-primary/10 rounded-xl text-primary shadow-sm\">\n                  <Code2 className=\"h-5 w-5\" />\n                </div>\n                <h2\n                  id=\"projects-heading\"\n                  className=\"text-2xl font-bold text-foreground tracking-tight\"\n                >\n                  Featured Projects\n                </h2>\n              </div>\n\n              <div className=\"grid gap-5\">\n                {RESUME_DATA.projects.map((project, index) => (\n                  <motion.div\n                    key={index}\n                    whileHover={{ y: -4 }}\n                    transition={{ type: \"spring\", stiffness: 300 }}\n                  >\n                    <Card className=\"bg-gradient-to-br from-card to-muted/20 border-border/50 hover:border-primary/50 hover:shadow-lg transition-all duration-300\">\n                      <CardContent className=\"p-5\">\n                        <div className=\"flex justify-between items-start mb-3\">\n                          <div className=\"flex items-center gap-2\">\n                            <h3 className=\"font-bold text-lg\">\n                              {project.title}\n                            </h3>\n                            <ExternalLink className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                          </div>\n                          <Badge\n                            variant={\n                              project.type === \"Open Source\"\n                                ? \"default\"\n                                : \"outline\"\n                            }\n                            className=\"text-[10px] uppercase tracking-wider font-bold shadow-sm\"\n                          >\n                            {project.type}\n                          </Badge>\n                        </div>\n                        <p className=\"text-sm text-muted-foreground mb-4 leading-relaxed\">\n                          {project.description}\n                        </p>\n                        <div className=\"flex flex-wrap gap-2\">\n                          {project.tech.map((tech, i) => (\n                            <Badge\n                              key={i}\n                              variant=\"secondary\"\n                              className=\"text-[10px] bg-primary/5 text-primary border-primary/10\"\n                            >\n                              {tech}\n                            </Badge>\n                          ))}\n                        </div>\n                      </CardContent>\n                    </Card>\n                  </motion.div>\n                ))}\n              </div>\n            </motion.section>\n          </div>\n\n          {/* Sidebar Column */}\n          <div className=\"bg-muted/10 p-8 md:p-10 space-y-10 h-full\">\n            {/* Education */}\n            <motion.section\n              variants={itemVariants}\n              aria-labelledby=\"education-heading\"\n            >\n              <div className=\"flex items-center gap-3 mb-5\">\n                <GraduationCap className=\"h-5 w-5 text-primary\" />\n                <h2\n                  id=\"education-heading\"\n                  className=\"text-lg font-bold text-foreground tracking-tight uppercase\"\n                >\n                  Education\n                </h2>\n              </div>\n              <div className=\"space-y-6\">\n                {RESUME_DATA.education.map((edu, index) => (\n                  <div\n                    key={index}\n                    className=\"relative pl-4 border-l-2 border-primary/20\"\n                  >\n                    <h3 className=\"font-bold text-base\">{edu.degree}</h3>\n                    <div className=\"text-sm text-primary font-medium mb-1\">\n                      {edu.school}\n                    </div>\n                    <div className=\"text-xs text-muted-foreground font-medium uppercase tracking-wider\">\n                      {edu.year}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </motion.section>\n\n            <Separator className=\"bg-border/60\" />\n\n            {/* Skills */}\n            <motion.section\n              variants={itemVariants}\n              aria-labelledby=\"skills-heading\"\n            >\n              <div className=\"flex items-center gap-3 mb-5\">\n                <Code2 className=\"h-5 w-5 text-primary\" />\n                <h2\n                  id=\"skills-heading\"\n                  className=\"text-lg font-bold text-foreground tracking-tight uppercase\"\n                >\n                  Skills\n                </h2>\n              </div>\n\n              <div className=\"space-y-6\">\n                <div>\n                  <h3 className=\"text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 flex items-center gap-2\">\n                    <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />{\" \"}\n                    Frontend\n                  </h3>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {RESUME_DATA.skills.frontend.map((skill, i) => (\n                      <Badge\n                        key={i}\n                        className=\"bg-background hover:bg-primary hover:text-primary-foreground text-foreground border-border transition-colors duration-300\"\n                      >\n                        {skill}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <h3 className=\"text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 flex items-center gap-2\">\n                    <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />{\" \"}\n                    Backend\n                  </h3>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {RESUME_DATA.skills.backend.map((skill, i) => (\n                      <Badge\n                        key={i}\n                        className=\"bg-background hover:bg-primary hover:text-primary-foreground text-foreground border-border transition-colors duration-300\"\n                      >\n                        {skill}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <h3 className=\"text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 flex items-center gap-2\">\n                    <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />{\" \"}\n                    Tools\n                  </h3>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {RESUME_DATA.skills.tools.map((skill, i) => (\n                      <Badge\n                        key={i}\n                        className=\"bg-background hover:bg-primary hover:text-primary-foreground text-foreground border-border transition-colors duration-300\"\n                      >\n                        {skill}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            </motion.section>\n\n            <Separator className=\"bg-border/60\" />\n\n            {/* Languages */}\n            <motion.section\n              variants={itemVariants}\n              aria-labelledby=\"languages-heading\"\n            >\n              <div className=\"flex items-center gap-3 mb-5\">\n                <Languages className=\"h-5 w-5 text-primary\" />\n                <h2\n                  id=\"languages-heading\"\n                  className=\"text-lg font-bold text-foreground tracking-tight uppercase\"\n                >\n                  Languages\n                </h2>\n              </div>\n              <div className=\"space-y-3\">\n                {RESUME_DATA.languages.map((lang, index) => (\n                  <div\n                    key={index}\n                    className=\"flex justify-between items-center p-2 rounded-lg bg-background/50 border border-border/50\"\n                  >\n                    <span className=\"font-medium\">{lang.name}</span>\n                    <Badge variant=\"secondary\" className=\"text-xs\">\n                      {lang.level}\n                    </Badge>\n                  </div>\n                ))}\n              </div>\n            </motion.section>\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/standard-resume-shadcnui.tsx"
    }
  ]
}