{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-awards-and-recognition-awards-timeline","type":"registry:block","title":"Awards Timeline","files":[{"path":"components/blocks/portfolio/portfolio-awards-and-recognition/awards-timeline.tsx","content":"import { ExternalLink, Calendar } from 'lucide-react';\n\nexport default function AwardsAndRecognitionTimeline() {\n  const awards = [\n    {\n      year: '2023',\n      month: 'November',\n      name: 'Design Excellence Award',\n      organization: 'International Web Design Council',\n      description:\n        'Recognized for exceptional user interface design and accessibility standards.',\n      logo: 'https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      year: '2022',\n      month: 'September',\n      name: 'Rising Talent Award',\n      organization: 'Creative Network Alliance',\n      description:\n        'Selected from over 3,000 nominees as an emerging talent in digital design.',\n      logo: 'https://images.unsplash.com/photo-1621839673705-6617adf9e890?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      year: '2021',\n      month: 'June',\n      name: 'Best Portfolio Website',\n      organization: 'Webflow Awards',\n      description:\n        'Honored for creating an innovative and engaging portfolio experience.',\n      logo: 'https://images.unsplash.com/photo-1569012871812-f38ee64cd54c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      year: '2020',\n      month: 'August',\n      name: 'UX Certificate with Distinction',\n      organization: 'Nielsen Norman Group',\n      description:\n        'Completed advanced user experience certification with highest honors.',\n      logo: 'https://images.unsplash.com/photo-1567427361984-0cbe7396fc6c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      link: '#',\n    },\n    {\n      year: '2019',\n      month: 'March',\n      name: 'Front-End Developer Certification',\n      organization: 'Mozilla Development Network',\n      description:\n        'Recognized for excellence in front-end web development techniques.',\n      logo: 'https://images.unsplash.com/photo-1563986768711-b3bde3dc821e?q=80&w=1918&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\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        {/* Header */}\n        <div className=\"mb-16 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Professional Recognition\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n            A timeline of awards, certifications, and achievements throughout my\n            career.\n          </p>\n        </div>\n\n        {/* Timeline */}\n        <div className=\"mx-auto max-w-4xl\">\n          {/* Mobile Timeline */}\n          <div className=\"space-y-6 md:hidden\">\n            {awards.map((award, index) => (\n              <div\n                key={index}\n                className=\"bg-card rounded-lg border p-5 shadow-sm\"\n              >\n                {/* Header Row with Image, Name and Organization */}\n                <div className=\"flex items-center gap-3\">\n                  {/* Logo */}\n                  <div className=\"relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-md border\">\n                    <img\n                      src={award.logo}\n                      alt={award.organization}\n                      className=\"object-cover\"\n                    />\n                  </div>\n\n                  {/* Award Title and Organization */}\n                  <div className=\"min-w-0 flex-1\">\n                    <h3 className=\"truncate text-base leading-tight font-semibold\">\n                      {award.name}\n                    </h3>\n                    <p className=\"text-muted-foreground truncate text-xs font-medium\">\n                      {award.organization}\n                    </p>\n                    <div className=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n                      <Calendar className=\"h-3 w-3\" />\n                      <span>\n                        {award.month} {award.year}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                {/* Description */}\n                <p className=\"text-muted-foreground mt-4 text-sm\">\n                  {award.description}\n                </p>\n\n                {/* Link */}\n                <div className=\"mt-3\">\n                  <a\n                    href={award.link}\n                    className=\"text-primary inline-flex items-center text-sm font-medium hover:underline\"\n                  >\n                    View Certificate\n                    <ExternalLink className=\"ml-1 h-3 w-3\" />\n                  </a>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Desktop Timeline */}\n          <div className=\"hidden space-y-8 md:block\">\n            {awards.map((award, index) => (\n              <div key={index} className=\"relative\">\n                {/* Date Badge (only element from timeline kept) */}\n                <div className=\"absolute top-6 -left-4 z-10\">\n                  <div className=\"bg-primary text-primary-foreground flex h-10 items-center justify-center rounded-full px-4 text-sm font-medium\">\n                    {award.year}\n                  </div>\n                </div>\n\n                {/* Award Card (same layout as mobile) */}\n                <div className=\"bg-card ml-14 rounded-lg border p-6 shadow-sm\">\n                  {/* Header Row with Image, Name and Organization */}\n                  <div className=\"flex items-center gap-4\">\n                    {/* Logo */}\n                    <div className=\"relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border\">\n                      <img\n                        src={award.logo}\n                        alt={award.organization}\n                        className=\"object-cover\"\n                      />\n                    </div>\n\n                    {/* Award Title and Organization */}\n                    <div className=\"min-w-0 flex-1\">\n                      <h3 className=\"text-xl leading-tight font-semibold\">\n                        {award.name}\n                      </h3>\n                      <p className=\"text-muted-foreground text-sm font-medium\">\n                        {award.organization}\n                      </p>\n                      <div className=\"text-muted-foreground mt-1 flex items-center gap-1 text-xs\">\n                        <Calendar className=\"h-3 w-3\" />\n                        <span>\n                          {award.month} {award.year}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* Description */}\n                  <p className=\"text-muted-foreground mt-5\">\n                    {award.description}\n                  </p>\n\n                  {/* Link */}\n                  <div className=\"mt-4\">\n                    <a\n                      href={award.link}\n                      className=\"text-primary inline-flex items-center text-sm font-medium hover:underline\"\n                    >\n                      View Certificate\n                      <ExternalLink className=\"ml-1 h-3 w-3\" />\n                    </a>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-awards-and-recognition/awards-timeline.tsx"}],"description":"A vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.","dependencies":["lucide-react"]}