From 71bce7efa3997d641befaf736b1a43c3d74c02a5 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Wed, 7 Feb 2024 23:29:44 +0100
Subject: [PATCH] Frontend:  The profile picture will be shown directly to then
 appear as a button on mobile.

---
 frontend/src/lib/css/cv.css                  | 21 ++++++++++++++-----
 frontend/src/routes/lang=[lang]/+page.svelte | 22 +++++++++++++++-----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index f5a180f..b486f86 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -91,7 +91,15 @@
         border-bottom-right-radius: 1rem;
     }
 
-    #topbar>button {
+    .topbar-button-big {
+        min-width: 5rem !important;
+        min-height: 5rem !important;
+        background-size: cover;
+        margin-left: 2rem !important;
+        box-shadow: 0px 8px 18px -1px #261C2C60 !important;
+    }
+
+    .topbar-button {
         transition: all .3s ease 0s;
         cursor: pointer;
         border: 0;
@@ -100,19 +108,19 @@
         border-radius: 50%;
         min-width: 2.5rem;
         min-height: 2.5rem;
-        display: none;
         justify-content: center;
         align-items: center;
         margin-left: 1rem;
         box-shadow: 0px 8px 12px -1px #0174BE50;
+        display: flex;
     }
 
-    #topbar>button:hover {
+    .topbar-button:hover {
         color: var(--color-special);
         background-color: var(--color-background);
     }
 
-    #topbar>button:active {
+    .topbar-button:active {
         transform: translateY(3px);
         box-shadow: 0px 3px 8px -1px #0174BEAA;
     }
@@ -129,9 +137,11 @@
         text-align: center;
         text-shadow: -15px 5px 20px #00000030;
         padding: 0;
+        padding-right: 2rem;
         margin: 0.5rem;
-        font-size: 3rem;
+        font-size: 2rem;
         transition: all .3s ease 0s;
+        text-align: end;
     }
 
     .topbar-name-little {
@@ -155,6 +165,7 @@
         margin-top: 0;
         padding: 1.5rem;
         margin-bottom: 0;
+        font-size: 1.5rem;
         box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px;
     }
 
diff --git a/frontend/src/routes/lang=[lang]/+page.svelte b/frontend/src/routes/lang=[lang]/+page.svelte
index 2f4e803..50f4ec0 100644
--- a/frontend/src/routes/lang=[lang]/+page.svelte
+++ b/frontend/src/routes/lang=[lang]/+page.svelte
@@ -57,12 +57,12 @@
       topbar.style.height = "53px";
       topbar.style.backgroundColor = "#F8F1F1AE";
       topbar.style.boxShadow = "0px 8px 18px -1px #1d4a6560";
-      buttonTopbar.style.display = "flex";
+      buttonTopbar.style.backgroundImage = "";
     } else {
       topbar.style.height = "";
       topbar.style.backgroundColor = "#F8F1F100";
       topbar.style.boxShadow = "";
-      buttonTopbar.style.display = "none";
+      buttonTopbar.style.backgroundImage = `url('${cv.info.profile_pic}')`;
     }
   }
 
@@ -104,8 +104,16 @@
     <!-- MOBILE TOP BAR -->
     {#if innerWidth < 1000}
       <div id="topbar" bind:this={topbar}>
-        <button on:click={() => showSidebar(true)} bind:this={buttonTopbar}>
-          <SvgIcon size="23" path={mdiAccount} type="mdi" />
+        <button
+          class={scrollY <= 53
+            ? "topbar-button topbar-button-big"
+            : "topbar-button"}
+          on:click={() => showSidebar(true)}
+          bind:this={buttonTopbar}
+        >
+          {#if scrollY > 53}
+            <SvgIcon size="23" path={mdiAccount} type="mdi" />
+          {/if}
         </button>
         <h1 class={scrollY <= 53 ? "topbar-name" : "topbar-name-little"}>
           {cv.info.full_name}
@@ -134,7 +142,11 @@
         reverse="true"
       />
       <Section icon={mdiWrench} title={text.projects} />
-      <SlideShow data={cv.skills.project} type={Projects} show_max_index={true} />
+      <SlideShow
+        data={cv.skills.project}
+        type={Projects}
+        show_max_index={true}
+      />
       <Section icon={mdiPencil} title={text.skills} />
       <SubSection icon={mdiXml} title={text.programming_languages} />
       <div class="subsection">