Version 1.0.

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "curriculum-vitae-server"
-version = "0.1.0"
+version = "1.0.0"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

backend/db/4_info_text.sql

@@ -10,5 +10,6 @@ CREATE TABLE public.info_text (
 	lang_id int4 NOT NULL,
 	title text NULL,
 	description text NULL,
+	pdf_url text NULL,
 	CONSTRAINT skills_languages_fk FOREIGN KEY (lang_id) REFERENCES public.languages(id)
-);;
+);

backend/src/db.rs

@@ -16,7 +16,8 @@ pub struct Info {
     pub title: Option<String>,
     pub softskills: Option<String>,
     pub interests: Option<String>,
-    pub description: Option<String>
+    pub description: Option<String>,
+    pub pdf_url: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]

backend/src/main.rs

@@ -77,7 +77,8 @@ async fn info(Path(lang_id): Path<i32>, State(pool): State<PgPool>) -> Json<Vec<
         (SELECT title FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS title,
         (SELECT softskills FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS softskills,
         (SELECT interests FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS interests,
-        (SELECT description FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS description;",
+        (SELECT description FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS description,
+        (SELECT pdf_url FROM public.info_text WHERE lang_id = $1 LIMIT 1) AS pdf_url;",
         lang_id
     )
     .fetch_all(&pool)

frontend/src/lib/components/sidebar.svelte

@@ -22,6 +22,7 @@
   export let containerCv = null;
   export let sidebarContainer;
   let sidebar;
+  let fakeSidebar;
   let birth_year;
   if (info.birth_year != null) {
     birth_year = formatDate(info.birth_year);
@@ -62,6 +63,9 @@
   }
 
   onMount(async () => {
+    fakeSidebar.style.opacity = `${1}`;
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    sidebar.style.opacity = `${1}`;
     sidebarScrollingHandler();
   });
 </script>
@@ -170,5 +174,5 @@
       />
     {/if}
   </div>
-  <div class="fake-sidebar" />
+  <div class="fake-sidebar" bind:this={fakeSidebar} />
 {/if}

frontend/src/lib/components/suggest.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { onMount } from "svelte";
+  import "$lib/css/suggest.css";
+  import "$lib/css/project-popup.css";
+  import "$lib/css/cv.css";
+
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiFileDocumentOutline, mdiClose } from "@mdi/js";
+
+  export let url;
+  export let text;
+  let hide = false;
+  let suggestMain;
+  let innerWidth;
+
+  onMount(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+    suggestMain.style.opacity = `${1}`;
+  });
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class={hide ? "suggest-main none" : "suggest-main"} bind:this={suggestMain}>
+  <div class="suggest-close">
+    <button
+      on:click={() => {
+        hide = true;
+      }}
+    >
+      <SvgIcon size="25" path={mdiClose} type="mdi" />
+    </button>
+  </div>
+  <div class="suggest-main-container">
+    <div class="suggest-container">
+      <div>
+        <h1 class="suggest-h1">{text.suggest_title}</h1>
+        <p class="suggest-text">
+          {text.suggest_subtext}
+        </p>
+      </div>
+    </div>
+    <div class="suggest-container suggest-center">
+      <a
+        class="project-popup-download project-popup-report suggest-download"
+        href={url}
+        target="_blank"
+      >
+        <SvgIcon
+          size={innerWidth < 1200 ? "15" : "20"}
+          path={mdiFileDocumentOutline}
+          type="mdi"
+        />
+        <span>{text.suggest_button}</span></a
+      >
+    </div>
+  </div>
+</div>

frontend/src/lib/css/cv.css

@@ -75,6 +75,10 @@
         margin-right: 1rem;
     }
 
+    .footer-github>svg {
+        margin-right: 1rem;
+    }
+
     .end {
         padding-bottom: 5rem;
     }
@@ -197,11 +201,16 @@
 
     .footer-mobile-btn {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
     }
 
+    .footer-mobile-btn>div {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
     .footer-btn-container {
         display: flex;
         justify-content: center;
@@ -230,6 +239,10 @@
         margin-right: 0.5rem;
     }
 
+    .footer-github>svg {
+        margin-right: 0.5rem;
+    }
+
     .footer-btn>span {
         margin-left: 0.5rem;
     }

frontend/src/lib/css/sidebar.css

@@ -4,12 +4,15 @@
         width: 15rem;
         transition: all 0s ease 0s;
         margin-left: 0.8dvw;
+        opacity: 0;
     }
 
     .fake-sidebar {
         width: 20rem;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
         background-color: var(--color-special);
+        transition: all .3s ease 0s;
+        opacity: 0;
     }
 
     #sidebar-container {

frontend/src/lib/css/slide.css

@@ -66,6 +66,7 @@
         margin-left: 2.25rem !important;
         margin-right: 2.25rem !important;
         box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5) !important;
+        opacity: 20%;
     }
 
     /* For button at the end of the container*/
@@ -193,6 +194,7 @@
     .slide-unactive {
         scale: 0.9;
         box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5) !important;
+        opacity: 0%;
     }
 
     /* For button at the end of the container*/

frontend/src/lib/css/suggest.css

