> ## Documentation Index
> Fetch the complete documentation index at: https://rajanand.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome!

export const ProjectsList = [{
  id: 'tools',
  label: 'Tools & Calculators',
  items: [{
    id: 'calculators',
    title: 'Calculators Directory',
    desc: 'A comprehensive collection of calculators and conversion utilities for daily tasks.',
    image: '/assets/icons/toolbox.svg',
    demo: 'https://calculators.directory/',
    source: 'https://github.com/rajanand/calculators',
    isActive: true,
    status: 'Active',
    tags: ['Tool']
  }, {
    id: 'tools-app',
    title: 'Developer Tools',
    desc: 'A suite of web-based utilities and helper tools designed for developers.',
    image: '/assets/icons/toolbox.svg',
    demo: 'https://tools.rajanand.org/',
    source: 'https://github.com/rajanand/tools',
    isActive: false,
    status: 'Inactive',
    tags: ['Tool']
  }, {
    id: 'pincode',
    title: 'Pincode Search',
    desc: 'Quick search tool to lookup and locate postal index numbers (PIN codes) across India.',
    image: '/assets/icons/azure-sql.svg',
    demo: 'https://pincode.rajanand.org/',
    source: 'https://github.com/rajanand/pincode',
    isActive: true,
    tags: ['Tool']
  }, {
    id: 'digipin',
    title: 'DigiPin Finder',
    desc: 'Lookup and validate Indian digital postal codes (DigiPin) using modern geographic mapping.',
    image: '/assets/icons/google-cloud.svg',
    demo: 'https://digipin.rajanand.org/',
    source: 'https://github.com/rajanand/digipin',
    isActive: true,
    tags: ['Tool']
  }, {
    id: 'ifsc',
    title: 'IFSC Finder',
    desc: 'Search, find, and verify IFSC bank codes for branches across all Indian banks.',
    image: '/assets/icons/azure-sql-database.svg',
    demo: 'https://ifsc.rajanand.org/',
    source: 'https://github.com/rajanand/ifsc',
    isActive: true,
    tags: ['Tool']
  }, {
    id: 'tamil',
    title: 'Learn Tamil for Kids',
    desc: 'A fun, interactive way for children to learn Tamil vocabulary and basic words.',
    image: '/assets/icons/python.svg',
    demo: 'https://tamil.rajanand.org/',
    source: 'https://github.com/rajanand/tamil',
    isActive: true,
    tags: ['Language']
  }, {
    id: 'substack-os',
    title: 'Substack OS Notes Scheduler',
    desc: 'A Chrome browser extension to easily schedule notes posts on Substack.',
    image: '/assets/icons/chrome.svg',
    demo: 'https://chromewebstore.google.com/detail/substack-os-notes-schedul/nkifhkjojlhloopekckknekdobnebpef',
    source: 'https://github.com/rajanand/substack-os',
    isActive: true,
    tags: ['Extension']
  }]
}, {
  id: 'workers',
  label: 'Workers & APIs',
  items: [{
    id: 'temples',
    title: 'Hindu Temples in Tamilnadu',
    desc: 'A dedicated repository and web space cataloging 40000 Hindu temples present in Tamilnadu.',
    image: '/assets/icons/cloudflare-workers.svg',
    demo: 'https://temples.rajanand.workers.dev/en',
    source: 'https://github.com/rajanand/temples',
    isActive: true,
    status: 'Active',
    tags: ['Cloudflare Worker']
  }, {
    id: 'tamilnadu-temples',
    title: 'Temples Dashboard',
    desc: 'Dashboard to analyse the temples in Tamilnadu.',
    image: '/assets/icons/cloudflare.svg',
    demo: 'https://projects.rajanand.org/tamilnadu-temples/',
    source: 'https://github.com/rajanand/tamilnadu-temples',
    isActive: true,
    tags: ['Project']
  }]
}, {
  id: 'labs',
  label: 'Labs & Puzzles',
  items: [{
    id: 'labs-app',
    title: 'Lab Experiments',
    desc: 'Experimental web projects to demo physics and other concepts.',
    image: '/assets/icons/react.svg',
    demo: 'https://labs.rajanand.org/',
    source: 'https://github.com/rajanand/labs',
    isActive: true,
    tags: ['Labs']
  }, {
    id: 'games',
    title: 'Web Games',
    desc: 'A collection of lightweight, responsive arcade and puzzle games built for the web.',
    image: '/assets/icons/html5.svg',
    demo: 'https://games.rajanand.org/',
    source: 'https://github.com/rajanand/games',
    isActive: true,
    status: 'Dropped',
    tags: ['Game']
  }, {
    id: 'puzzles',
    title: 'Word Puzzles',
    desc: 'Fun and interactive puzzle games playable directly in the browser.',
    image: '/assets/icons/javascript.svg',
    demo: 'https://puzzles.rajanand.org/',
    source: 'https://github.com/rajanand/puzzles',
    isActive: true,
    tags: ['Puzzle']
  }, {
    id: 'acid-properties',
    title: 'ACID Properties Visualizer',
    desc: 'An interactive, visual educational guide illustrating database ACID properties in detail.',
    image: '/assets/icons/database.svg',
    demo: 'https://projects.rajanand.org/acid-properties/',
    source: 'https://github.com/rajanand/acid-properties',
    isActive: true,
    tags: ['Database']
  }]
}];

