{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "minimal-resume-shadcnui",
  "type": "registry:component",
  "title": "Minimal Resume",
  "description": "Vercel-inspired minimal resume with clean typography and grid layout",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/resumes/shadcnui/minimal-resume.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { motion, Variants } from \"framer-motion\";\nimport {\n  ArrowUpRight,\n  Github,\n  Globe,\n  Mail,\n  MapPin,\n  Twitter,\n} from \"lucide-react\";\n\nconst RESUME_DATA = {\n  profile: {\n    name: \"Jordan Lee\",\n    role: \"Product Engineer\",\n    avatarGradient:\n      \"from-gray-100 to-gray-200 dark:from-zinc-800 dark:to-zinc-700\",\n    socials: [\n      { name: \"GitHub\", icon: Github, url: \"#\" },\n      { name: \"Twitter\", icon: Twitter, url: \"#\" },\n      { name: \"Email\", icon: Mail, url: \"#\" },\n    ],\n  },\n  contact: {\n    website: \"jordan.dev\",\n    location: \"San Francisco, CA\",\n  },\n  stack: [\n    \"Next.js\",\n    \"React\",\n    \"TypeScript\",\n    \"Node.js\",\n    \"PostgreSQL\",\n    \"Tailwind\",\n  ],\n  education: {\n    degree: \"BS Computer Science\",\n    school: \"University of Technology\",\n    period: \"2016 - 2020\",\n  },\n  about: {\n    text: \"Product engineer focused on building accessible, pixel-perfect user interfaces. Currently designing systems at\",\n    company: \"Vercel\",\n    suffix: \". Passionate about web performance and developer experience.\",\n  },\n  experience: [\n    {\n      role: \"Senior Frontend Engineer\",\n      company: \"Vercel\",\n      period: \"2022 - Present\",\n      description: [\n        \"Led the migration to Next.js App Router, improving load times by 35%.\",\n        \"Architected the internal component library used by 50+ engineers.\",\n      ],\n    },\n    {\n      role: \"Software Engineer\",\n      company: \"Stripe\",\n      period: \"2020 - 2022\",\n      description: [\n        \"Built the new checkout experience, increasing conversion by 12%.\",\n        \"Implemented automated accessibility testing pipelines.\",\n      ],\n    },\n  ],\n  projects: [\n    {\n      title: \"Geist UI\",\n      desc: \"React component library inspired by Vercel's design system.\",\n      stars: \"4.2k\",\n    },\n    {\n      title: \"Next.js Conf\",\n      desc: \"Interactive conference platform built with Next.js and WebGL.\",\n      stars: \"2.1k\",\n    },\n  ],\n};\n\nexport function MinimalResume() {\n  const container: Variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.05,\n      },\n    },\n  };\n\n  const item: Variants = {\n    hidden: { opacity: 0, y: 10 },\n    show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: \"easeOut\" } },\n  };\n\n  return (\n    <div>\n      <motion.div\n        variants={container}\n        initial=\"hidden\"\n        animate=\"show\"\n        className=\"bg-white dark:bg-zinc-950 border border-gray-200 dark:border-zinc-800 rounded-lg overflow-hidden transition-colors duration-300\"\n      >\n        <div className=\"grid grid-cols-1 md:grid-cols-12 min-h-[800px]\">\n          {/* Sidebar */}\n          <div className=\"md:col-span-4 bg-gray-50/50 dark:bg-zinc-900/50 border-r border-gray-200 dark:border-zinc-800 p-8 flex flex-col gap-8 transition-colors duration-300\">\n            {/* Profile Header */}\n            <motion.div variants={item} className=\"space-y-4\">\n              <div\n                className={`h-16 w-16 rounded-full bg-gradient-to-tr ${RESUME_DATA.profile.avatarGradient} border border-gray-200 dark:border-zinc-700`}\n              />\n              <div>\n                <h1 className=\"text-xl font-semibold tracking-tight text-gray-900 dark:text-zinc-100\">\n                  {RESUME_DATA.profile.name}\n                </h1>\n                <p className=\"text-sm text-gray-500 dark:text-zinc-400 font-mono mt-1\">\n                  {RESUME_DATA.profile.role}\n                </p>\n              </div>\n              <div className=\"flex gap-2\">\n                {RESUME_DATA.profile.socials.map((social, index) => (\n                  <Button\n                    key={index}\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"h-8 w-8 rounded-md border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 hover:bg-white dark:hover:bg-zinc-800 text-gray-500 dark:text-zinc-400 hover:text-black dark:hover:text-zinc-100 transition-all\"\n                  >\n                    <social.icon className=\"h-4 w-4\" />\n                  </Button>\n                ))}\n              </div>\n            </motion.div>\n\n            <Separator className=\"bg-gray-200 dark:bg-zinc-800\" />\n\n            {/* Contact */}\n            <motion.div variants={item} className=\"space-y-3\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                Contact\n              </h2>\n              <div className=\"space-y-2 text-sm\">\n                <a\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-gray-600 dark:text-zinc-400 hover:text-black dark:hover:text-zinc-200 transition-colors group\"\n                >\n                  <Globe className=\"h-3.5 w-3.5 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300\" />\n                  <span>{RESUME_DATA.contact.website}</span>\n                </a>\n                <div className=\"flex items-center gap-2 text-gray-600 dark:text-zinc-400\">\n                  <MapPin className=\"h-3.5 w-3.5 text-gray-400 dark:text-zinc-500\" />\n                  <span>{RESUME_DATA.contact.location}</span>\n                </div>\n              </div>\n            </motion.div>\n\n            {/* Skills */}\n            <motion.div variants={item} className=\"space-y-3\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                Stack\n              </h2>\n              <div className=\"flex flex-wrap gap-1.5\">\n                {RESUME_DATA.stack.map((skill) => (\n                  <span\n                    key={skill}\n                    className=\"px-2 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded text-[11px] font-medium text-gray-600 dark:text-zinc-400\"\n                  >\n                    {skill}\n                  </span>\n                ))}\n              </div>\n            </motion.div>\n\n            {/* Education */}\n            <motion.div variants={item} className=\"space-y-3\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                Education\n              </h2>\n              <div>\n                <h3 className=\"font-medium text-gray-900 dark:text-zinc-100 text-sm\">\n                  {RESUME_DATA.education.degree}\n                </h3>\n                <p className=\"text-xs text-gray-500 dark:text-zinc-400 mt-0.5\">\n                  {RESUME_DATA.education.school}\n                </p>\n                <p className=\"text-[10px] text-gray-400 dark:text-zinc-500 mt-1 font-mono\">\n                  {RESUME_DATA.education.period}\n                </p>\n              </div>\n            </motion.div>\n          </div>\n\n          {/* Main Content */}\n          <div className=\"md:col-span-8 p-8 md:p-10 space-y-10 bg-white dark:bg-zinc-950 transition-colors duration-300\">\n            {/* About */}\n            <motion.div variants={item} className=\"space-y-3\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                About\n              </h2>\n              <p className=\"text-sm text-gray-600 dark:text-zinc-400 leading-relaxed max-w-2xl\">\n                {RESUME_DATA.about.text}{\" \"}\n                <span className=\"font-medium text-gray-900 dark:text-zinc-100\">\n                  {RESUME_DATA.about.company}\n                </span>\n                {RESUME_DATA.about.suffix}\n              </p>\n            </motion.div>\n\n            {/* Experience */}\n            <motion.div variants={item} className=\"space-y-6\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                Experience\n              </h2>\n\n              <div className=\"space-y-8\">\n                {RESUME_DATA.experience.map((job, index) => (\n                  <div key={index} className=\"group\">\n                    <div className=\"flex justify-between items-baseline mb-1\">\n                      <h3 className=\"font-medium text-gray-900 dark:text-zinc-100 text-sm\">\n                        {job.role}\n                      </h3>\n                      <span className=\"text-xs font-mono text-gray-400 dark:text-zinc-500\">\n                        {job.period}\n                      </span>\n                    </div>\n                    <p className=\"text-xs text-gray-500 dark:text-zinc-400 mb-3\">\n                      {job.company}\n                    </p>\n                    <ul className=\"text-sm text-gray-600 dark:text-zinc-400 space-y-1.5 list-disc list-outside ml-3 marker:text-gray-300 dark:marker:text-zinc-700\">\n                      {job.description.map((desc, i) => (\n                        <li key={i}>{desc}</li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            </motion.div>\n\n            {/* Projects */}\n            <motion.div variants={item} className=\"space-y-4\">\n              <h2 className=\"text-xs font-mono font-medium uppercase tracking-wider text-gray-500 dark:text-zinc-500\">\n                Projects\n              </h2>\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                {RESUME_DATA.projects.map((project, i) => (\n                  <div\n                    key={i}\n                    className=\"group p-3 rounded-md border border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-all cursor-pointer\"\n                  >\n                    <div className=\"flex justify-between items-start mb-1.5\">\n                      <h3 className=\"font-medium text-sm text-gray-900 dark:text-zinc-100\">\n                        {project.title}\n                      </h3>\n                      <ArrowUpRight className=\"h-3.5 w-3.5 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300 transition-colors\" />\n                    </div>\n                    <p className=\"text-xs text-gray-500 dark:text-zinc-400 line-clamp-2 mb-2\">\n                      {project.desc}\n                    </p>\n                    <div className=\"flex items-center gap-1 text-[10px] text-gray-400 dark:text-zinc-500 font-mono\">\n                      <span>★ {project.stars}</span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </motion.div>\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/minimal-resume-shadcnui.tsx"
    }
  ]
}