diff --git a/front/src/lib/components/cv/Experience.svelte b/front/src/lib/components/cv/Experience.svelte
index 98c2ef2dd..37d099fa1 100644
--- a/front/src/lib/components/cv/Experience.svelte
+++ b/front/src/lib/components/cv/Experience.svelte
@@ -1,5 +1,6 @@
 <script>
-  import SkillBreakdown from './SkillBreakdown.svelte';
+  import SkillBreakdown from './SkillBreakdown/SkillBreakdown.svelte';
+  import '@styles/pages/experience.css';
 
   export let content;
   let {
diff --git a/front/src/lib/components/cv/SkillBreakdown.svelte b/front/src/lib/components/cv/SkillBreakdown.svelte
deleted file mode 100644
index 844a6d933..000000000
--- a/front/src/lib/components/cv/SkillBreakdown.svelte
+++ /dev/null
@@ -1,164 +0,0 @@
-<script>
-  import SkillIcon from '@components/icons/SkillIcon.svelte';
-  import { getHighContrastHexColor, getRGBFromHex } from '@utils';
-
-  export let skills;
-</script>
-
-<h2>Skill Breakdown</h2>
-
-<figure class="skill-graph">
-  {#each skills as { name, slug, percentage, graphColor, iconColor, summary }}
-    {@const RGBColor = getRGBFromHex(graphColor)}
-    <div
-      class="skill-graph__item"
-      style={`
-        background-color: ${graphColor}; background-image: linear-gradient(180deg, rgba(${RGBColor},0.33), rgba(${RGBColor},1)), url('/v/noise.svg'); width: ${percentage}%;`}
-    >
-      <dl class="skill-graph__item__details">
-        <dt class="skill-graph__item__details__term">
-          <SkillIcon {slug} {iconColor} classes="skill-icon__svg" />
-          {name}
-        </dt>
-        {#if summary}<dd class="skill-graph__item__details__def">
-            {summary}
-          </dd>{/if}
-        {#if percentage}<dd class="skill-graph__item__details__def">
-            <span style={`color: ${getHighContrastHexColor(graphColor)};`}
-              >{percentage}&#65285;</span
-            >
-          </dd>{/if}
-      </dl>
-    </div>
-  {/each}
-</figure>
-
-<style lang="postcss">
-  .skill-graph {
-    display: flex;
-    position: relative;
-    margin-top: 11rem;
-    box-shadow: var(--shadow-elevation-low);
-    &__item {
-      position: relative;
-      filter: brightness(1);
-      transition-duration: var(--transition-duration-fast);
-      transition-property: transform, filter, box-shadow, border-color;
-      transition-timing-function: var(--transition-timing-function);
-      will-change: opacity, border-color, background-color;
-      cursor: pointer;
-      box-sizing: border-box;
-      padding: 1rem 0;
-      overflow: hidden;
-      &::before {
-        display: block;
-        position: absolute;
-        top: 0;
-        opacity: 1;
-        z-index: 0;
-        mix-blend-mode: var(--skill-graph-blend);
-        /* mix-blend-mode: multiply; */
-        filter: contrast(10%) brightness(100%) blur(0);
-        /* transition-delay: 1s; */
-        transition-duration: var(--transition-duration);
-        transition-property: background, filter, opacity;
-        will-change: opacity, border-color, background-color, filter;
-        /* box-shadow: inset 0 0 1rem 0; */
-        background-image: inherit;
-        background-clip: padding-box;
-        padding-right: 3px;
-        padding-left: 3px;
-        width: 100%;
-        height: 100%;
-        content: '';
-      }
-      &:not(:hover),
-      &:not(:focus),
-      &:not(:focus-visible),
-      &:not(:active) {
-        &::before {
-          transition-delay: 50ms;
-          transition-duration: 500ms;
-        }
-      }
-      &:hover,
-      &:focus,
-      &:focus-visible,
-      &:active {
-        opacity: 1;
-        z-index: 1;
-        box-shadow: var(--shadow-elevation-low);
-        overflow: visible;
-        /* filter: brightness(1.1); */
-        /* transform: scale(1.01); */
-        &::before {
-          opacity: 0.5;
-          filter: contrast(10%) brightness(100%) blur(1rem);
-          transition-delay: 0s;
-          /* transition-duration: var(--transition-duration-md); */
-        }
-        &:first-of-type {
-          border-left: none;
-        }
-        &:last-of-type {
-          border-right: none;
-        }
-      }
-      &:first-of-type {
-        &:before {
-          border-left: none;
-        }
-        &:before,
-        & {
-          border-top-left-radius: 0.25rem;
-          border-bottom-left-radius: 0.25rem;
-        }
-      }
-      &:last-of-type {
-        &:before {
-          border-right: none;
-        }
-        &:before,
-        & {
-          border-top-right-radius: 0.25rem;
-          border-bottom-right-radius: 0.25rem;
-        }
-      }
-      &__details {
-        position: absolute;
-        bottom: 0;
-        justify-content: center;
-        opacity: 0;
-        z-index: 2;
-        transition-duration: var(--transition-duration);
-        transition-property: opacity;
-        will-change: opacity;
-        box-sizing: border-box;
-        width: 100%;
-        text-align: center;
-        &__term,
-        &__def,
-        & dd,
-        & {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        &__term {
-          & .skill-icon__svg {
-            padding: 2.5rem 0 0.25rem 0;
-          }
-        }
-        &__def {
-          position: relative;
-          z-index: 1;
-          mix-blend-mode: difference;
-          line-height: 2rem;
-        }
-      }
-      &:hover &__details {
-        opacity: 1;
-      }
-    }
-  }
-</style>
diff --git a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css
new file mode 100644
index 000000000..c66a62a25
--- /dev/null
+++ b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css
@@ -0,0 +1,161 @@
+@keyframes graphOut {
+  from {
+    overflow: visible;
+  }
+  to {
+    overflow: hidden;
+  }
+}
+
+@keyframes graphIn {
+  from {
+    overflow: hidden;
+  }
+  to {
+    overflow: visible;
+  }
+}
+
+.skill-graph {
+  display: flex;
+  position: relative;
+  margin-top: 11rem;
+  box-shadow: var(--shadow-elevation-low);
+  &__item {
+    position: relative;
+    filter: brightness(1);
+    animation: graphOut 0s;
+    animation-delay: 1s;
+    animation-fill-mode: forwards;
+    transition-duration: var(--transition-duration-fast);
+    transition-property: width;
+    transition-timing-function: var(--transition-timing-function);
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 1rem 0;
+    width: calc(var(--width) * 100%);
+    /* overflow: hidden; */
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      opacity: 1;
+      z-index: 0;
+      mix-blend-mode: var(--skill-graph-blend);
+      /* mix-blend-mode: multiply; */
+      filter: contrast(10%) brightness(100%) blur(0);
+      transition-delay: 1s;
+      transition-duration: var(--transition-duration);
+      transition-property: background, filter, opacity;
+      will-change: opacity, border-color, background-color, filter;
+      box-shadow: none;
+      background-image: inherit;
+      background-clip: border-box;
+      padding-right: 3px;
+      padding-left: 3px;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+    &__details {
+      position: absolute;
+      bottom: 0;
+      justify-content: center;
+      opacity: 0;
+      z-index: 2;
+      transition-duration: var(--transition-duration);
+      transition-property: opacity;
+      will-change: opacity;
+      box-sizing: border-box;
+      width: 100%;
+      text-align: center;
+      &__term,
+      &__def,
+      & dd,
+      & {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 1rem;
+      }
+      &__def {
+        position: relative;
+        z-index: 1;
+        mix-blend-mode: difference;
+        line-height: 2rem;
+      }
+      &__term,
+      &__icon {
+        padding-bottom: 0.5rem;
+      }
+      &__icon {
+        align-self: center;
+        transition-duration: var(--transition-duration);
+        transition-property: max-height;
+        transition-timing-function: var(--transition-timing-function);
+        max-height: 1rem;
+      }
+    }
+    &:not(:hover),
+    &:not(:focus),
+    &:not(:focus-visible),
+    &:not(:active) {
+      &::before {
+        transition-delay: 50ms;
+        transition-duration: 500ms;
+      }
+    }
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      opacity: 1;
+      z-index: 1;
+      animation: graphIn 0s;
+      animation-delay: 0s;
+      box-shadow: var(--shadow-elevation-low);
+      width: calc(var(--width) * 2 * 100%);
+      /* overflow: visible; */
+      /* filter: brightness(1.1); */
+      /* transform: scale(1.01); */
+      &::before {
+        opacity: 0.5;
+        filter: contrast(10%) brightness(100%) blur(1rem);
+        transition-delay: 0s;
+        transition-duration: var(--transition-duration-fast);
+      }
+      &:first-of-type {
+        border-left: none;
+      }
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+    &:hover &__details {
+      opacity: 1;
+      &__icon {
+        max-height: 3rem;
+      }
+    }
+    &:first-of-type {
+      &:before {
+        border-left: none;
+      }
+      &:before,
+      & {
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+      }
+    }
+    &:last-of-type {
+      &:before {
+        border-right: none;
+      }
+      &:before,
+      & {
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+      }
+    }
+  }
+}
diff --git a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte
new file mode 100644
index 000000000..9887ec724
--- /dev/null
+++ b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.svelte
@@ -0,0 +1,39 @@
+<script>
+  import './SkillBreakdown.css';
+  import SkillIcon from '@components/icons/SkillIcon.svelte';
+  import { getHighContrastHexColor, getRGBFromHex } from '@utils';
+
+  export let skills;
+</script>
+
+<h2>Skill Breakdown</h2>
+
+<figure class="skill-graph">
+  {#each skills as { name, slug, percentage, graphColor, iconColor, summary }}
+    {@const RGBColor = getRGBFromHex(graphColor)}
+    <div
+      class="skill-graph__item {slug}"
+      style={`--width: ${percentage};
+        background-color: ${graphColor}; background-image: linear-gradient(180deg, rgba(${RGBColor},0.33), rgba(${RGBColor},1)), url('/v/noise.svg');`}
+    >
+      <dl class="skill-graph__item__details">
+        <dt class="skill-graph__item__details__term">
+          <SkillIcon
+            {slug}
+            {iconColor}
+            classes="skill-graph__item__details__icon"
+          />
+          {name}
+        </dt>
+        {#if summary}<dd class="skill-graph__item__details__def">
+            {summary}
+          </dd>{/if}
+        {#if percentage}<dd class="skill-graph__item__details__def">
+            <span style={`color: ${getHighContrastHexColor(graphColor)};`}
+              >{percentage}&#65285;</span
+            >
+          </dd>{/if}
+      </dl>
+    </div>
+  {/each}
+</figure>
diff --git a/front/src/lib/components/icons/SkillIcon.svelte b/front/src/lib/components/icons/SkillIcon.svelte
index eead2f410..f61da7809 100644
--- a/front/src/lib/components/icons/SkillIcon.svelte
+++ b/front/src/lib/components/icons/SkillIcon.svelte
@@ -90,7 +90,7 @@
   class:loaded
   class:failed
   aria-label={name}
-  style={iconColor ? `color: ${iconColor}; filter: brightness(1.3);` : false}
+  style={iconColor && `color: ${iconColor}; filter: brightness(1.3);`}
 >
   <use href={iconURL} />
 </svg>
diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css
index 81127fca3..c8cee6c6b 100644
--- a/front/src/lib/styles/base/theme.css
+++ b/front/src/lib/styles/base/theme.css
@@ -145,7 +145,7 @@
     );
     --skill-icon-brightness: brightness(0.5);
     --skill-icon-brightness-hover: brightness(1);
-    --skill-graph-blend: luminosity;
+    --skill-graph-blend: soft-light;
   }
 }
 html.light-theme {
@@ -224,7 +224,7 @@ html.light-theme {
   );
   --skill-icon-brightness: brightness(0.5);
   --skill-icon-brightness-hover: brightness(1);
-  --skill-graph-blend: luminosity;
+  --skill-graph-blend: soft-light;
 }
 
 /* --------------------------------------- */
diff --git a/front/src/lib/styles/pages/experience.css b/front/src/lib/styles/pages/experience.css
new file mode 100644
index 000000000..66edf68fb
--- /dev/null
+++ b/front/src/lib/styles/pages/experience.css
@@ -0,0 +1,3 @@
+.cv.experience {
+  position: relative;
+}