{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-me",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-me.tsx",
      "content": "import React from 'react'\r\nimport { cn } from '@/lib/utils'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nexport const AboutMe = () => {\r\n  return (\r\n    <section className=\"bg-neutral-100 min-h-screen px-6 py-24 md:px-12 lg:px-24 font-manrope\">\r\n      <div className=\"max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-16\">\r\n        <div className=\"relative w-full max-w-sm shrink-0\">\r\n          <div className=\"md:aspect-auto aspect-5/6 rounded-2xl overflow-hidden bg-gray-200\">\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1676377630356-d8e7acd02ead?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              alt=\"Naymur\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </div>\r\n          <div className=\"absolute -bottom-12 -left-4\">\r\n            {/* Simple representation of the handwritten signature */}\r\n            <div className=\"font-serif italic text-2xl text-gray-800 -rotate-6\">\r\n              Naymur Rahman\r\n              <div className=\"h-px w-48 bg-gray-400 -mt-1\"></div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"flex-1 space-y-8\">\r\n          <div className=\"inline-flex items-center gap-2 text-sm text-gray-500 font-medium\">\r\n            <span>« About me »</span>\r\n          </div>\r\n\r\n          <h2 className=\"text-6xl md:text-6xl font-bold text-gray-900 text-balance\">\r\n            The Digital Craftsmanship\r\n          </h2>\r\n\r\n          <div className=\"space-y-6 max-w-2xl\">\r\n            <p className=\"text-xl text-gray-600 leading-relaxed text-pretty\">\r\n              As a passionate UI/UX designer and frontend developer, I\r\n              specialize in creating beautiful, functional digital experiences\r\n              that bridge the gap between design and technology.\r\n            </p>\r\n            <p className=\"text-xl text-gray-600 leading-relaxed text-pretty\">\r\n              With over 5 years of experience in the industry, I've had the\r\n              privilege of working with startups and established companies to\r\n              transform their ideas into engaging digital products that users\r\n              love.\r\n            </p>\r\n          </div>\r\n\r\n          <Button className=\"bg-violet-600 hover:bg-violet-700 text-white px-8 py-4 rounded-full font-semibold flex items-center gap-3 transition-colors group\">\r\n            Read My Full Story\r\n            <div className=\"size-8 bg-white rounded-full flex items-center justify-center text-violet-600 group-hover:translate-x-1 transition-transform\">\r\n              <span className=\"text-lg\">›</span>\r\n            </div>\r\n          </Button>\r\n        </div>\r\n\r\n        <div className=\"hidden lg:block w-48 shrink-0 self-end\">\r\n          <div className=\"aspect-square rounded-3xl overflow-hidden bg-gray-200 rotate-6 shadow-xl\">\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1765779038142-054a9f8c2268?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </div>\r\n          <div className=\"aspect-square rounded-3xl overflow-hidden bg-gray-200 -rotate-6 shadow-xl\">\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1764703495149-f09b0aa607c3?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover\"\r\n            />\r\n          </div>\r\n        </div>\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"
}