diff --git a/src/components/Skills/Skills.tsx b/src/components/Skills/Skills.tsx
index ea86ad3..12c3ddd 100644
--- a/src/components/Skills/Skills.tsx
+++ b/src/components/Skills/Skills.tsx
@@ -8,80 +8,38 @@ import "./Skills.css";
export default function Skills() {
const { mobileSize } = useWindowSize();
+ const skillsSets = ["frontend", "backend", "misc"] as const;
+
return (
{Text.headers.skills}
-
-
Front-End:
-
-
-
- {SkillsList.frontend.map((skill) => (
-
-
- {!mobileSize && (skill.id === 3 || skill.id === 7) && (
- <>
-
- >
- )}
-
- ))}
-
-
-
-
-
Back-End:
-
-
-
- {SkillsList.backend.map((skill) => (
-
-
- {!mobileSize && skill.id === 3 && (
- <>
-
- >
- )}
-
- ))}
-
-
-
-
-
Misc:
-
-
-
- {SkillsList.misc.map((skill) => (
-
-
- {!mobileSize && skill.id === 3 && (
- <>
-
- >
- )}
-
- ))}
-
-
-
+ {skillsSets.map((skillSet, index) => (
+
+
{Text.headers[skillSet]}
+
+
+
+ {SkillsList[skillSet].map(({ id, name, color, link, img }) => (
+
+
+ {!mobileSize && (id === 3 || id === 7) && (
+ <>
+
+ >
+ )}
+
+ ))}
+
+
+
+ ))}
);
}
diff --git a/src/constants.ts b/src/constants.ts
index 274b15d..a6e5b8b 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,10 +1,13 @@
const Text = {
headers: {
aboutMe: "About Me:",
- experience: "Experience:",
skills: "Skills:",
+ experience: "Experience:",
projects: "Projects:",
contactMe: "Contact Me:",
+ frontend: "Front-End:",
+ backend: "Back-End:",
+ misc: "Misc:",
},
AboutMeText:
"My name is Yaniv Weinshtein. I'm a Practical Engineer in Electronics and a Full stack developer specializing in the \"MERN\" stack. I got exposed to coding in some of my practical engineering courses, and immediately I fell in love with the idea of creating solutions to day-to-day problems using only lines of code! I continued to code for fun for a while, and now I'm doing it professionally as my main career path!",