From dac8a13dec1b616809ae7b02488fa9b3e3c2276e Mon Sep 17 00:00:00 2001
From: Thomas Josso <thomas.josso@gmail.com>
Date: Wed, 11 Dec 2024 16:23:03 +0100
Subject: [PATCH] fix(resume): fix layout

---
 resume.html | 104 +++++++++++++++++++++++++++-------------------------
 style.css   |  13 ++++++-
 2 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/resume.html b/resume.html
index 6104d17..696c264 100644
--- a/resume.html
+++ b/resume.html
@@ -51,25 +51,25 @@ <h1 class="lastname"><strong>Josso</strong></h1>
 
               <div class="socials row">
                 <div class="row">
-                  <i class="fa fa-envelope icon tint"></i>
+                  <i class="fa fa-envelope icon complementary-tint"></i>
                   <a href="mailto:thomas.josso@gmail.com"
                     >thomas.josso@gmail.com</a
                   >
                 </div>
                 <div class="row">
-                  <i class="fa fa-phone icon tint"></i>
+                  <i class="fa fa-phone icon complementary-tint"></i>
                   <a href="tel:+13322052034">(332) 205-2034</a>
                 </div>
               </div>
               <div class="socials row">
                 <div class="row">
-                  <i class="fa-brands fa-github icon tint"></i>
-                  <a target="_blank" href="https://github.com/gijosso"
-                    >gijosso</a
+                  <i class="fa fa-globe icon tint"></i>
+                  <a target="_blank" href="https://www.gijosso.dev/"
+                    >gijosso.dev</a
                   >
                 </div>
                 <div class="row">
-                  <i class="fa-brands fa-linkedin icon tint"></i>
+                  <i class="fa-brands fa-linkedin icon linkedin-color"></i>
                   <a
                     target="_blank"
                     href="https://www.linkedin.com/in/thomas-josso/"
@@ -77,9 +77,9 @@ <h1 class="lastname"><strong>Josso</strong></h1>
                   >
                 </div>
                 <div class="row">
-                  <i class="fa fa-globe icon tint"></i>
-                  <a target="_blank" href="https://www.gijosso.dev/"
-                    >gijosso.dev</a
+                  <i class="fa-brands fa-github icon github-color"></i>
+                  <a target="_blank" href="https://github.com/gijosso"
+                    >gijosso</a
                   >
                 </div>
               </div>
@@ -95,12 +95,12 @@ <h2>Summary</h2>
                       <div class="description">
                         <p>
                           Autonomous and creative, with technical expertise and
-                          product experience. Proficient with managing complex
-                          end-to-end projects, I combine an innovative mindset
-                          and a strong sense of teamwork to bring projects to
-                          life that I take pride in. I have a particular
-                          appreciation for well-crafted interfaces providing a
-                          smooth user experience.
+                          product experience.<br />
+                          Proficient with managing complex end-to-end projects,
+                          I combine an innovative mindset and a strong sense of
+                          teamwork to bring projects to life that I take pride
+                          in. I have a particular appreciation for well-crafted
+                          interfaces providing a smooth user experience.
                         </p>
                       </div>
                     </div>
@@ -118,12 +118,6 @@ <h2>Experience</h2>
                         <div class="row justify-space-between no-break">
                           <div>
                             <strong>Founder</strong>
