Frontend: Added sliding for all objects. Removed buttons for mobile. Updated project button and added index.

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "highlightjs-svelte": "^1.0.6",
         "sass": "^1.69.5",
         "simple-icons": "^9.21.0",
+        "svelte-gestures": "^1.5.2",
         "svelte-markdown": "^0.4.1"
       },
       "devDependencies": {
@@ -1883,6 +1884,11 @@
         "node": ">=16"
       }
     },
+    "node_modules/svelte-gestures": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.5.2.tgz",
+      "integrity": "sha512-bXGFqpNAAYCM4XsxjaHMAoPQC3IRjrgGS+Sm/pE1ZftYu9gGRWvDF8g6cwl2b751R2kN1SwNEd6XV7zVh9mcew=="
+    },
     "node_modules/svelte-hmr": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",

frontend/package.json

@@ -25,6 +25,7 @@
     "highlightjs-svelte": "^1.0.6",
     "sass": "^1.69.5",
     "simple-icons": "^9.21.0",
+    "svelte-gestures": "^1.5.2",
     "svelte-markdown": "^0.4.1"
   }
 }

frontend/src/lib/components/projects.svelte

@@ -8,6 +8,8 @@
 
   export let active = false;
   export let data;
+  export let max = 0;
+  export let actualnum = 0;
 
   const title = data.title;
   const short_description = data.short_description;
@@ -55,6 +57,11 @@
           {short_description}
         </p>
       </div>
+      <div class="slide-count-container">
+        <div class="slide-count">
+          {`${actualnum}/${max}`}
+        </div>
+      </div>
       <div class="slide-button-container">
         <button class="slide-button" on:click={() => showPopup(true, data.id)}>
           <SvgIcon size="20" path={mdiPlus} type="mdi" />

frontend/src/lib/components/slideshow.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { swipe } from "svelte-gestures";
   import SvgIcon from "@jamescoyle/svelte-icon";
   import { mdiArrowRight, mdiArrowLeft, mdiRestore } from "@mdi/js";
   import "$lib/css/slideshow.css";
@@ -16,6 +17,7 @@
   export let type;
   export let timeline = false;
   export let reverse = false;
+  export let show_max_index = false;
   if (reverse) {
     data = data.reverse();
   }
@@ -163,6 +165,12 @@
     });
   }
 
+  // Mobile swipe
+  function mobileSwipe(event) {
+    if (slideshow_index > 0 || event.detail.direction == "left")
+      slideCards(event.detail.direction == "left");
+  }
+
   async function changeSize() {
     if (timeline && !resizing) {
       resizing = true;
@@ -178,7 +186,12 @@
 
 <svelte:window on:resize={changeSize} bind:innerWidth={windowWidth} />
 
-<div class="slideshow" bind:this={slideshow}>
+<div
+  class="slideshow"
+  use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: "pan-y" }}
+  on:swipe={mobileSwipe}
+  bind:this={slideshow}
+>
   <button
     class={slideshow_index >= 1
       ? "slideshow_btn"
@@ -208,10 +221,20 @@
     />
   </button>
   {#each data as selected_data, index (index)}
-    <svelte:component
+    {#if show_max_index}
-      this={type}
+      <svelte:component
-      data={selected_data}
+        this={type}
-      active={index == slideshow_index ? true : false}
+        data={selected_data}
-    />
+        active={index == slideshow_index ? true : false}
+        max={data.length}
+        actualnum={index + 1}
+      />
+    {:else}
+      <svelte:component
+        this={type}
+        data={selected_data}
+        active={index == slideshow_index ? true : false}
+      />
+    {/if}
   {/each}
 </div>

frontend/src/lib/css/slide.css

@@ -74,6 +74,10 @@
         justify-content: flex-end;
     }
 
+    .slide-count-container {
+        display: none;
+    }
+
     /* Add it to any text that may overflow. (long texts)*/
     .slide-text {
         font-size: 1.25rem !important;
@@ -160,6 +164,12 @@
         position: absolute;
     }
 
+    .slide-count-container {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+    }
+
     .slide-text {
         font-size: 1rem;
     }
@@ -210,24 +220,37 @@
     background-color: var(--color-special);
     font-family: 'Urbanist', sans-serif;
     font-weight: 700;
-    border: 0.05rem solid;
     border-color: rgba(0, 0, 0, 0);
-    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 8px 18px -1px #0174BE60;
     transition: all .3s ease 0s;
     cursor: pointer;
 }
 
 .slide-button:hover {
-    color: var(--color-special);
+    transition: all .3s ease 0s;
     background-color: var(--color-background);
-    box-shadow: 0 0.7px 3px -1px rgba(150,170,180,0.5);
+    color: var(--color-special);
-    border: 0.05rem solid;
-    border-color: var(--color-special);
 }
 
 .slide-button:active {
-    transform: translateY(0.25rem);
+    transform: translateY(3px);
-    background-color: var(--color-subtitle);
+    box-shadow: 0px 4px 12px -1px #0174BE70;
+}
+
+.slide-count {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5rem;
+    color: var(--color-text);
+    background-color: var(--color-code);
+    font-family: 'Urbanist', sans-serif;
+    font-weight: 700;
+    box-shadow: 0px 8px 18px -1px #261C2C60;
 }
 
 /* Timeline stuff */

frontend/src/lib/css/slideshow.css

@@ -5,8 +5,7 @@
     position: relative;
 }
 
-@media screen and (min-width: 1000px)
+@media screen and (min-width: 1000px) {
-{
     .slideshow_btn {
         z-index: 2;
         position: absolute;
@@ -40,45 +39,15 @@
     }
 }
 
-@media screen and (max-width: 1000px)
+@media screen and (max-width: 1000px) {
-{
     .slideshow_btn {
-        z-index: 2;
+        display: none;
-        position: absolute;
-        margin-right: 1rem;
-        width: 3.5rem;
-        height: 3.5rem;
-        background-color: var(--color-special);
-        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--color-background);
-        border: 0;
-        transition: all .3s ease 0s;
-        cursor: pointer;
-        top: calc(15rem - 4rem);
-        right: 0;
-        opacity: 100%;
-    }
-
-    .slideshow_btn_center {
-        top: 15rem;
-    }
-
-    .slideshow_btn_low {
-        top: calc(15rem + 4rem);
-    }
-
-    .slideshow_btn_disabled {
-        opacity: 0;
     }
 }
 
 .slideshow_btn:hover {
     transform: translateY(-0.25rem);
-    box-shadow: 0 0.7px 3px -1px rgba(150,170,180,0.5) !important;
+    box-shadow: 0 0.7px 3px -1px rgba(150, 170, 180, 0.5) !important;
 }
 
 .slideshow_btn:active {

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

@@ -134,7 +134,7 @@
         reverse="true"
       />
       <Section icon={mdiWrench} title={text.projects} />
-      <SlideShow data={cv.skills.project} type={Projects} />
+      <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">