Frontend: Added a more button to show hidden skills.

frontend/src/lib/components/pill.svelte

@@ -125,10 +125,15 @@
     pill_notification.style.top = `${main_pill.offsetTop}px`;
   }
 
-  onMount(async () => {
+  export function updatePill() {
     calculateOffsetUp();
     calculateHitbox();
+    calculateOutOfBounds();
     calculateNotification();
+  }
+
+  onMount(async () => {
+    updatePill();
   });
 </script>
 
@@ -136,10 +141,7 @@
   bind:innerWidth
   bind:scrollY
   on:resize={() => {
-    calculateOffsetUp();
+    updatePill();
-    calculateHitbox();
-    calculateOutOfBounds();
-    calculateNotification();
   }}
 />
 

frontend/src/lib/css/pill.css

@@ -195,3 +195,25 @@
     background-color: var(--color-text);
     box-shadow: 0px 8px 18px -1px #261C2C50;
 }
+
+.pill-more {
+    color: var(--color-text);
+    background-color: var(--color-background);
+    cursor: pointer;
+    box-shadow: 0px 8px 18px -1px #261C2C30;
+    border: 0;
+    padding: 0.3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    transition: all .3s ease 0s;
+}
+
+.pill-more:hover{
+    color: var(--color-background);
+    background-color: var(--color-text);
+}
+
+.pill-more:active{
+    transform: translateY(4px);
+    box-shadow: 0px 4px 12px -1px #261C2C90;
+}

frontend/src/lib/lang/en.json

@@ -3,8 +3,7 @@
     "experience": "Experiences",
     "projects": "Projects",
     "skills": "Skills",
-    "programming_languages": "Programming Languages",
+    "more": "More",
-    "software": "Software",
     "languages": "Languages",
     
     "interests": "Interests",

frontend/src/lib/lang/fr.json

@@ -3,8 +3,7 @@
     "experience": "Expériences",
     "projects": "Projets",
     "skills": "Compétences",
-    "programming_languages": "Langages de programmation",
+    "more": "Plus",
-    "software": "Logiciels",
     "languages": "Langues",
     
     "interests": "Centres d'intérêt",

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

@@ -3,6 +3,7 @@
   import { showSidebar } from "$lib/js/topbar.js";
   import "$lib/css/base.css";
   import "$lib/css/cv.css";
+  import "$lib/css/pill.css";
   import "/node_modules/flag-icons/css/flag-icons.min.css";
 
   // Main
@@ -23,6 +24,8 @@
     mdiAccount,
     mdiEarth,
     mdiHeart,
+    mdiArrowDown,
+    mdiArrowUp,
   } from "@mdi/js";
   import { onMount } from "svelte";
 
@@ -75,6 +78,35 @@
     Sidebar = (await import("/src/lib/components/sidebar.svelte")).default;
     sidebarLoaded = true;
   });
+
+  // More pill handler
+  let pillShowMore = [];
+  let pillInstances = [[], []];
+  $: pillActualIndex=0;
+  async function moreHandler(id) {
+    if (pillShowMore[id] === true) {
+      // show Less
+      pillShowMore[id] = false;
+    } else {
+      // Show More
+      pillShowMore[id] = true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    for (const pills of pillInstances) {
+      for (const p of pills) {
+        p.updatePill();
+      }
+    }
+  }
+
+  function needMore(skill)
+  {
+    for(const s of skill)
+    {
+      if(!s.is_shown) return true;
+    }
+    return false;
+  }
 </script>
 
 <svelte:window
@@ -166,23 +198,58 @@
         {text}
       />
       <Section icon={mdiPencil} title={text.skills} />
-      {#each cv.skills as skill, index (index)}
+      {#each cv.skills as skill, index}
-        <SubSection icon={cv.categories[index].icon} title={cv.categories[index].name} />
+        <SubSection
-        <div class="subsection">
+          icon={cv.categories[index].icon}
+          title={cv.categories[index].name}
+        />
         {#if sidebarLoaded}
-          {#each skill as pilldata, index (index)}
+          <div class="subsection">
+            {#each skill as pilldata, pill_dataindex}
+              {#if pilldata.is_shown}
                 <Pill
+                  bind:this={pillInstances[index][pill_dataindex]}
                   name={pilldata.skill}
                   type_icon={pilldata.type_icon}
                   icon={pilldata.icon}
                   color={pilldata.color}
                   show_tooltip={true}
-              tooltip_data={cv.project_skills[pilldata.id-1]}
+                  tooltip_data={cv.project_skills[pilldata.id - 1]}
                   {text}
                 />
+              {/if}
             {/each}
+            {#if needMore(skill)}
+            <button
+              class="pill-container pill-more"
+              on:click={() => moreHandler(index)}
+            >
+              <SvgIcon
+                type="mdi"
+                path={pillShowMore[index] === true ? mdiArrowDown : mdiArrowUp}
+                size="20"
+              />
+              <p>{text.more}</p>
+            </button>
             {/if}
           </div>
+          <div class={pillShowMore[index] === true ? "subsection" : "none"}>
+            {#each skill as pilldata, pill_dataindex}
+              {#if !pilldata.is_shown}
+                <Pill
+                  bind:this={pillInstances[index][pill_dataindex]}
+                  name={pilldata.skill}
+                  type_icon={pilldata.type_icon}
+                  icon={pilldata.icon}
+                  color={pilldata.color}
+                  show_tooltip={true}
+                  tooltip_data={cv.project_skills[pilldata.id - 1]}
+                  {text}
+                />
+              {/if}
+            {/each}
+          </div>
+        {/if}
       {/each}
       <SubSection icon={mdiEarth} title={text.languages} />
       <div class="subsection flag-container end">