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!",