import { Code, Database, Figma, FileCode, Github, Globe, Layers, Lightbulb, Palette, Server, Smartphone, Terminal, } from "lucide-react"; import { Progress } from "@/components/ui/progress"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; // Technical Skills with proficiency levels const technicalSkills = [ { name: "JavaScript/TypeScript", proficiency: 95 }, { name: "React & React Native", proficiency: 92 }, { name: "Node.js & Express", proficiency: 88 }, { name: "Next.js", proficiency: 90 }, { name: "HTML/CSS/SASS", proficiency: 95 }, { name: "GraphQL", proficiency: 85 }, { name: "SQL & NoSQL Databases", proficiency: 82 }, { name: "AWS & Cloud Services", proficiency: 78 }, { name: "Docker & Kubernetes", proficiency: 75 }, { name: "Testing (Jest, Cypress)", proficiency: 85 }, ]; // Tools categorized by type const tools = [ { category: "Frontend", icon: , items: [ { name: "React", icon:

 },
      { name: "Next.js", icon:  },
      { name: "TypeScript", icon:  },
      { name: "Tailwind CSS", icon:  },
      { name: "Material UI", icon:  },
      { name: "Redux", icon:  },
    ],
  },
  {
    category: "Backend",
    icon: ,
    items: [
      { name: "Node.js", icon:  },
      { name: "Express", icon:  },
      { name: "PostgreSQL", icon:  },
      { name: "MongoDB", icon:  },
      { name: "GraphQL", icon:  },
      { name: "REST API", icon:  },
    ],
  },
  {
    category: "DevOps & Tools",
    icon: ,
    items: [
      { name: "Git & GitHub", icon:  },
      { name: "Docker", icon:  },
      { name: "AWS", icon:  },
      { name: "CI/CD", icon:  },
      { name: "Jest", icon:  },
      { name: "Figma", icon:  },
    ],
  },
  {
    category: "Mobile",
    icon: ,
    items: [
      { name: "React Native", icon:  },
      { name: "Flutter", icon:  },
      { name: "iOS", icon:  },
      { name: "Android", icon:  },
      { name: "Firebase", icon:  },
      { name: "App Store Connect", icon:  },
    ],
  },
];

export default function SkillsDisplay() {
  // Function to determine skill level label
  const getSkillLevel = (proficiency: number) => {
    if (proficiency >= 90) return "Expert";
    if (proficiency >= 80) return "Advanced";
    if (proficiency >= 70) return "Proficient";
    if (proficiency >= 50) return "Intermediate";
    return "Beginner";
  };

  // Function to get color class based on proficiency
  const getColorClass = (proficiency: number) => {
    if (proficiency >= 90) return "text-green-500";
    if (proficiency >= 80) return "text-blue-500";
    if (proficiency >= 70) return "text-indigo-500";
    if (proficiency >= 50) return "text-amber-500";
    return "text-gray-500";
  };

  return (
    
      
        
          
            My Toolkit
          
          
            Skills & Technologies
          
          
            A comprehensive overview of my technical skills, proficiency levels,
            and the tools I use to create exceptional digital experiences.
          
        

        
          
            Technical Skills
            Tools & Technologies
          

          {/* Technical Skills Tab */}
          
            
              
                
                Skill Proficiency Levels
              

              
                {technicalSkills.map((skill) => (
                  
                    
                      {skill.name}
                      
                        {getSkillLevel(skill.proficiency)}
                      
                    
                    
                  
                ))}
              
            
          

          {/* Tools & Technologies Tab */}
          
            
              
                
                Tools & Technologies
              

              
                {tools.map((toolCategory) => (
                  
                    
                      {toolCategory.icon}
                      {toolCategory.category}
                    

                    
                      {toolCategory.items.map((tool) => (
                        
                          {tool.icon}
                          {tool.name}
                        
                      ))}
                    
                  
                ))}
              
            
          
        
      
    
  );
}

Skills & Technologies

Skill Proficiency Levels

Tools & Technologies

{toolCategory.icon} {toolCategory.category}

Portfolio About And Skills

Skills Display

About MePreview

Education CertificationsPreview

Resume DownloadPreview

Timeline Category SkillsPreview