export const ProjectsGrid = ({categories: initialCategories, columns = 3, showInactive = false}) => {
  if (!initialCategories || initialCategories.length === 0) return null;
  const activeItems = initialCategories.flatMap(cat => cat.items).filter(item => {
    const isActive = item.isActive === undefined ? true : item.isActive;
    return isActive || showInactive;
  });
  const categories = initialCategories.map(cat => {
    return {
      id: cat.id,
      label: cat.label,
      items: cat.items.filter(item => {
        const isActive = item.isActive === undefined ? true : item.isActive;
        return isActive || showInactive;
      })
    };
  }).filter(cat => cat.items.length > 0);
  const [activeCategory, setActiveCategory] = React.useState(categories[0] ? categories[0].id : 'all');
  const activeCatObj = categories.find(c => c.id === activeCategory);
  const activeItemsToShow = activeCategory === 'all' ? activeItems : activeCatObj ? activeCatObj.items : activeItems;
  return <div className="space-y-8 not-prose">
      <div className="flex flex-wrap gap-3">
        <button onClick={() => setActiveCategory('all')} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === 'all' ? 'bg-[#F54E00] text-white' : 'bg-gray-100 text-black hover:bg-gray-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20'}`}>
          All Projects
        </button>
        {categories.map(cat => <button key={cat.id} onClick={() => setActiveCategory(cat.id)} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === cat.id ? 'bg-[#F54E00] text-white' : 'bg-gray-100 text-black hover:bg-gray-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20'}`}>
            {cat.label}
          </button>)}
      </div>

      <div className={`grid grid-cols-1 md:grid-cols-2 ${columns === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'} gap-6`}>
        {activeItemsToShow.map(item => <div key={item.id} className="group flex flex-col justify-between p-6 rounded-2xl bg-[#FAFAFA] dark:bg-zinc-900/50 border border-gray-200 dark:border-zinc-800 hover:border-orange-500/30 dark:hover:border-orange-500/30 hover:shadow-md dark:hover:shadow-orange-500/5 transition duration-300">
            <div>
              <div className="flex items-start justify-between mb-4">
                <div className="w-12 h-12 flex items-center justify-center rounded-xl bg-orange-500/5 dark:bg-orange-500/10 border border-orange-500/10 dark:border-orange-500/20 flex-shrink-0">
                  <img src={item.image || '/assets/icons/toolbox.svg'} alt={item.title} className="w-7 h-7 object-contain group-hover:scale-110 transition duration-300" />
                </div>
                <div className="flex items-center gap-3">
                  {item.status && <span className={`px-2 py-0.5 text-xs font-semibold rounded-md ${item.status === 'Active' ? 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20' : item.status === 'Dropped' ? 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20' : 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/20'}`}>
                      {item.status}
                    </span>}
                  {item.demo && <a href={item.demo} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg text-gray-500 hover:text-[#F54E00] dark:text-zinc-400 dark:hover:text-orange-400 hover:bg-gray-100 dark:hover:bg-zinc-800 transition duration-200" title="Live Demo">
                      <Icon icon="globe" size="16" />
                    </a>}
                  {item.source && <a href={item.source} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg text-gray-500 hover:text-black dark:text-zinc-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800 transition duration-200" title="Source Code">
                      <Icon icon="github" size="16" />
                    </a>}
                </div>
              </div>

              <h3 className="text-lg font-bold mb-2 transition duration-200">
                {item.demo ? <a href={item.demo} target="_blank" rel="noopener noreferrer" className="text-gray-900 dark:text-white hover:text-orange-500 dark:hover:text-orange-400 transition duration-200">
                    {item.title}
                  </a> : <span className="text-gray-900 dark:text-white">{item.title}</span>}
              </h3>
              {item.desc && <p className="text-sm text-gray-600 dark:text-zinc-400 line-clamp-2">
                  {item.desc}
                </p>}
            </div>

            {item.tags && item.tags.length > 0 && <div className="mt-4 flex flex-wrap gap-2">
                {item.tags.map(tag => <span key={tag} className="px-2 py-0.5 text-xs font-medium rounded-md bg-gray-100 text-gray-600 dark:bg-zinc-800 dark:text-zinc-400">
                    {tag}
                  </span>)}
              </div>}
          </div>)}
      </div>
    </div>;
};

