From 8755bdc210c2cb022cb08b3e72f2f32047853ac4 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 14 May 2025 16:29:17 +0200
Subject: [PATCH] Add skeleton animations for Menu and Projects

---
 src/assets/css/src/1.0.global.css |  2 +-
 src/components/Menu.vue           | 15 ++++++++++++
 src/components/Projects.vue       | 39 ++++++++++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index 7df4c77..df84658 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -163,7 +163,7 @@ summary::after {
   content: "";
   display: inline-block;
   width: 3rem;
-  height: 3rem;
+  height: 2.5rem;
   background-color: var(--color-background);
   background-image: var(--icon-summary);
   background-repeat: no-repeat;
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 46ee312..953358b 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -398,4 +398,19 @@ button[aria-controls="menu"][aria-expanded="false"]
   transform: translateY(-0.1em);
   overflow: hidden;
 }
+
+/* Skeleton */
+#menu details.skeleton::after {
+  content: '';
+  display: block;
+  height: calc(44px * 5);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 332 88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23F2F2F2' x='16' y='10' width='240' height='24' rx='8' ry='8'/%3E%3Crect fill='%23F2F2F2' x='16' y='54' width='160' height='24' rx='8' ry='8'/%3E%3C/svg%3E%0A");
+  background-repeat: repeat-y;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
+  animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
+}
+@keyframes skeleton {
+  0%   { opacity: .25 }
+  100% { opacity: .75 }
+}
 </style>
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 0ac63d7..0f04c90 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -10,7 +10,7 @@
     tabindex="0"
     :aria-label="tabs[0].label"
     class="flow"
-    :class="{ loading: isProjectsLoading }"
+    :class="{ skeleton: isProjectsLoading }"
   >
     <Project
       v-for="project in currentProjects"
@@ -92,4 +92,41 @@ section.loading::after {
 section.loading::after {
   content: 'Chargement des projets…';
 }
+/* Skeleton */
+section.skeleton::before,
+section.skeleton::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  margin: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
+  background-repeat: repeat-y;
+  background-size: 1080px 260px;
+  background-position-x: left;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
+  animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
+}
+section.skeleton::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
+  background-size: 1080px 260px;
+  background-position-x: right;
+  animation: none;
+  mask-image: none;
+}
+@media (min-width: 1530px) {
+  section.skeleton::before {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='140' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
+    background-size: 1468px 156px;
+  }
+  section.skeleton::after {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1468 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1448' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1448' cy='120' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1448' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1448' y='120' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");
+    background-size: 1468px 156px;
+  }
+}
+@keyframes skeleton {
+  0%   { opacity: .50 }
+  100% { opacity: 1.0 }
+}
 </style>