Add international language levels (A1-C2) to skills system

src/components/portfolio/skills.tsx

@@ -93,7 +93,7 @@ function SkillCard({ skill, index, isSmallScreen }: SkillCardProps) {
           className="opacity-100 px-4"
           color={getChipColorForSkill(index)}
           marks={getSliderMarks(skill.level, isSmallScreen)}
-          maxValue={4}
+          maxValue={5}
           minValue={0}
           step={1}
           value={levelToIndex(skill.level)}

src/components/portfolioEditor/skills-form.tsx

@@ -71,7 +71,7 @@ export function SkillsForm(props: SkillsFormProps) {
             className="pb-4 px-5"
             label={`Proficiency: ${newSkill.level}`}
             marks={getSliderMarks(newSkill.level, isSmallScreen)}
-            maxValue={4}
+            maxValue={5}
             minValue={0}
             name="level"
             step={1}
@@ -139,7 +139,7 @@ export function SkillsForm(props: SkillsFormProps) {
                   showSteps
                   className="px-4"
                   marks={getSliderMarks(skill.level, isMediumScreen)}
-                  maxValue={4}
+                  maxValue={5}
                   minValue={0}
                   step={1}
                   value={levelToIndex(skill.level)}

src/config/site.ts

@@ -19,12 +19,12 @@ export const siteConfig = {
       youtube: "johndoe",
     },
     skills: [
-      { name: "React", level: "Master" },
-      { name: "TypeScript", level: "Expert" },
-      { name: "Node.js", level: "Expert" },
-      { name: "CSS/Tailwind", level: "Advanced" },
-      { name: "UI/UX Design", level: "Intermediate" },
-      { name: "GraphQL", level: "Beginner" },
+      { name: "React", level: "C2" },
+      { name: "TypeScript", level: "C1" },
+      { name: "Node.js", level: "C1" },
+      { name: "CSS/Tailwind", level: "B2" },
+      { name: "UI/UX Design", level: "B1" },
+      { name: "GraphQL", level: "A1" },
     ],
     cv: [
       {

src/lib/use-portfolio-editor.ts

@@ -17,7 +17,7 @@ export function usePortfolioEditor() {
   const [isLoading, setIsLoading] = useState(true);
   const [newSkill, setNewSkill] = useState<Skill>({
     name: "",
-    level: "Intermediate",
+    level: "B1",
   });
   const [saveAlert, setSaveAlert] = useState(false);
   const [resetAlert, setResetAlert] = useState(false);
@@ -217,7 +217,7 @@ export function usePortfolioEditor() {
       };
     });
 
-    setNewSkill({ name: "", level: "Intermediate" });
+    setNewSkill({ name: "", level: "B1" });
   };
 
   const handleRemoveSkill = (index: number) => {

src/types/index.ts

@@ -4,12 +4,7 @@ export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number;
 };
 
-export type SkillLevel =
-  | "Beginner"
-  | "Intermediate"
-  | "Advanced"
-  | "Expert"
-  | "Master";
+export type SkillLevel = "A1" | "A2" | "B1" | "B2" | "C1" | "C2";
 
 export interface Skill {
   name: string;

src/utils/skills.ts

@@ -2,13 +2,7 @@ import { useEffect, useState } from "react";
 
 import { SkillLevel } from "@/types";
 
-export const SKILL_LEVELS: SkillLevel[] = [
-  "Beginner",
-  "Intermediate",
-  "Advanced",
-  "Expert",
-  "Master",
-];
+export const SKILL_LEVELS: SkillLevel[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
 
 export function useIsSmallScreen(pixels: number = 500) {
   const [isSmallScreen, setIsSmallScreen] = useState(false);

tests/components/edit/portfolio-editor.test.tsx

@@ -20,19 +20,19 @@ const mockUsePortfolioEditor = {
       reddit: "johndoe",
     },
     skills: [
-      { name: "UI/UX Design", level: "Intermediate" },
-      { name: "React", level: "Master" },
+      { name: "UI/UX Design", level: "B1" },
+      { name: "React", level: "C2" },
     ],
   },
   isLoading: false,
-  newSkill: { name: "", level: "Intermediate" },
+  newSkill: { name: "", level: "B1" },
   useUrlForAvatar: true,
   isUploadedImage: false,
   saveAlert: false,
   resetAlert: false,
   fileAlert: false,
   fileAlertMessage: "",
-  SKILL_LEVELS: ["Beginner", "Intermediate", "Advanced", "Expert", "Master"],
+  SKILL_LEVELS: ["A1", "A2", "B1", "B2", "C1", "C2"],
   handleBasicInfoChange: vi.fn(),
   handleFileSelect: vi.fn(),
   handleSocialChange: vi.fn(),
@@ -90,8 +90,8 @@ describe("PortfolioEditor", () => {
         reddit: "johndoe",
       },
       skills: [
-        { name: "UI/UX Design", level: "Intermediate" },
-        { name: "React", level: "Master" },
+        { name: "UI/UX Design", level: "B1" },
+        { name: "React", level: "C2" },
       ],
     };
     mockUsePortfolioEditor.saveAlert = false;

tests/components/edit/skills-form.test.tsx

@@ -6,20 +6,21 @@ import { Skill, SkillLevel } from "@/types";
 describe("SkillsForm", () => {
   const mockPortfolioData: { skills: Skill[] } = {
     skills: [
-      { name: "UI/UX Design", level: "Intermediate" },
-      { name: "TypeScript", level: "Expert" },
-      { name: "React", level: "Master" },
+      { name: "UI/UX Design", level: "B1" },
+      { name: "TypeScript", level: "C1" },
+      { name: "React", level: "C2" },
     ],
   };
 
-  const mockNewSkill: Skill = { name: "Vue.js", level: "Advanced" };
+  const mockNewSkill: Skill = { name: "Vue.js", level: "B2" };
 
   const mockSkillLevels: SkillLevel[] = [
-    "Beginner",
-    "Intermediate",
-    "Advanced",
-    "Expert",
-    "Master",
+    "A1",
+    "A2",
+    "B1",
+    "B2",
+    "C1",
+    "C2",
   ];
 
   const defaultProps = {
@@ -55,7 +56,7 @@ describe("SkillsForm", () => {
     expect(screen.getByText("Add New Skill")).toBeInTheDocument();
     expect(screen.getByLabelText("Skill name")).toBeInTheDocument();
     expect(
-      screen.getAllByLabelText("Proficiency: Advanced")[0],
+      screen.getAllByLabelText("Proficiency: B2")[0],
     ).toBeInTheDocument();
     expect(screen.getByText("Add Skill")).toBeInTheDocument();
   });
@@ -65,7 +66,7 @@ describe("SkillsForm", () => {
 
     expect(screen.getByDisplayValue("Vue.js")).toBeInTheDocument();
     expect(
-      screen.getAllByLabelText("Proficiency: Advanced")[0],
+      screen.getAllByLabelText("Proficiency: B2")[0],
     ).toBeInTheDocument();
   });
 
@@ -106,8 +107,8 @@ describe("SkillsForm", () => {
     expect(screen.getByDisplayValue("UI/UX Design")).toBeInTheDocument();
     expect(screen.getByDisplayValue("TypeScript")).toBeInTheDocument();
     expect(screen.getByDisplayValue("React")).toBeInTheDocument();
-    expect(screen.getAllByText("Expert")[0]).toBeInTheDocument();
-    expect(screen.getAllByText("Master")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("C1")[0]).toBeInTheDocument();
+    expect(screen.getAllByText("C2")[0]).toBeInTheDocument();
   });
 
   it("calls onSkillNameChange when existing skill name is changed", () => {
@@ -179,7 +180,7 @@ describe("SkillsForm", () => {
     const levelInput = screen.getAllByRole("slider")[0];
     expect(levelInput).toHaveAttribute("type", "range");
     expect(levelInput).toHaveAttribute("min", "0");
-    expect(levelInput).toHaveAttribute("max", "4");
+    expect(levelInput).toHaveAttribute("max", "5");
   });
 
   it("renders skill name input with correct attributes", () => {
@@ -197,7 +198,7 @@ describe("SkillsForm", () => {
     sliders.forEach((slider) => {
       expect(slider).toHaveAttribute("type", "range");
       expect(slider).toHaveAttribute("min", "0");
-      expect(slider).toHaveAttribute("max", "4");
+      expect(slider).toHaveAttribute("max", "5");
     });
   });
 

tests/components/edit/use-portfolio-editor.test.ts

@@ -276,7 +276,7 @@ describe("usePortfolioEditor", () => {
     });
     expect(result.current.newSkill).toEqual({
       name: "",
-      level: "Intermediate",
+      level: "B1",
     });
   });
 
@@ -312,10 +312,10 @@ describe("usePortfolioEditor", () => {
 
     // Change skill level
     act(() => {
-      result.current.handleSkillLevelChange(0, "Master");
+      result.current.handleSkillLevelChange(0, "C2");
     });
 
-    expect(result.current.portfolioData.skills[0].level).toBe("Master");
+    expect(result.current.portfolioData.skills[0].level).toBe("C2");
   });
 
   it("handles skill name change", async () => {
@@ -904,7 +904,7 @@ describe("usePortfolioEditor", () => {
 
     // These should not throw errors when portfolio data is null
     act(() => {
-      result.current.handleSkillLevelChange(0, "Intermediate");
+      result.current.handleSkillLevelChange(0, "B1");
     });
 
     act(() => {

tests/components/portfolio/skills.test.tsx

@@ -8,9 +8,9 @@ vi.mock("@/hooks/usePortfolioData", () => ({
   usePortfolioData: vi.fn(() => ({
     portfolioData: {
       skills: [
-        { name: "UI/UX Design", level: "Intermediate" },
-        { name: "TypeScript", level: "Expert" },
-        { name: "React", level: "Master" },
+        { name: "UI/UX Design", level: "B1" },
+        { name: "TypeScript", level: "C1" },
+        { name: "React", level: "C2" },
       ],
     },
     isLoading: false,
@@ -26,8 +26,8 @@ describe("Skills", () => {
       expect(screen.getByText("UI/UX Design")).toBeInTheDocument();
       expect(screen.getByText("TypeScript")).toBeInTheDocument();
       expect(screen.getByText("React")).toBeInTheDocument();
-      expect(screen.getAllByText("Expert")[0]).toBeInTheDocument();
-      expect(screen.getAllByText("Intermediate")[0]).toBeInTheDocument();
+      expect(screen.getAllByText("C1")[0]).toBeInTheDocument();
+      expect(screen.getAllByText("B1")[0]).toBeInTheDocument();
     });
   });