export const CertificationList = [{
  id: 'microsoft',
  label: 'Microsoft',
  items: [{
    id: 'microsoft-certified-solutions-expert-data-management-and-analytics',
    title: 'Microsoft Certified Solutions Expert: Data Management & Analytics',
    icon: 'https://mintlify-assets.b-cdn.net/tail-icon.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-solutions-expert-mcse-data-management-and-analytics-badge.png',
    href: '/certifications/microsoft#microsoft-certified-solutions-expert%3A-data-management-and-analytics',
    isActive: true,
    tags: ['Microsoft', 'Data', 'Analytics']
  }, {
    id: 'microsoft-certified-solutions-associate-database-development',
    title: 'Microsoft Certified Solutions Associate: Database Development',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-solutions-associate-mcsa-sql-2016-database-development-badge.png',
    href: '/certifications/microsoft#microsoft-certified-solutions-associate%3A-database-development',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-solutions-associate-bi-reporting',
    title: 'Microsoft Certified Solutions Associate: BI Reporting',
    icon: 'https://mintlify-assets.b-cdn.net/broom-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-solutions-associate-mcsa-business-intelligence-reporting-badge.png',
    href: '/certifications/microsoft#microsoft-certified-solutions-associate%3A-bi-reporting',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-sql-ai-developer-associate',
    title: 'Microsoft Certified: SQL AI Developer Associate',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-sql-ai-developer-associate-badge.svg',
    href: '/certifications/microsoft#microsoft-certified-sql-ai-developer-associate',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-azure-data-engineer-associate',
    title: 'Microsoft Certified: Azure Data Engineer Associate',
    icon: 'https://mintlify-assets.b-cdn.net/tail-icon.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-azure-data-engineer-associate-badge.png',
    href: '/certifications/microsoft#microsoft-certified%3A-azure-data-engineer-associate',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-fabric-data-engineer-associate',
    title: 'Microsoft Certified: Fabric Data Engineer Associate',
    icon: 'https://mintlify-assets.b-cdn.net/broom-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-fabric-data-engineer-associate-badge.png',
    href: '/certifications/microsoft#microsoft-certified%3A-fabric-data-engineer-associate',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-fabric-analytics-engineer-associate',
    title: 'Microsoft Certified: Fabric Analytics Engineer Associate',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-fabric-analytics-engineer-associate-badge.png',
    href: '/certifications/microsoft#microsoft-certified%3A-fabric-analytics-engineer-associate',
    isActive: true,
    tags: ['Microsoft']
  }, {
    id: 'microsoft-certified-power-bi-data-analyst-associate',
    title: 'Microsoft Certified: Power BI Analyst Associate',
    icon: 'https://mintlify-assets.b-cdn.net/tail-icon.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microsoft-certified-power-bi-data-analyst-associate-badge.png',
    href: '/certifications/microsoft#microsoft-certified%3A-power-bi-data-analyst-associate',
    isActive: true,
    tags: ['Microsoft']
  }]
}, {
  id: 'databricks',
  label: 'Databricks',
  items: [{
    id: 'databricks-certified-data-engineer-associate',
    title: 'Databricks Certified Data Engineer Associate',
    desc: 'Designing and implementing data engineering solutions using Databricks',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/databricks-certified-data-engineer-associate-badge.png',
    href: '/certifications/databricks#databricks-certified-data-engineer-associate',
    isActive: true,
    tags: ['Databricks']
  }]
}, {
  id: 'snowflake',
  label: 'Snowflake',
  items: [{
    id: 'snowpro-associate-platform-certification',
    title: 'SnowPro Associate: Platform Certification',
    desc: 'Understanding Snowflake data platform and its features',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/snowflake-snowpro-associate-platform-certification-badge.png',
    href: '/certifications/snowflake#snowpro-associate:-platform-certification',
    isActive: true,
    tags: ['Snowflake']
  }]
}, {
  id: 'google',
  label: 'Google',
  items: [{
    id: 'google-cloud-certified-associate-cloud-engineer',
    title: 'Google Cloud Certified Associate Cloud Engineer',
    desc: 'Deploying applications, monitoring operations, and managing enterprise solutions on Google Cloud',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/google-cloud-associate-cloud-engineer-badge.png',
    href: '/certifications/google#google-cloud-certified-associate-cloud-engineer',
    isActive: true,
    tags: ['Google']
  }]
}, {
  id: 'tableau',
  label: 'Tableau',
  items: [{
    id: 'tableau-desktop-specialist',
    title: 'Tableau Desktop Specialist',
    desc: 'Able to connect to Tableau desktop and prepare, explore and analyze data, and share insights.',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/tableau-desktop-specialist-badge.png',
    href: '/certifications/tableau#tableau-desktop-specialist-certification',
    isActive: true,
    tags: ['Tableau']
  }]
}, {
  id: 'oracle',
  label: 'Oracle',
  items: [{
    id: 'oracle-autonomous-database-cloud-2019-certified-specialist',
    title: 'Oracle Autonomous Database Cloud 2019 Certified Specialist',
    desc: 'Specialized in Oracle Autonomous Database Cloud services',
    icon: 'https://mintlify-assets.b-cdn.net/tail-icon.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/oracle-autonomous-database-cloud-2019-specialist-badge.png',
    href: '/certifications/oracle',
    isActive: true,
    tags: ['Oracle']
  }, {
    id: 'oracle-cloud-infrastructure-2019-certified-architect-associate',
    title: 'Oracle Cloud Infrastructure 2019 Certified Architect Associate',
    desc: 'Architecting and managing Oracle Cloud Infrastructure solutions',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/oracle-cloud-infrastructure-2019-certified-architect-associate-badge.png',
    href: '/certifications/oracle#oracle-cloud-infrastructure-2019-certified-architect-associate',
    isActive: true,
    tags: ['Oracle']
  }, {
    id: 'oracle-cloud-infrastructure-2019-certified-cloud-operations-associate',
    title: 'Oracle Cloud Infrastructure 2019 Certified Cloud Operations Associate',
    desc: 'Managing and operating Oracle Cloud Infrastructure services',
    icon: 'https://mintlify-assets.b-cdn.net/broom-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/oracle-cloud-infrastructure-2019-cloud-operations-certified-associate-badge.png',
    href: '/certifications/oracle#oracle-cloud-infrastructure-2019-certified-cloud-operations-associate',
    isActive: true,
    tags: ['Oracle']
  }, {
    id: 'oracle-cloud-infrastructure-foundations-2021-certified-associate',
    title: 'Oracle Cloud Infrastructure Foundations 2021 Certified Associate',
    desc: 'Foundational knowledge of Oracle Cloud Infrastructure services',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/oracle-cloud-infrastructure-foundations-2021-associate-badge.png',
    href: '/certifications/oracle#oracle-cloud-infrastructure-foundations-2021-certified-associate',
    isActive: true,
    tags: ['Oracle']
  }, {
    id: 'oracle-cloud-infrastructure-foundations-2020-certified-associate',
    title: 'Oracle Cloud Infrastructure Foundations 2020 Certified Associate',
    desc: 'Foundational knowledge of Oracle Cloud Infrastructure services',
    icon: 'https://mintlify-assets.b-cdn.net/neural-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/oracle-cloud-infrastructure-foundations-2020-associate-badge.png',
    href: '/certifications/oracle#oracle-cloud-infrastructure-foundations-2020-certified-associate',
    isActive: true,
    tags: ['Oracle']
  }]
}, {
  id: 'github',
  label: 'Github',
  items: [{
    id: 'github-foundations-certification',
    title: 'GitHub Foundations Certification',
    desc: 'GitHub basics like repositories, commits, branching, markdowns, and project management.',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/github-foundations-badge.png',
    href: '/certifications/github#github-foundations-certification',
    isActive: true,
    tags: ['Github']
  }]
}, {
  id: 'microstrategy',
  label: 'MicroStrategy',
  items: [{
    id: 'microstrategy-certified-analyst',
    title: 'MicroStrategy Certified Analyst',
    icon: 'https://mintlify-assets.b-cdn.net/tail-icon.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microstrategy-certified-analyst-badge.png',
    href: '/certifications/microstrategy#microstrategy-certified-analyst',
    isActive: false,
    tags: ['MicroStrategy']
  }, {
    id: 'microstrategy-certified-application-architect',
    title: 'MicroStrategy Certified Application Architect',
    icon: 'https://mintlify-assets.b-cdn.net/smart-light.svg',
    image: 'https://raw.githubusercontent.com/rajanand/rajanand-ilangovan/refs/heads/master/certifications/microstrategy-certified-application-architect-badge.png',
    href: '/certifications/microstrategy#microstrategy-certified-application-architect',
    isActive: false,
    tags: ['MicroStrategy']
  }]
}];

