refactor Skills.tsx

YanivWein24 · Mar 29, 2024 · 7e5988a · 7e5988a
1 parent 78b1729
commit 7e5988a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 70 deletions.
diff --git 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 (
     <div className="skills" id="Skills">
       <h1 data-aos="fade-right" data-aos-once="true">
         {Text.headers.skills}
       </h1>
-      <div className="skillsSet" data-aos="fade-left" data-aos-once="true">
-        <h2>Front-End:</h2>
-        <hr />
-        <Row>
-          <Col>
-            {SkillsList.frontend.map((skill) => (
-              <div className="skillContainer" key={skill.id}>
-                <Skill
-                  name={skill.name}
-                  color={skill.color}
-                  link={skill.link}
-                  img={skill.img}
-                />
-                {!mobileSize && (skill.id === 3 || skill.id === 7) && (
-                  <>
-                    <br /> <br />
-                  </>
-                )}
-              </div>
-            ))}
-          </Col>
-        </Row>
-      </div>
-      <div className="skillsSet" data-aos="fade-right" data-aos-once="true">
-        <h2>Back-End:</h2>
-        <hr />
-        <Row>
-          <Col>
-            {SkillsList.backend.map((skill) => (
-              <div className="skillContainer" key={skill.id}>
-                <Skill
-                  name={skill.name}
-                  color={skill.color}
-                  link={skill.link}
-                  img={skill.img}
-                />
-                {!mobileSize && skill.id === 3 && (
-                  <>
-                    <br /> <br />
-                  </>
-                )}
-              </div>
-            ))}
-          </Col>
-        </Row>
-      </div>
-      <div className="skillsSet" data-aos="fade-left" data-aos-once="true">
-        <h2>Misc:</h2>
-        <hr />
-        <Row>
-          <Col>
-            {SkillsList.misc.map((skill) => (
-              <div className="skillContainer" key={skill.id}>
-                <Skill
-                  name={skill.name}
-                  color={skill.color}
-                  link={skill.link}
-                  img={skill.img}
-                />
-                {!mobileSize && skill.id === 3 && (
-                  <>
-                    <br /> <br />
-                  </>
-                )}
-              </div>
-            ))}
-          </Col>
-        </Row>
-      </div>
+      {skillsSets.map((skillSet, index) => (
+        <div
+          className="skillsSet"
+          data-aos={index % 2 ? "fade-right" : "fade-left"}
+          data-aos-once="true"
+          key={skillSet}
+        >
+          <h2>{Text.headers[skillSet]}</h2>
+          <hr />
+          <Row>
+            <Col>
+              {SkillsList[skillSet].map(({ id, name, color, link, img }) => (
+                <div className="skillContainer" key={id}>
+                  <Skill name={name} color={color} link={link} img={img} />
+                  {!mobileSize && (id === 3 || id === 7) && (
+                    <>
+                      <br /> <br />
+                    </>
+                  )}
+                </div>
+              ))}
+            </Col>
+          </Row>
+        </div>
+      ))}
     </div>
   );
 }
diff --git 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!",