Skills Page — Windows NSIS Installer UI for Tech Stack

// Skills page component (minified identifier: lm)
const SkillsPage = () => {
  const [installing, setInstalling] = useState(false);
  const [progress, setProgress] = useState(0);
  const [installed, setInstalled] = useState([]);  // array of category IDs

  const handleInstallAll = () => {
    setInstalling(true);
    setProgress(0);
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(timer);
          setInstalling(false);
          setInstalled(skillCategories.map((c) => c.id));
          return 100;
        }
        return prev + 5;
      });
    }, 100);
  };

  const toggleCategory = (id) => {
    setInstalled((prev) =>
      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
    );
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="max-w-3xl mx-auto"
    >
      <Window title="Skill_Installer_v2.0.exe" icon={<CpuIcon />}>
        {/* Windows 9x installer chrome */}
        <div className="bg-[#c0c0c0] text-black font-sans p-1 border-2 border-white border-r-gray-600 border-b-gray-600">
          {/* Banner area */}
          {/* Component checklist + description sidebar */}
          {/* Optional progress bar */}
          {/* NSIS footer */}
        </div>
      </Window>
    </motion.div>
  );
};

// assets/main.js — skill categories array (identifier: Lr)
const skillCategories = [
  {
    id: "frontend",
    name: "Front-End Development",
    skills: [
      { name: "React / Next.js",         level: 90 },
      { name: "TypeScript / JavaScript", level: 85 },
      { name: "Tailwind CSS / SCSS",     level: 95 },
      { name: "HTML5 Semantic / A11y",   level: 90 },
    ],
  },
  {
    id: "backend",
    name: "Back-End & Data",
    skills: [
      { name: "Node.js / Express",    level: 75 },
      { name: "PostgreSQL / SQL",     level: 70 },
      { name: "REST APIs / GraphQL",  level: 80 },
      { name: "Prisma / ORMs",        level: 75 },
    ],
  },
  {
    id: "tools",
    name: "Tools & Workflow",
    skills: [
      { name: "Git / GitHub",                level: 85 },
      { name: "Debugging / DevTools",        level: 95 },
      { name: "Technical Writing / Docs",    level: 90 },
      { name: "UI / UX Design",             level: 80 },
    ],
  },
];