export const ProductTiles = ({categories: initialCategories, hideButtons = false, showInactive = false, filterByCategory = null}) => {
  if (!initialCategories || initialCategories.length === 0) {
    return null;
  }
  const activeAndFilteredCategories = initialCategories.map(category => ({
    ...category,
    items: category.items.filter(item => {
      const isActive = item.isActive === undefined ? true : item.isActive;
      return isActive || showInactive;
    })
  })).filter(category => category.items.length > 0);
  const categoriesToShow = filterByCategory ? activeAndFilteredCategories.filter(cat => cat.id === filterByCategory) : activeAndFilteredCategories;
  const [activeCategory, setActiveCategory] = useState(categoriesToShow[0]?.id || null);
  const [activeSubTab, setActiveSubTab] = useState(categoriesToShow[0]?.items[0]?.id ?? null);
  const currentCategory = categoriesToShow.find(cat => cat.id === activeCategory);
  const currentSub = currentCategory?.items.find(item => item.id === activeSubTab);
  if (categoriesToShow.length === 0) {
    return <p className="text-sm text-gray-500 dark:text-gray-400">
            No items available to display.
        </p>;
  }
  return <div className="not-prose space-y-6">
      {!hideButtons && !filterByCategory && <div className="flex flex-wrap gap-2">
          {categoriesToShow.map(cat => <button key={cat.id} onClick={() => {
    setActiveCategory(cat.id);
    setActiveSubTab(cat.items[0]?.id ?? null);
  }} className={`px-4 py-2 text-sm rounded-full font-medium transition-colors ${activeCategory === cat.id ? 'bg-[#0A0B0D] text-white dark:bg-white dark:text-[#0A0B0D] border-black' : 'bg-gray-100 dark:bg-white/10 text-black dark:text-white'}`}>
              {cat.label}
            </button>)}
        </div>}

      <div>
        {currentCategory?.items?.length ? <div className="flex flex-col lg:flex-row gap-6 bg-gray-100 dark:bg-[#141414] rounded-2xl">
            <div className="flex flex-col w-full lg:w-1/2 space-y-2 p-4">
              {currentCategory.items.map(item => <a key={item.id} href={item.href} onMouseOver={() => setActiveSubTab(item.id)} className={`flex items-start gap-1.5 text-left px-5 py-3 rounded-2xl transition-all ${activeSubTab === item.id ? 'bg-white dark:bg-white/5' : ''}`}>
                  <div className="text-xl mr-3 mt-1"><img src={item.icon} alt={item.title} className="w-8 h-8" /></div>
                  <div className="flex-1">
                    <h3 className="font-medium text-base text-black dark:text-white">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.desc}</p>
                  </div>
                  <div className={`flex items-center justify-center min-w-[24px] self-center ${activeSubTab === item.id ? 'opacity-100' : 'opacity-0'}`}>
                    <div className="hidden dark:block">
                      <Icon icon="chevron-right" size="14" color="#FFF" />
                    </div>
                    <div className="block dark:hidden">
                      <Icon icon="chevron-right" size="14" color="#0A0B0D" />
                    </div>
                  </div>
                </a>)}
            </div>
            <div className="group w-full h-fit lg:w-1/2 rounded-2xl flex items-center justify-center  overflow-hidden min-h-[320px] p-4">
              {currentSub?.image ? <>
                  <img src={currentSub.image.light} alt={currentSub.title} className="block dark:hidden w-[350px] h-[350px] object-contain rounded-xl" />
                  <img src={currentSub.image.dark} alt={currentSub.title} className="hidden dark:block w-[350px] h-[350px] object-contain rounded-xl" />
                </> : <p className="text-gray-400 dark:text-gray-500 p-8">No preview available</p>}
            </div>
          </div> : <p className="text-sm text-gray-500 dark:text-gray-400">
            No items available for this category.
          </p>}
      </div>
    </div>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-2xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="max-w-8xl w-[90%] mx-auto px-4 lg:px-10 py-14">
      {children}
    </div>;
};

