Backend: fixed unordered education and experience. Frontend: Adapted footer for mobile.

backend/src/main.rs

@@ -103,7 +103,8 @@ async fn education(Path(lang_id): Path<i32>, State(pool): State<PgPool>) -> Json
     MAX(CASE WHEN et.lang_id = $1 THEN et.school_location END) AS school_location
 FROM public.education e
 JOIN public.education_text et ON e.id = et.education_id
-GROUP BY e.school, e.start_year, e.end_year, e.picture_url;
+GROUP BY e.school, e.start_year, e.end_year, e.picture_url
+ORDER BY e.start_year ASC;
 ",
         lang_id
     )
@@ -126,7 +127,8 @@ async fn experience(Path(lang_id): Path<i32>, State(pool): State<PgPool>) -> Jso
     MAX(CASE WHEN et.lang_id = $1 THEN et.enterprise_location END) AS enterprise_location
 FROM public.experience e
 JOIN public.experience_text et ON e.id = et.experience_id
-GROUP BY e.enterprise, e.start_year, e.end_year, e.picture_url;
+GROUP BY e.enterprise, e.start_year, e.end_year, e.picture_url
+ORDER BY e.start_year ASC;
 ",
         lang_id
     )

frontend/src/lib/css/cv.css

@@ -45,6 +45,21 @@
         padding-right: 4rem;
     }
 
+    .footer-btn-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .footer-text p {
+        font-family: 'Urbanist', sans-serif;
+        font-weight: 600;
+        font-size: 1.25rem;
+        color: var(--color-background);
+        margin: 0.5rem;
+    }
+
     .end {
         padding-bottom: 5rem;
     }
@@ -145,6 +160,30 @@
         padding-bottom: 2rem;
     }
 
+    .footer-mobile-btn {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .footer-btn-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        margin-left: 2rem;
+        margin-right: 2rem;
+    }
+
+    .footer-text p {
+        font-family: 'Urbanist', sans-serif;
+        font-weight: 600;
+        font-size: minmax(2dvh, 1.25rem);
+        color: var(--color-background);
+        margin: 0.5rem;
+    }
+
     .subsection {
         margin-left: 5vw;
         display: flex;
@@ -192,21 +231,6 @@ h2 {
     margin-right: 0.5rem;
 }
 
-.footer-text p {
-    font-family: 'Urbanist', sans-serif;
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: var(--color-background);
-    margin: 0.5rem;
-}
-
-.footer-btn-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
 .footer-btn {
     display: flex;
     border-radius: 0.4rem;

frontend/src/routes/lang=[lang]/+page.svelte

@@ -180,39 +180,79 @@
       </div>
     </div>
   </div>
+  <!-- Footer -->
   <div class="footer" bind:this={footer}>
-    <div class="footer-btn-container">
+    <!-- Footer desktop -->
-      <button
+    {#if innerWidth >= 1000}
-        class="footer-btn"
+      <div class="footer-btn-container">
-        on:click={() => (window.location.href = `/lang=${otherlang}`)}
+        <button
-      >
+          class="footer-btn"
-        <p>{text.lang}</p>
+          on:click={() => (window.location.href = `/lang=${otherlang}`)}
-        <span class={`fi fi-${flag} flag-size`}></span>
+        >
-      </button>
+          <p>{text.lang}</p>
-    </div>
+          <span class={`fi fi-${flag} flag-size`}></span>
-    <div class="footer-text">
+        </button>
-      <p>
+      </div>
-        {text.madewith}
+      <div class="footer-text">
-        <SvgIcon size="20" path={mdiHeart} type="mdi" />
+        <p>
-        {text.usingsvelte}
+          {text.madewith}
-      </p>
+          <SvgIcon size="20" path={mdiHeart} type="mdi" />
-      <p>{text.copyright} • {new Date().getFullYear()}</p>
+          {text.usingsvelte}
-    </div>
+        </p>
-    <div class="footer-btn-container">
+        <p>{text.copyright} • {new Date().getFullYear()}</p>
-      <a
+      </div>
-        class="footer-btn footer-github"
+      <div class="footer-btn-container">
-        href="https://github.com/yoboujon/curriculum-vitae"
+        <a
-        target="_blank"
+          class="footer-btn footer-github"
-      >
+          href="https://github.com/yoboujon/curriculum-vitae"
-        <img
+          target="_blank"
-          height="30"
+        >
-          width="30"
+          <img
-          src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg"
+            height="30"
-          alt="github"
+            width="30"
-        />
+            src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg"
-        <p>{text.github}</p>
+            alt="github"
-      </a>
+          />
-    </div>
+          <p>{text.github}</p>
+        </a>
+      </div>
+      <!-- Footer mobile -->
+    {:else}
+      <div class="footer-text">
+        <p>
+          {text.madewith}
+          <SvgIcon size="20" path={mdiHeart} type="mdi" />
+          {text.usingsvelte}
+        </p>
+        <p>{text.copyright} • {new Date().getFullYear()}</p>
+      </div>
+      <div class="footer-mobile-btn">
+        <div class="footer-btn-container">
+          <button
+            class="footer-btn"
+            on:click={() => (window.location.href = `/lang=${otherlang}`)}
+          >
+            <p>{text.lang}</p>
+            <span class={`fi fi-${flag} flag-size`}></span>
+          </button>
+        </div>
+        <div class="footer-btn-container">
+          <a
+            class="footer-btn footer-github"
+            href="https://github.com/yoboujon/curriculum-vitae"
+            target="_blank"
+          >
+            <img
+              height="30"
+              width="30"
+              src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/github.svg"
+              alt="github"
+            />
+            <p>{text.github}</p>
+          </a>
+        </div>
+      </div>
+    {/if}
   </div>
 {:else}
   <h1 class="h1 text-center">Oops, could not load database :/</h1>