@@ -0,0 +1,124 @@
+.suggest-main {
+    position: fixed;
+    width: 50dvw;
+    left: 25dvw;
+    background-color: var(--color-text);
+    color: var(--color-background);
+    z-index: 2;
+    bottom: 2rem;
+    border-radius: 0.4rem;
+    box-shadow: 0px 8px 18px -1px #1e1226a0;
+    transition: all .3s ease 0s;
+    opacity: 0;
+}
+
+.suggest-main-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 12rem;
+}
+
+.suggest-close {
+    right: 0;
+    position: absolute;
+    margin: 0.5rem;
+}
+
+.suggest-close>button {
+    display: flex;
+    border-radius: 50%;
+    border: none;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0.4rem;
+    cursor: pointer;
+    color: var(--color-background);
+    background-color: #ffffff00;
+    transition: all .3s ease 0s;
+}
+
+.suggest-close>button:hover {
+    box-shadow: 0px 8px 18px -1px #1e1226a0;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+.suggest-close>button:active {
+    transform: translateY(3px);
+    box-shadow: 0px 4px 12px -1px #1e1226a0;
+}
+
+.suggest-container {
+    padding: 1rem;
+    padding-left: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.suggest-container>div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+}
+
+.suggest-center {
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    padding-right: 2rem;
+    min-width: 10rem;
+}
+
+.suggest-h1 {
+    font-size: 1.8rem;
+    font-family: 'Gabarito', sans-serif !important;
+    color: var(--color-background);
+    margin-bottom: 0;
+    margin-top: 1.5rem;
+}
+
+.suggest-text {
+    margin-bottom: 1.5rem;
+    font-family: 'Gabarito', sans-serif;
+}
+
+.suggest-download {
+    padding: 1rem;
+    margin: 0;
+}
+
+.suggest-download>svg {
+    padding-right: 0.6rem;
+}
+
+@media screen and (max-width: 1200px) {
+    .suggest-main {
+        width: 80dvw;
+        left: 10dvw;
+    }
+
+    .suggest-h1 {
+        font-size: clamp(0.9rem, 4vw, 2rem);
+    }
+
+    .suggest-text {
+        font-size: clamp(0.8rem, 2vw, 1rem);
+    }
+
+    .suggest-download {
+        font-size: 0.6rem;
+        padding: 0.5rem;
+    }
+
+    .suggest-download>svg {
+        margin-left: 0;
+        padding-right: 0.3rem;
+    }
+
+    .suggest-center {
+        min-width: 8rem;
+        padding-right: 1rem;
+    }
+}

frontend/src/lib/lang/en.json

@@ -25,6 +25,10 @@
     "popup_dl_arc": "Download Archive",
     "popup_dl_rep": "See Report",
 
+    "suggest_title": "Want to Simplify Your Experience?",
+    "suggest_subtext": "You can directly view my Portfolio as a pdf file!",
+    "suggest_button": "View Portfolio",
+
     "projects_read": "Read more",
 
     "backend": "This backend",

frontend/src/lib/lang/fr.json

@@ -25,6 +25,10 @@
     "popup_dl_arc": "Archive ZIP",
     "popup_dl_rep": "Voir le Rapport",
 
+    "suggest_title": "Vous préférez un simple fichier ?",
+    "suggest_subtext": "Il est possible de directement voir mon CV ici !",
+    "suggest_button": "Voir CV",
+
     "projects_read": "Lire plus",
 
     "backend": "Ce serveur",

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

@@ -15,6 +15,7 @@
   import SlideShow from "$lib/components/slideshow.svelte";
   import FlagComponent from "$lib/components/flag-component.svelte";
   import ProjectsPopup from "$lib/components/projects-popup.svelte";
+  import Suggest from "$lib/components/suggest.svelte";
   import Pill from "$lib/components/pill.svelte";
   import {
     mdiSchool,
@@ -26,6 +27,7 @@
     mdiHeart,
     mdiArrowDown,
     mdiArrowUp,
+    mdiFileDocumentOutline,
   } from "@mdi/js";
   import { onMount } from "svelte";
 
@@ -127,6 +129,7 @@
 
 {#if data.status == 0}
   <ProjectsPopup tags={cv.tags} {text} />
+  <Suggest url={cv.info.pdf_url} {text} />
   <!-- TOPBAR DIV (POPUP: mobile) -->
   {#if innerWidth < 1200 && sidebarLoaded}
     <Sidebar info={cv.info} bind:sidebarContainer {text} />
@@ -270,7 +273,16 @@
   <div class="footer" bind:this={footer}>
     <!-- Footer desktop -->
     {#if innerWidth >= 1200}
-      <div />
+      <div class="footer-btn-container">
+        <a
+          class="footer-btn footer-github"
+          href={cv.info.pdf_url}
+          target="_blank"
+        >
+          <SvgIcon size="30" path={mdiFileDocumentOutline} type="mdi" />
+          <p>{text.suggest_button}</p>
+        </a>
+      </div>
       <div class="footer-text">
         <p>
           {text.madewith}
@@ -320,6 +332,16 @@
             <p>{text.github}</p>
           </a>
         </div>
+        <div class="footer-btn-container">
+          <a
+            class="footer-btn footer-github"
+            href={cv.info.pdf_url}
+            target="_blank"
+          >
+            <SvgIcon size="30" path={mdiFileDocumentOutline} type="mdi" />
+            <p>{text.suggest_button}</p>
+          </a>
+        </div>
       </div>
     {/if}
   </div>