-                            <div class="tag">Q4 2024</div>
-                            <a
-                              target="_blank"
-                              href="https://workout-app-next.vercel.app"
-                              ><i>TBA</i></a
-                            >
                           </div>
                           <div class="desktop no-break">
                             <div>(2023</div>
@@ -189,8 +183,12 @@ <h2>Experience</h2>
                       <div class="description">
                         <div class="row justify-space-between no-break">
                           <div class="row">
-                            <i class="fa fa-arrow-trend-up tint"></i
-                            ><strong>Product Engineer</strong>
+                            <strong>Product Engineer</strong>
+                            <div class="tag">
+                              <a target="_blank" href="https://www.amblea.fr">
+                                Amblea
+                              </a>
+                            </div>
                           </div>
                           <div class="desktop no-break">
                             <div>(2023)</div>
@@ -202,11 +200,6 @@ <h2>Experience</h2>
                         <div class="row justify-space-between no-break">
                           <div class="row">
                             <strong>Lead Software Engineer</strong>
-                            <div class="tag">
-                              <a target="_blank" href="https://www.amblea.fr">
-                                Amblea
-                              </a>
-                            </div>
                           </div>
                           <div class="desktop no-break">
                             <div>(2020</div>
@@ -421,7 +414,7 @@ <h2>Education</h2>
                 </div>
               </div>
 
-              <div class="row justify-space-between">
+              <div class="row section-row justify-space-between align-start">
                 <div>
                   <h2>Skills</h2>
 
@@ -431,40 +424,52 @@ <h2>Skills</h2>
                         <div class="description">
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa-brands fa-react icon tint"></i>React
+                              <i
+                                class="fa-brands fa-react icon complementary-tint"
+                              ></i
+                              >React
                             </div>
-                            <div class="tint">6+ years</div>
+                            <div>6 years</div>
                           </div>
 
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa-brands fa-square-js icon tint"></i
+                              <i
+                                class="fa-brands fa-square-js icon complementary-tint"
+                              ></i
                               >Typescript
                             </div>
-                            <div class="tint">5.5+ years</div>
+                            <div>6 years</div>
                           </div>
 
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa fa-database icon tint"></i>GraphQL
+                              <i
+                                class="fa fa-database icon complementary-tint"
+                              ></i
+                              >GraphQL
                             </div>
-                            <div class="complementary-tint">3.5+ years</div>
+                            <div>4 years</div>
                           </div>
 
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa-brands fa-square-js icon tint"></i
+                              <i
+                                class="fa-brands fa-square-js icon complementary-tint"
+                              ></i
                               >Next.js
                             </div>
-                            <div class="complementary-tint">2.5+ years</div>
+                            <div>2 years</div>
                           </div>
 
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa-brands fa-react icon tint"></i>React
-                              Native
+                              <i
+                                class="fa-brands fa-react icon complementary-tint"
+                              ></i
+                              >React Native
                             </div>
-                            <div class="complementary-tint">2+ years</div>
+                            <div>2 years</div>
                           </div>
                         </div>
                       </div>
@@ -481,32 +486,33 @@ <h2>Languages</h2>
                         <div class="description">
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa fa-baby icon tint"></i>French
+                              <i class="fa fa-baby icon complementary-tint"></i
+                              ><strong>French</strong>
                             </div>
-                            <div class="complementary-tint">Native</div>
+                            <div>Native</div>
                           </div>
                           <div class="row justify-space-between no-break">
                             <div class="row">
                               <i class="fa icon"></i>
                               TEF Canada
                             </div>
-                            <div class="complementary-tint">C2 (2024)</div>
+                            <div>C2 (2024)</div>
                           </div>
                           <div class="row justify-space-between no-break">
                             <div class="row">
-                              <i class="fa fa-graduation-cap icon tint"></i>
-                              English
-                            </div>
-                            <div class="complementary-tint">
-                              Full professionnal
+                              <i
+                                class="fa fa-graduation-cap icon complementary-tint"
+                              ></i>
+                              <strong>English</strong>
                             </div>
+                            <div>Full professionnal</div>
                           </div>
                           <div class="row justify-space-between no-break">
                             <div class="row">
                               <i class="fa icon"></i>
                               IELTS GT
                             </div>
-                            <div class="complementary-tint">C1 (2024)</div>
+                            <div>C1 (2024)</div>
                           </div>
                         </div>
                       </div>
diff --git a/style.css b/style.css
index 559f6bc..84ab6c7 100644
--- a/style.css
+++ b/style.css
@@ -311,10 +311,11 @@ a:-webkit-any-link {
   /* flex-direction: column; */
   align-items: center;
   justify-content: center;
+  padding-bottom: 10px;
 }
 
 .name h1 {
-  font-size: 20px;
+  font-size: 25px;
   font-weight: normal;
   font-family: arial;
   letter-spacing: 10px;
@@ -369,6 +370,14 @@ a:-webkit-any-link {
 }
 
 /* DETAILS */
+.section-row {
+  gap: 15px;
+}
+
+.section-row > div {
+  flex: 1;
+}
+
 .section {
   padding-left: 0;
 }
@@ -421,7 +430,7 @@ a:-webkit-any-link {
 
 .tag {
   padding: 0 3px;
-  background-color: var(--tint);
+  background-color: var(--complementary-tint);
   border-radius: 3px;
 }