Update Occupation.js visuals

MrArnaudMichel · Mar 18, 2024 · a9397cb · a9397cb
1 parent 8793da9
commit a9397cb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 33 deletions.
diff --git a/src/components/careerPage/Occupation.js b/src/components/careerPage/Occupation.js
@@ -40,31 +40,33 @@ function Occupation({ t }) {
                     )}
                 </div>
             </div>
-            <div className="occupation-description" data-aos="fade-up">
-                <p dangerouslySetInnerHTML={{__html: t(occupation.description)}}></p>
-            </div>
-            {occupation.projects && (
-                <div className="occupation-projects" data-aos="fade-up">
-                    <h3 dangerouslySetInnerHTML={{__html: `${t("projects")}`}}></h3>
-                        {occupation.projects.map((project, index) => (
-                            <p key={index} onClick={() => navigate(`/projects/${project}`)}>{t(project)}</p>
-                        ))}
+            <div className={"occupation-content"} data-aos="fade-up">
+                <div className="occupation-description" data-aos="fade-up">
+                    <p dangerouslySetInnerHTML={{__html: t(occupation.description)}}></p>
                 </div>
-            )}
-            {occupation.skills && (
-                <div className={"occupation-skills"} data-aos="fade-up">
-                    <h3 className={"title"} dangerouslySetInnerHTML={{__html: `${t("skills")}`}}></h3>
-                    <div className={"skills-tools tools"}>
-                        {occupation.skills.map((tool) => {
-                            return (
-                                <div className={"icons"}>
-                                    <p dangerouslySetInnerHTML={{__html: t(tool)}}></p>
-                                </div>
-                            );
-                        })}
+                {occupation.projects && (
+                    <div className="occupation-projects" data-aos="fade-up">
+                        <h3 dangerouslySetInnerHTML={{__html: `${t("projects")}`}}></h3>
+                            {occupation.projects.map((project, index) => (
+                                <p key={index} onClick={() => navigate(`/projects/${project}`)}>{t(project)}</p>
+                            ))}
                     </div>
-                </div>
-            )}
+                )}
+                {occupation.skills && (
+                    <div className={"occupation-skills"} data-aos="fade-up">
+                        <h3 className={"title"} dangerouslySetInnerHTML={{__html: `${t("skills")}`}}></h3>
+                        <div className={"skills-tools tools"}>
+                            {occupation.skills.map((tool) => {
+                                return (
+                                    <div className={"icons"}>
+                                        <p dangerouslySetInnerHTML={{__html: t(tool)}}></p>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
+            </div>
             <div className={"back"} data-aos="fade-up">
                 <button onClick={() => navigate(-1)} dangerouslySetInnerHTML={{__html: t("back")}}></button>
             </div>

diff --git a/src/components/careerPage/css/Occupation.css b/src/components/careerPage/css/Occupation.css
@@ -28,12 +28,12 @@
     max-width: 15vw;
 }
 
-.colorprimary {
-    text-align: start;
-    box-shadow: inset 0 0 0 0 var(--color-text-primary);
-    color: var(--color-text-primary);
-    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
-    font-size: var(--font-link);
+
+.occupation-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 40vw;
 }
 
 .occupation-description {
@@ -46,13 +46,10 @@
 }
 
 .skills-tools {
-    justify-content: center;
+    justify-content: space-between;
 }
 
 .title {
-    margin: auto;
-    text-align: center;
-    width: auto;
     justify-content: start;
 }