Fix layout

Cemus · Oct 27, 2024 · 782a81f · 782a81f
1 parent 2f8ac2c
commit 782a81f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CV Creator</title>
-    <script type="module" crossorigin src="./assets/index-709f66da.js"></script>
-    <link rel="stylesheet" href="./assets/index-14519be0.css">
+    <script type="module" crossorigin src="./assets/index-1b769ed3.js"></script>
+    <link rel="stylesheet" href="./assets/index-6dee7b6e.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/DisplayCV.jsx b/src/components/DisplayCV.jsx
@@ -34,7 +34,7 @@ export default function DisplayCV(props) {
     return (
       <div key={exp.id} className="cv--career">
         <div className="cv--career-bis">
-          <p className="cv--dates">{`${exp.fromExperience} - ${exp.toExperience}`}</p>
+          <p className="cv--dates">{`${exp.fromExperience} → ${exp.toExperience}`}</p>
           <div className="cv--career-location">
             <p>{exp.roleExperience}</p>
             <p>{`${exp.companyExperience}, ${exp.cityExperience}`}</p>
@@ -58,7 +58,12 @@ export default function DisplayCV(props) {
   const educationRenderer = props.educations.map((edu) => {
     return (
       <div key={edu.id} className="cv--education">
-        <p className="cv--dates">{`${edu.fromEducation} - ${edu.toEducation}`}</p>
+        <div className="cv--dates">
+          {" "}
+          <p>{edu.fromEducation}</p>
+          <p>↓</p>
+          <p>{edu.toEducation}</p>
+        </div>
         <div className="cv--education-location">
           <p>{`${edu.universityEducation}, ${edu.cityEducation}`}</p>
           {edu.degreeEducation != "" && (
@@ -204,7 +209,18 @@ export default function DisplayCV(props) {
               <h3 className="cv--title">
                 {props.language === "french" ? "Profil" : "Profile"}
               </h3>
-              <p className="cv--description">{props.description}</p>
+              <p className="cv--description">
+                {props.description
+                  .toString()
+                  ?.split("\n")
+                  .map((line, index) => (
+                    <div key={index}>
+                      <p className="cv--description-line" key={index}>
+                        {line}
+                      </p>
+                    </div>
+                  ))}
+              </p>
             </div>
           )}
           {props.projects.length > 0 && (

diff --git a/src/styles/DisplayCV.css b/src/styles/DisplayCV.css
@@ -29,7 +29,7 @@
   grid-area: header;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
   border-bottom: solid 0.5mm #005180;
   margin-inline: 0.4cm;
 }
@@ -84,15 +84,13 @@
 .cv--aside {
   grid-area: left;
   background-color: white;
-  margin-block: 0.4cm;
+  margin: 0.4cm;
 }
 
 aside {
   display: flex;
   flex-direction: column;
   gap: 1cm;
-  padding: 0.4cm;
-  border-right: solid 0.5mm #005180;
   height: 100%;
 }
 
@@ -120,6 +118,9 @@ aside {
 .cv--main-section {
   grid-area: right;
   background-color: white;
+  border-left: solid 0.5mm #005180;
+
+  margin-block: 0.4cm;
 }
 
 .cv--hobbies-container {
@@ -138,19 +139,19 @@ aside {
 section {
   display: flex;
   flex-direction: column;
-
-  height: 100%;
-  gap: 1cm;
-  padding: 0.75cm;
+  gap: 5mm;
+  margin-inline: 0.4cm;
 }
 
 .cv--description {
-  font-style: italic;
   line-height: 0.6cm;
   max-width: 13cm;
   overflow-wrap: break-word;
   color: #1f1f1f;
-  margin-bottom: 1cm;
+}
+
+.cv--description-line {
+  margin-top: 1mm;
 }
 
 .cv--personal-details-container {
@@ -225,7 +226,7 @@ section {
 .cv--career-container {
   display: flex;
   flex-direction: column;
-  gap: 1cm;
+  gap: 0.5cm;
 }
 
 .cv--career {
@@ -236,13 +237,19 @@ section {
 
 .cv--career-bis {
   display: flex;
+  align-items: center;
 }
 
 .cv--education {
   display: flex;
+  align-items: center;
 }
 
 .cv--dates {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   font-weight: bold;
   width: 3.5cm;
 }
@@ -254,6 +261,7 @@ section {
 .cv--career-location {
   display: flex;
   flex-direction: column;
+  padding-inline: 2mm;
   gap: 2mm;
 }