<Container>
  <div className="flex flex-col items-center justify-center py-16">
    <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-500/10 text-orange-700 dark:bg-orange-500/15 dark:text-orange-400 text-xs font-semibold tracking-wide mb-6 border border-orange-500/20 dark:border-orange-500/30">
      <span className="flex h-2 w-2 relative">
        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75" />

        <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500" />
      </span>

      Data Professional by day. Vibe coder by night.
    </div>

    <h1 className="text-5xl md:text-6xl font-extrabold text-center tracking-tight text-gray-900 dark:text-white leading-none">
      Rajanand Ilangovan
    </h1>

    <div className="mt-4 text-xl md:text-2xl font-semibold text-center bg-gradient-to-r from-[#d44300] via-[#F54E00] to-[#d44300] dark:from-[#F54E00] dark:via-[#F9BD2B] dark:to-[#F54E00] bg-clip-text text-transparent">
      Data Architect & Cloud Specialist
    </div>

    <p className="mt-6 max-w-2xl text-center text-base md:text-lg text-gray-600 dark:text-zinc-400 leading-relaxed">
      Designing and building resilient enterprise data platforms, scalable cloud data warehouses, and high-throughput real-time pipelines.
    </p>

    <div className="mt-8 flex flex-wrap justify-center items-center gap-4">
      <a href="/about" className="px-6 py-3 rounded-full bg-[#F54E00] text-white font-semibold shadow-lg hover:shadow-orange-500/25 dark:hover:shadow-orange-500/15 hover:bg-[#d44300] transition duration-200 not-prose">
        About Me
      </a>

      <a href="https://github.com/rajanand" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-700 dark:text-zinc-300 transition duration-200 border border-gray-200 dark:border-white/10 not-prose flex items-center justify-center">
        <Icon icon="github" size="20" />
      </a>

      <a href="https://www.linkedin.com/in/iRajanand" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-700 dark:text-zinc-300 transition duration-200 border border-gray-200 dark:border-white/10 not-prose flex items-center justify-center">
        <Icon icon="linkedin" size="20" />
      </a>

      <a href="https://rajanand.substack.com/welcome" target="_blank" rel="noopener noreferrer" className="p-3 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-700 dark:text-zinc-300 transition duration-200 border border-gray-200 dark:border-white/10 not-prose flex items-center justify-center">
        <Icon icon="envelope" size="20" />
      </a>
    </div>
  </div>
</Container>

<Container>
  <Title>Projects</Title>

  <div className="mt-4 max-w-2xl text-left text-gray-500 dark:text-zinc-400 mb-8">
    A showcase of some of my vibe coding apps, web applications, and technical projects.
  </div>

  <ProjectsGrid categories={ProjectsList} columns={3} showInactive={false} />
</Container>

<Container>
  <Title>Datasets</Title>

  <div className="mt-4 max-w-2xl text-left text-gray-500 dark:text-zinc-400 mb-8">
    Public datasets I have curated and made available on <a href="https://www.kaggle.com/rajanand" target="_blank" rel="noopener noreferrer" className="text-[#F54E00] dark:text-blue-400 font-bold hover:underline">Kaggle</a>.
  </div>

  <Columns cols={3}>
    <Card title="Crime in India" icon="house-fire" href="https://www.kaggle.com/datasets/rajanand/crime-in-india" horizontal />

    <Card title="Rainfall in India" icon="cloud-sun-rain" href="https://www.kaggle.com/datasets/rajanand/rainfall-in-india" horizontal />

    <Card title="Education in India" icon="books" href="https://www.kaggle.com/datasets/rajanand/education-in-india" horizontal />

    <Card title="Accidents in India" icon="car-burst" href="https://www.kaggle.com/datasets/rajanand/accidents-in-india" horizontal />

    <Card title="Suicides in India" icon="capsules" href="https://www.kaggle.com/datasets/rajanand/suicides-in-india" horizontal />

    <Card title="Prison in India" icon="user-police-tie" href="https://www.kaggle.com/datasets/rajanand/prison-in-india" horizontal />
  </Columns>
</Container>

<Container>
  <div className="p-8 rounded-2xl bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-900/50 dark:to-black border border-zinc-200 dark:border-zinc-800 text-center md:text-left md:flex md:items-center md:justify-between gap-8 not-prose">
    <div>
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Let's build something together!</h2>

      <p className="mt-2 text-gray-600 dark:text-zinc-400 max-w-lg">
        Need help designing a modern cloud data lakehouse, optimizing pipeline performance, or setting up data architectures? Let's connect.
      </p>
    </div>

    <div className="mt-6 md:mt-0 flex flex-col sm:flex-row gap-4 flex-shrink-0">
      <a href="/meeting" className="px-6 py-3 rounded-full bg-[#F54E00] text-white font-semibold text-center hover:bg-[#d44300] transition duration-200">
        Book a Meeting
      </a>

      <a href="https://www.linkedin.com/in/irajanand/" target="_blank" rel="noopener noreferrer" className="px-6 py-3 rounded-full bg-white hover:bg-gray-50 dark:bg-white/5 dark:hover:bg-white/10 text-gray-700 dark:text-zinc-300 transition duration-200 border border-gray-200 dark:border-white/10 text-center">
        Message on LinkedIn
      </a>
    </div>
  </div>
</Container>