diff --git a/src/components/AboutContent.vue b/src/components/AboutContent.vue
index 6e71e07..86dc467 100644
--- a/src/components/AboutContent.vue
+++ b/src/components/AboutContent.vue
@@ -1,159 +1,158 @@
 <template lang="pug">
-main.about-content(:class="classes")
-  .summary
-    h1
+main.AboutContent(:class="classes")
+  .AboutContent__summary
+    h1.AboutContent__summary__title
       | Hi, my name is&nbsp;
-      a(href="mailto:me") François
+      a.AboutContent__summary__title__link(href="mailto:me") François
       | .
       br
       | I’m a full-stack developer living in Paris, currently working at&nbsp;
-      a.fifteen(
+      a.AboutContent__summary__title__link--fifteen(
         href="https://fifteen.eu"
         target="_blank"
       ) Fifteen.
-    h2
+    h2.AboutContent__summary__subtitle
       | I like doing nice and sharp things with digital and web technologies. From a quantum physics background, I’m also passionate about science, pedagogy, music and digital art.
-    h3
-      RouterLink.scroll-invite(to="/projects") Get to know me.
+    h3.AboutContent__summary__tagline
+      RouterLink.AboutContent__summary__tagline__scrollInvite(to="/projects") Get to know me.
 </template>
 
 <style lang="stylus">
-main.about-content
+.AboutContent
   transition margin 0.3s ease
   margin ($content-margin-top + 1.6 * $theme-margin-top) $theme-margin-left-right 0
   display block
 
-  .summary
-    h1
+  &__summary
+    &__title
       max-width 440px
 
-    h2,
-    h3
+    &__subtitle,
+    &__tagline
       max-width 400px
       padding-top 1.3em
 
-  h1
+  &__summary__title
     font-size $golden-num em
     line-height 1.3
     font-family 'Raleway', sans-serif
     font-weight 700
-    // 600
     color $theme-color-white
 
-  h2
+  &__summary__subtitle
     font-family $the-serif, serif
     font-weight 400
     color $theme-color-white
 
-  h3
+  &__summary__tagline
     font-family $the-serif, serif
     font-weight 300
     color alpha($theme-color-white, 0.9)
 
-  h2,
-  h3
+  &__summary__subtitle,
+  &__summary__tagline
     padding 0
     font-size 1em
     line-height 1.4
     margin-left 0
     transition padding-top 0.3s ease, margin-left 0.3s ease
 
-  h1,
-  h2,
-  h3
+  &__summary__title,
+  &__summary__subtitle,
+  &__summary__tagline
     transform translateY(20px)
     opacity 0
 
-  &.show
+  &--show
     pointer-events all
 
-    h1,
-    h2,
-    h3
+    &__summary__title,
+    &__summary__subtitle,
+    &__summary__tagline
       animation show-content-translate 0.7s cubic-bezier(0, 0.58, 0, 1) forwards, show-content-opacity 0.7s ease-out forwards
 
-    h1
+    &__summary__title
       animation-delay 0.85s
 
-    h2
+    &__summary__subtitle
       animation-delay 1s
 
-    h3
+    &__summary__tagline
       animation-delay 1.15s
 
-  &.hide
+  &--hide
     pointer-events none
 
-    h1,
-    h2,
-    h3
+    &__summary__title,
+    &__summary__subtitle,
+    &__summary__tagline
       transform translateY(0)
       animation hide-content-opacity 0.3s ease-out forwards
       animation-delay 0s
 
-  &.hidden
+  &--hidden
     display none
 
 $media-content-max-width = 'only screen and (min-width: ' + $content-max-width + ')'
 
 @media $media-content-max-width
-  main.about-content
-    .summary
-      h2
+  .AboutContent
+    &__summary
+      &__subtitle
         padding-top 2.5em
         margin-left 308px
 
-      h3
+      &__tagline
         padding-top 2.5em
         margin-left 616px
 
 @media only screen and (min-width 1801px)
-  main.about-content
+  .AboutContent
     margin 2 * $content-margin-top + $theme-margin-top $theme-margin-left-right 0
 
 @media only screen and (min-height 601px) and (max-height 640px)
-  main.about-content
+  .AboutContent
     margin: $content-margin-top + $theme-margin-top $theme-margin-left-right 0
 
 @media only screen and (max-height 600px)
-  main.about-content
+  .AboutContent
     margin: $content-margin-top + $theme-margin-top $theme-margin-left-right 0
 
-    h1
+    &__summary__title
       font-size 1.2em
 
-    h2,
-    h3
+    &__summary__subtitle,
+    &__summary__tagline
       font-size: (1.2 / $golden-num)em
 
 @media only screen and (max-width 600px)
-  main.about-content
-    h1
+  .AboutContent
+    &__summary__title
       font-size 1.2em
 
-    h2,
-    h3
+    &__summary__subtitle,
+    &__summary__tagline
       font-size: (1.2 / $golden-num)em
 
 @media only screen and (max-width 400px)
-  main.about-content
+  .AboutContent
     margin ($content-margin-top-mobile + $theme-margin-top-mobile - 15px) $theme-margin-left-right-mobile 0
 
 @media only screen and (min-width 401px) and (max-width 450px) and (max-height 580px)
-  main.about-content
+  .AboutContent
     margin ($content-margin-top-mobile + $theme-margin-top-mobile - 15px) $theme-margin-left-right 0
 
 @media only screen and (max-width 340px) and (max-height 540px)
-  main.about-content
+  .AboutContent
     margin ($content-margin-top-mobile + $theme-margin-top-mobile - 25px) ($theme-margin-left-right-mobile - 10px) 0
 
 @media only screen and (max-width 380px) and (max-height 570px)
-  main.about-content
-    h1
+  .AboutContent
+    &__summary__title
       font-size 1em
 
-    h2,
-    h3
+    &__summary__subtitle,
+    &__summary__tagline
       font-size: (1 / $golden-num)em
 
 @keyframes show-content-translate
@@ -193,8 +192,8 @@ export interface AboutContentProps {
 const props = defineProps<AboutContentProps>();
 
 const classes = computed(() => ({
-  show: props.show,
-  hide: !props.show,
-  hidden: props.hidden,
+  'AboutContent--show': props.show,
+  'AboutContent--hide': !props.show,
+  'AboutContent--hidden': props.hidden,
 }));
 </script>
diff --git a/src/components/AppContent.vue b/src/components/AppContent.vue
index 8d00d1b..55c496a 100644
--- a/src/components/AppContent.vue
+++ b/src/components/AppContent.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-#content.app-content
+#content.AppContent
   PhysicalBubble(
     :open="bubbleIntro.open"
     :appear="introAppear"
@@ -22,7 +22,7 @@
     :remove-particles="bubbleLanding.removeParticles"
   )
 
-  .content-wrapper(:class="contentClass")
+  .AppContent__contentWrapper(:class="contentClass")
     CurriculumContent(
       :show="curriculum.show"
       :skills-array="curriculum.skillsArray"
@@ -106,25 +106,25 @@ svg
 *
   -webkit-tap-highlight-color rgba(0, 0, 0, 0)
 
-.app-content
+.AppContent
   opacity 0
   transition opacity 0.2s linear
 
-  .content-wrapper
+  &__contentWrapper
     pointer-events none
     width 100%
     max-width $content-max-width
     margin-left auto
     margin-right auto
 
-    &.show
+    &--show
       display block
 
-    &.hide
+    &--hide
       display none
 
 body.mounted
-  .app-content
+  .AppContent
     opacity 1
 </style>
 
@@ -256,7 +256,7 @@ const bubbleLanding = reactive<PhysicalBubbleProps>({
   },
 });
 
-const contentClass = ref('hide');
+const contentClass = ref('AppContent__contentWrapper--hide');
 
 const showIntroText = ref(false);
 const isNotFoundText = ref(false);
@@ -482,7 +482,7 @@ function setAboutState(): void {
   }
   about.value.show = true;
   about.value.trueHide = false;
-  contentClass.value = 'show';
+  contentClass.value = 'AppContent__contentWrapper--show';
   showIntroLogo.value = false;
   showIntroText.value = false;
   bubbleLanding.settings.bgColor = primaryDark;
@@ -501,7 +501,7 @@ function setProjectsState(): void {
     bubbleLanding.start = true;
   }
   about.value.show = false;
-  contentClass.value = 'show';
+  contentClass.value = 'AppContent__contentWrapper--show';
   showIntroLogo.value = false;
   showIntroText.value = false;
   bubbleLanding.settings.bgColor = secondaryDark;
@@ -519,7 +519,7 @@ function setCurriculumState(): void {
     bubbleLanding.hide = false;
   }
   about.value.show = false;
-  contentClass.value = 'show';
+  contentClass.value = 'AppContent__contentWrapper--show';
   showIntroLogo.value = false;
   showIntroText.value = false;
   curriculum.value.show = true;
@@ -529,7 +529,7 @@ function endClosingHandler(): void {
   isBubbleIntroOpen.value = false;
   showIntroLogo.value = true;
   showIntroText.value = true;
-  contentClass.value = 'hide';
+  contentClass.value = 'AppContent__contentWrapper--hide';
 }
 
 function endOpeningHandler(): void {
diff --git a/src/components/AppCursor.vue b/src/components/AppCursor.vue
index 1e4a4c9..10dc5c1 100644
--- a/src/components/AppCursor.vue
+++ b/src/components/AppCursor.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-.cursor(
+.AppCursor(
   ref="elementRef"
   :class="classes"
 )
-  .cursor-content
-  .social-icon.fifteen
+  .AppCursor__content
+  .AppCursor__socialIcon--fifteen
     InlineSvg(:src="svgFifteen")
-  .social-icon.x
+  .AppCursor__socialIcon--x
     InlineSvg(:src="svgX")
-  .social-icon.github
+  .AppCursor__socialIcon--github
     InlineSvg(:src="svgGithub")
-  .social-icon.linkedin
+  .AppCursor__socialIcon--linkedin
     InlineSvg(:src="svgLinkedin")
-  .social-icon.mailto
+  .AppCursor__socialIcon--mailto
     InlineSvg(:src="svgMail")
-  .social-icon.new-window
+  .AppCursor__socialIcon--newWindow
     InlineSvg(:src="svgNewWindow")
-  .scroll-icon
+  .AppCursor__scrollIcon
     InlineSvg(:src="svgScroll")
 </template>
 
@@ -43,7 +43,7 @@ html,
 body
   cursor none
 
-.cursor
+.AppCursor
   position absolute
   top 0
   pointer-events none
@@ -54,16 +54,16 @@ body
   left -($cursor-size / 2)
   z-index 999
 
-  &.transition
+  &--transition
     transition transform 250ms ease-out
 
-  &.blend-intro
+  &--blendIntro
     mix-blend-mode hard-light
 
-  &.blend-main
+  &--blendMain
     mix-blend-mode hard-light
 
-  .cursor-content
+  &__content
     pointer-events none
     width $cursor-size
     height $cursor-size
@@ -71,7 +71,7 @@ body
     border-radius: ($cursor-size / 2)
     transition all $transition-duration-all ease-out
 
-  .social-icon
+  &__socialIcon
     width $social-icon-size
     position absolute
     top 50%
@@ -88,25 +88,25 @@ body
       polygon
         fill $theme-color-pink
 
-    &.fifteen
+    &--fifteen
       margin-top: (- $social-icon-size * $fifteen-icon-ratio-wh / 2)
 
-    &.x
+    &--x
       margin-top: (- $social-icon-size * $x-icon-ratio-wh / 2)
 
-    &.github
+    &--github
       margin-top: (- $social-icon-size * $github-icon-ratio-wh / 2)
 
-    &.linkedin
+    &--linkedin
       margin-top: (- $social-icon-size * $linkedin-icon-ratio-wh / 2)
 
-    &.mailto
+    &--mailto
       margin-top: (- $social-icon-size * $mail-icon-ratio-wh / 2)
 
-    &.new-window
+    &--newWindow
       margin-top: (- $social-icon-size * $new-window-icon-ratio-wh / 2)
 
-  .scroll-icon
+  &__scrollIcon
     position absolute
     top 10px
     pointer-events none
@@ -123,110 +123,110 @@ body
       polygon
         fill $theme-color-pink
 
-  &.hidden
-    .cursor-content
+  &--hidden
+    &__content
       transform scale(0)
 
-  &.visible
-    .cursor-content
+  &--visible
+    &__content
       transform scale($normal-scale)
 
-  &:not(.hidden)
-    &:not(.x-cursor):not(.github-cursor):not(.mailto-cursor):not(.scroll-cursor)&:not(.fifteen-cursor):not(.linkedin-cursor)
-      &.down
-        .cursor-content
+  &:not(&--hidden)
+    &:not(&--x):not(&--github):not(&--mailto):not(&--scroll)&:not(&--fifteen):not(&--linkedin)
+      &--down
+        &__content
           transform scale($normal-scale * $click-scale)
 
-      &.clickable-cursor
-        .cursor-content
+      &--clickable
+        &__content
           transform scale($clickable-scale)
           opacity $clickable-opacity
 
-        &.down
-          .cursor-content
+        &--down
+          &__content
             transform scale($clickable-scale * $click-scale)
 
-      &.selectable-cursor
-        &.down
-          .cursor-content
+      &--selectable
+        &--down
+          &__content
             width 4px
             height (3 / 4) * $cursor-size
             transform translate((($cursor-size - @width) / 2), (1 / 6) * $cursor-size)
 
-    &.fifteen-cursor,
-    &.x-cursor,
-    &.github-cursor,
-    &.linkedin-cursor,
-    &.mailto-cursor,
-    &.new-window-cursor
-      .cursor-content
+    &--fifteen,
+    &--x,
+    &--github,
+    &--linkedin,
+    &--mailto,
+    &--newWindow
+      &__content
         transform scale(0)
 
-    &.fifteen-cursor
-      .social-icon.fifteen
+    &--fifteen
+      &__socialIcon--fifteen
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .social-icon.fifteen
+      &--down
+        &__socialIcon--fifteen
           transform scale($clickable-scale * $click-scale)
 
-    &.x-cursor
-      .social-icon.x
+    &--x
+      &__socialIcon--x
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .social-icon.x
+      &--down
+        &__socialIcon--x
           transform scale($clickable-scale * $click-scale)
 
-    &.github-cursor
-      .social-icon.github
+    &--github
+      &__socialIcon--github
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .social-icon.github
+      &--down
+        &__socialIcon--github
           transform scale($clickable-scale * $click-scale)
 
-    &.linkedin-cursor
-      .social-icon.linkedin
+    &--linkedin
+      &__socialIcon--linkedin
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .social-icon.linkedin
+      &--down
+        &__socialIcon--linkedin
           transform scale($clickable-scale * $click-scale)
 
-    &.mailto-cursor
-      .social-icon.mailto
+    &--mailto
+      &__socialIcon--mailto
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.clicked
-        .social-icon.mailto
+      &--clicked
+        &__socialIcon--mailto
           animation send-message 1s ease-in
           animation-fill-mode forwards
 
-    &.new-window-cursor
-      .social-icon.new-window
+    &--newWindow
+      &__socialIcon--newWindow
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .social-icon.new-window
+      &--down
+        &__socialIcon--newWindow
           transform scale($clickable-scale * $click-scale)
 
-    &.scroll-cursor
-      .cursor-content
+    &--scroll
+      &__content
         transform scale(0)
 
-      .scroll-icon
+      &__scrollIcon
         transform scale($clickable-scale)
         opacity $clickable-opacity
 
-      &.down
-        .scroll-icon
+      &--down
+        &__scrollIcon
           transform scale($clickable-scale * $click-scale)
 
 @keyframes send-message
@@ -281,39 +281,39 @@ interface ClickableConfig {
 const clickableSettings: ClickableConfig[] = [
   {
     selector: 'a[href]:not([href^=mailto]):not([href^=http]):not(.active)',
-    cursorClasses: ['clickable-cursor'],
+    cursorClasses: ['AppCursor--clickable'],
   },
   {
     selector: 'p, h1, h2, h3, h4',
-    cursorClasses: ['selectable-cursor'],
+    cursorClasses: ['AppCursor--selectable'],
   },
   {
     selector: '[href^=mailto]',
-    cursorClasses: ['mailto-cursor'],
+    cursorClasses: ['AppCursor--mailto'],
   },
   {
     selector: 'a.x',
-    cursorClasses: ['x-cursor'],
+    cursorClasses: ['AppCursor--x'],
   },
   {
     selector: 'a.github',
-    cursorClasses: ['github-cursor'],
+    cursorClasses: ['AppCursor--github'],
   },
   {
     selector: 'a.linkedin',
-    cursorClasses: ['linkedin-cursor'],
+    cursorClasses: ['AppCursor--linkedin'],
   },
   {
     selector: 'a.fifteen',
-    cursorClasses: ['fifteen-cursor'],
+    cursorClasses: ['AppCursor--fifteen'],
   },
   {
     selector: '.scroll-invite',
-    cursorClasses: ['scroll-cursor'],
+    cursorClasses: ['AppCursor--scroll'],
   },
   {
     selector: 'a[href^=http]:not(.x):not(.github):not(.fifteen):not(.linkedin)',
-    cursorClasses: ['new-window-cursor'],
+    cursorClasses: ['AppCursor--newWindow'],
   },
 ];
 
@@ -369,21 +369,21 @@ const unsetTransitionOnce = ref(false);
 const clicked = ref(false);
 const down = ref(false);
 
-type ViewClass = 'hidden' | 'visible';
+type ViewClass = 'AppCursor--hidden' | 'AppCursor--visible';
 
-const viewClass = ref<ViewClass>('hidden');
+const viewClass = ref<ViewClass>('AppCursor--hidden');
 const cursorClasses = ref<string[]>([]);
-const blendModeClass = computed<`blend-${CursorBlendMode}`>(
-  () => `blend-${props.blendMode}`
+const blendModeClass = computed<`AppCursor--blend${Capitalize<CursorBlendMode>}`>(
+  () => `AppCursor--blend${capitalize(props.blendMode)}`
 );
 const classes = computed(() => [
   blendModeClass.value,
   viewClass.value,
   ...cursorClasses.value,
   {
-    transition: transition.value,
-    clicked: clicked.value,
-    down: down.value,
+    'AppCursor--transition': transition.value,
+    'AppCursor--clicked': clicked.value,
+    'AppCursor--down': down.value,
   },
 ]);
 
@@ -399,19 +399,19 @@ onMounted(() => {
       mouse.y = event.clientY;
       checkClickable(mouse.x, mouse.y);
       setCursorPosition(mouse.x, mouse.y);
-      if (viewClass.value !== 'visible') viewClass.value = 'visible';
+      if (viewClass.value !== 'AppCursor--visible') viewClass.value = 'AppCursor--visible';
     }
   });
   document.body.addEventListener('mouseenter', event => {
     if (!hasTouch.value) {
       setCursorPosition(event.clientX, event.clientY);
-      viewClass.value = 'visible';
+      viewClass.value = 'AppCursor--visible';
     }
   });
   document.body.addEventListener('mouseleave', () => {
     if (!hasTouch.value) {
       if (!clicked.value) {
-        viewClass.value = 'hidden';
+        viewClass.value = 'AppCursor--hidden';
       }
     }
   });
diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 0385cfc..14d5eca 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-.nav-wrapper(:class="navWrapperClasses")
-  .mobile-menu(:class="value ? 'show' : 'hide'")
-    svg.burger(
+.AppMenu__navWrapper(:class="navWrapperClasses")
+  .AppMenu__navWrapper__mobileMenu(:class="value ? 'AppMenu__navWrapper__mobileMenu--show' : 'AppMenu__navWrapper__mobileMenu--hide'")
+    svg.AppMenu__navWrapper__mobileMenu__burger(
       viewBox="-1 -1 32 32"
       fill="none"
       stroke-width="2"
@@ -43,9 +43,9 @@
           y2="5"
         )
   nav(:class="computedNavClasses")
-    .menu-wrapper
-      .menu
-        RouterLink.home(
+    .AppMenu__navWrapper__menuWrapper
+      .AppMenu__navWrapper__menuWrapper__menu
+        RouterLink.AppMenu__navWrapper__menuWrapper__menu__home(
           to="/"
           @click="onClickLink"
         )
@@ -65,24 +65,24 @@
           :class="curriculumClass"
           @click="onClickLink"
         ) curriculum
-      .social
-        a.x(
+      .AppMenu__navWrapper__menuWrapper__social
+        a.AppMenu__navWrapper__menuWrapper__social__x(
           href="https://x.com/ekqnp"
           target="_blank"
         ) x
-        a.github(
+        a.AppMenu__navWrapper__menuWrapper__social__github(
           href="https://github.com/qnp"
           target="_blank"
         ) github
-        a.linkedin(
+        a.AppMenu__navWrapper__menuWrapper__social__linkedin(
           href="https://www.linkedin.com/in/fran%C3%A7ois-risoud"
           target="_blank"
         ) linkedin
-        a.mailto(href="mailto:me") mail
+        a.AppMenu__navWrapper__menuWrapper__social__mailto(href="mailto:me") mail
 </template>
 
 <style lang="stylus">
-.nav-wrapper
+.AppMenu__navWrapper
   position absolute
   top 0
   left 0
@@ -103,12 +103,12 @@
     color $theme-color-white
     z-index 1
 
-    .menu-wrapper
+    .AppMenu__navWrapper__menuWrapper
       display flex
       justify-content space-between
       width 100%
 
-    .menu
+    .AppMenu__navWrapper__menuWrapper__menu
       width 60%
       max-width 428px
       display flex
@@ -123,8 +123,8 @@
         &.active
           font-weight 700
 
-    .menu
-      a.home
+    .AppMenu__navWrapper__menuWrapper__menu
+      a.AppMenu__navWrapper__menuWrapper__menu__home
         width 32px
         padding-top 1px
         margin-left -4px
@@ -136,10 +136,10 @@
           path
             fill $theme-color-white
 
-      a:not(.home)
+      a:not(.AppMenu__navWrapper__menuWrapper__menu__home)
         padding 8px
 
-    .social
+    .AppMenu__navWrapper__menuWrapper__social
       width 40%
       max-width 356px
       display flex
@@ -154,7 +154,7 @@
         transform translateY(20px)
 
     &.show
-      .menu
+      .AppMenu__navWrapper__menuWrapper__menu
         a
           animation show-menu-translate 0.5s cubic-bezier(0, 0.58, 0, 1) forwards, show-menu-opacity 1s ease-out forwards
 
@@ -162,7 +162,7 @@
           a:nth-child(5n+{num})
             animation-delay: ((num - 1) * 100)ms
 
-      .social
+      .AppMenu__navWrapper__menuWrapper__social
         a
           animation show-menu-translate 0.5s cubic-bezier(0, 0.58, 0, 1) forwards, show-menu-opacity 1s ease-out forwards
 
@@ -173,24 +173,24 @@
     &.hide
       pointer-events none
 
-      .menu,
-      .social
+      .AppMenu__navWrapper__menuWrapper__menu,
+      .AppMenu__navWrapper__menuWrapper__social
         a
           opacity 1
           transform translateY(0)
           animation hide-menu-opacity 0.3s ease-out forwards
 
   /* responsive */
-  .mobile-menu
+  .AppMenu__navWrapper__mobileMenu
     display none
 
 @media only screen and (max-width 900px)
-  .nav-wrapper
+  .AppMenu__navWrapper
     nav
-      .menu-wrapper
+      .AppMenu__navWrapper__menuWrapper
         display none
 
-    .mobile-menu
+    .AppMenu__navWrapper__mobileMenu
       display block
       position absolute
       top $theme-margin-top
@@ -199,7 +199,7 @@
       z-index 2
       mix-blend-mode hard-light
 
-      svg.burger
+      svg.AppMenu__navWrapper__mobileMenu__burger
         width 30px
         height 30px
 
@@ -232,17 +232,17 @@
               stroke-dasharray 40px 40px
               stroke-dashoffset -40px
 
-      &.show
+      &--show
         opacity 1
         transition opacity 0.4s linear
         transition-delay 0.3s
 
-      &.hide
+      &--hide
         opacity 0
         transition opacity 0.1s linear
         transition-delay 0.1s
 
-  .nav-wrapper.mobile-open
+  .AppMenu__navWrapper--mobileOpen
     bottom 0
 
     nav
@@ -266,7 +266,7 @@
         transform translateX(-130%) skew(-5deg, -5deg) scale(1.2)
         transition transform 0.3s ease-in
 
-      .menu-wrapper
+      .AppMenu__navWrapper__menuWrapper
         display flex
         flex-direction column
         align-items center
@@ -274,20 +274,20 @@
         padding-top 30px
         box-sizing border-box
 
-        .menu
+        .AppMenu__navWrapper__menuWrapper__menu
           padding-top 10%
           height 41%
 
-          a.home
+          a.AppMenu__navWrapper__menuWrapper__menu__home
             svg
               path
                 fill $theme-color-white
 
-        .social
+        .AppMenu__navWrapper__menuWrapper__social
           height 41%
 
-        .menu,
-        .social
+        .AppMenu__navWrapper__menuWrapper__menu,
+        .AppMenu__navWrapper__menuWrapper__social
           display flex
           flex-direction column
           align-items center
@@ -299,13 +299,13 @@
             display block
             text-align center
 
-          a.home
+          a.AppMenu__navWrapper__menuWrapper__menu__home
             svg
               margin-left auto
               margin-right auto
 
-    .mobile-menu
-      svg.burger
+    .AppMenu__navWrapper__mobileMenu
+      svg.AppMenu__navWrapper__mobileMenu__burger
         g
           transform-origin center center
 
@@ -342,9 +342,9 @@
               stroke-dashoffset -40px
               animation line5-cross 0.3s 1s ease-out forwards
 
-  .nav-wrapper.mobile-close
-    .mobile-menu
-      svg.burger
+  .AppMenu__navWrapper--mobileClose
+    .AppMenu__navWrapper__mobileMenu
+      svg.AppMenu__navWrapper__mobileMenu__burger
         g
           transform-origin center center
 
@@ -381,8 +381,8 @@
               animation line5-uncross 0.3s 0.2s ease-in forwards
 
 @media only screen and (max-width 400px)
-  .nav-wrapper
-    .mobile-menu
+  .AppMenu__navWrapper
+    .AppMenu__navWrapper__mobileMenu
       top $theme-margin-top-mobile
       left $theme-margin-left-right-mobile
 
@@ -390,8 +390,8 @@
       padding $theme-margin-top-mobile $theme-margin-left-right-mobile
 
 @media only screen and (max-width 340px) and (max-height 580px)
-  .nav-wrapper
-    .mobile-menu
+  .AppMenu__navWrapper
+    .AppMenu__navWrapper__mobileMenu
       top: ($theme-margin-top-mobile - 10px)
       left: ($theme-margin-left-right-mobile - 10px)
 
@@ -579,23 +579,23 @@ const curriculumClass = computed(() => ({
 function open(): void {
   animating.value = true;
   navClasses.value = [];
-  navWrapperClasses.value = ['mobile-open'];
+  navWrapperClasses.value = ['AppMenu__navWrapper--mobileOpen'];
   setTimeout(() => (navClasses.value = ['appear']), 50);
   setTimeout(() => (animating.value = false), 350);
 }
 function close(): void {
   animating.value = true;
   navClasses.value = ['disappear'];
-  setTimeout(() => (navWrapperClasses.value = ['mobile-close']), 300);
+  setTimeout(() => (navWrapperClasses.value = ['AppMenu__navWrapper--mobileClose']), 300);
   if (timer.value) clearTimeout(timer.value);
   timer.value = setTimeout(() => {
     navWrapperClasses.value = [];
     animating.value = false;
   }, 1000);
   setTimeout(() => {
-    if (navWrapperClasses.value.includes('mobile-open')) {
+    if (navWrapperClasses.value.includes('AppMenu__navWrapper--mobileOpen')) {
       navWrapperClasses.value = navWrapperClasses.value.filter(
-        c => c !== 'mobile-open'
+        c => c !== 'AppMenu__navWrapper--mobileOpen'
       );
     }
   }, 350);
diff --git a/src/components/CurriculumContent.vue b/src/components/CurriculumContent.vue
index f815858..a5e02b0 100644
--- a/src/components/CurriculumContent.vue
+++ b/src/components/CurriculumContent.vue
@@ -1,147 +1,147 @@
 <template lang="pug">
-main.curriculum(:class="classes")
-  .mask
-  #iscroll.wrapper
-    ul.content
-      li.item
-        .date
-          .year Dec 2024 – now
-        .thing
-          .occupation Head of Front-end Development
-          .location
-            a(
+main.CurriculumContent(:class="classes")
+  .CurriculumContent__mask
+  #iscroll.CurriculumContent__wrapper
+    ul.CurriculumContent__content
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year Dec 2024 – now
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Head of Front-end Development
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://fifteen.eu"
               target="_blank"
             ) Fifteen
               InlineSvg(:src="svgNewWindow")
             | , Vanves, France
-      li.item
-        .date
-          .year March 2022 – Dec 2024
-        .thing
-          .occupation Lead fullstack developer & <br/> Head of web
-          .location
-            a(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year March 2022 – Dec 2024
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Lead fullstack developer & <br/> Head of web
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://fifteen.eu"
               target="_blank"
             ) Fifteen
               InlineSvg(:src="svgNewWindow")
             | , Vanves, France
-      li.item
-        .date
-          .year June 2018 – March 2022
-        .thing
-          .occupation Fullstack web developer
-          .location
-            a(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year June 2018 – March 2022
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Fullstack web developer
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://zoov.eu"
               target="_blank"
             ) Zoov by Fifteen
               InlineSvg(:src="svgNewWindow")
             | , Vanves, France
-      li.item
-        .date
-          .year 2014 – June 2018
-        .thing
-          .occupation Freelance fullstack web developer
-          .location Paris, France
-      li.item
-        .date
-          .year 2011 – 2018
-        .thing
-          .occupation Music producer
-          .location
-            a(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year 2014 – June 2018
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Freelance fullstack web developer
+          .CurriculumContent__content__item__thing__location Paris, France
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year 2011 – 2018
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Music producer
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://soundcloud.com/bredrin-records"
               target="_blank"
             ) Bredrin Records
               InlineSvg(:src="svgNewWindow")
             | , Paris, France
-      li.item
-        .date
-          .year 2013 – 2016
-        .thing
-          .occupation PhD in Theoretical Quantum Physics
-          .location
-            a(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year 2013 – 2016
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation PhD in Theoretical Quantum Physics
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://www.ens.psl.eu"
               target="_blank"
             ) École Normale Supérieure
               InlineSvg(:src="svgNewWindow")
             | ,&nbsp;
-            a(
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://www.sorbonne-universite.fr"
               target="_blank"
             ) UPMC
               InlineSvg(:src="svgNewWindow")
             | , Paris, France
-      li.item
-        .date
-          .year 2011 – 2012
-        .thing
-          .occupation Master Degree in Theoretical, Physical & Analytical Chemistry
-          .location
-            a(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year 2011 – 2012
+        .CurriculumContent__content__item__thing
+          .CurriculumContent__content__item__thing__occupation Master Degree in Theoretical, Physical & Analytical Chemistry
+          .CurriculumContent__content__item__thing__location
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://www.ens.psl.eu"
               target="_blank"
             ) École Normale Supérieure
               InlineSvg(:src="svgNewWindow")
             | ,&nbsp;
-            a(
+            a.CurriculumContent__content__item__thing__location__link(
               href="https://www.sorbonne-universite.fr"
               target="_blank"
             ) UPMC
               InlineSvg(:src="svgNewWindow")
             | , Paris, France
-      li.item
-        .date
-          .skill-tag skills
-        .thing
-          span.category(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__skill-tag skills
+        .CurriculumContent__content__item__thing
+          span.CurriculumContent__content__item__thing__category(
             v-for="(category, i) in skillsArray"
             :key="i"
           )
-            span.type {{ category.type }}
-            span.skills
+            span.CurriculumContent__content__item__thing__category__type {{ category.type }}
+            span.CurriculumContent__content__item__thing__category__skills
               span(
                 v-for="(skill, j) in category.content"
                 :key="`${i}-${j}`"
               ) {{ skill + ", " }}
-      li.item
-        .date
-          .year clients
-        .thing.logos
-          a.logo(
+      li.CurriculumContent__content__item
+        .CurriculumContent__content__item__date
+          .CurriculumContent__content__item__date__year clients
+        .CurriculumContent__content__item__thing.CurriculumContent__content__item__thing--logos
+          a.CurriculumContent__content__item__thing__logo(
             href="http://maison-solide.fr"
             target="_blank"
           )
             InlineSvg(:src="svgSolide")
-          a.logo.datagif(
+          a.CurriculumContent__content__item__thing__logo--datagif(
             href="http://www.datagif.fr"
             target="_blank"
           )
             InlineSvg(:src="svgDatagif")
-          a.logo(
+          a.CurriculumContent__content__item__thing__logo(
             href="https://www.policestudio.fr"
             target="_blank"
           )
             InlineSvg(:src="svgPolice")
-          a.logo(
+          a.CurriculumContent__content__item__thing__logo(
             href="https://www.linkedin.com/company/habx"
             target="_blank"
           )
             InlineSvg(:src="svgHabx")
-          a.logo(
+          a.CurriculumContent__content__item__thing__logo(
             href="http://4nparis.com"
             target="_blank"
           )
             InlineSvg(:src="svg4N")
-          a.logo(
+          a.CurriculumContent__content__item__thing__logo(
             href="http://zoov.eu"
             target="_blank"
           )
             InlineSvg(:src="svgZoov")
-          a.logo(
+          a.CurriculumContent__content__item__thing__logo(
             href="http://fifteen.eu"
             target="_blank"
           )
@@ -151,7 +151,7 @@ main.curriculum(:class="classes")
 <style lang="stylus">
 $curriculum-color = #111
 
-main.curriculum
+.CurriculumContent
   position absolute
   top 0
   left 0
@@ -163,22 +163,7 @@ main.curriculum
   opacity 0
   transition opacity 0.5s linear
 
-  a:not(.logo)
-    font-weight 400
-
-    .inline-svg
-      display inline
-      margin-left 0.22em
-
-      svg
-        width 0.28em
-        height 1em
-
-        path,
-        polygon
-          fill $theme-color-white
-
-  .mask
+  &__mask
     position absolute
     top 0
     left 0
@@ -187,7 +172,7 @@ main.curriculum
     background linear-gradient(to bottom, alpha($curriculum-color, 1) 50%, alpha($curriculum-color, 0))
     z-index 1
 
-  .wrapper
+  &__wrapper
     mix-blend-mode hard-light
     position absolute
     top: $content-margin-top + $theme-margin-top
@@ -199,13 +184,13 @@ main.curriculum
     left calc(50%)
     transform translateX(-50%)
 
-  .content
+  &__content
     padding-bottom: ($theme-margin-top / 2)
     line-height 1.2
     font-family 'Raleway', sans-serif
     color $theme-color-white
 
-    .item
+    &__item
       display flex
       align-items baseline
       margin 0 0 90px $theme-margin-left-right
@@ -213,7 +198,7 @@ main.curriculum
       &:last-child
         margin 0 0 0 $theme-margin-left-right
 
-      .date
+      &__date
         text-align right
         box-sizing border-box
         padding-right 50px
@@ -226,62 +211,62 @@ main.curriculum
           &:nth-child(n+2):before
             content ' '
 
-        .since
+        &__since
           font-size 1em
 
-        .year
+        &__year
           font-size $golden-num em
 
-        .skill-tag
+        &__skill-tag
           font-size $golden-num em
           vertical-align top
 
-      .thing
+      &__thing
         max-width 650px
 
-        &.logos
+        &--logos
           display flex
           flex-wrap wrap
           align-items center
 
-        .occupation,
-        .type
+        &__occupation,
+        &__type
           line-height 1.25em
           font-weight 700
           font-size ($golden-num ** 2) em
 
-        .location
+        &__location
           font-family $the-serif, serif
           line-height 2.5em
           font-weight 400
           font-size 1em
 
-        .skills
+        &__skills
           font-family $the-serif, serif
           line-height 2.5em
           font-weight 400
           font-size 1em
 
-        .type
+        &__type
           line-height 0
 
-        .category
+        &__category
           vertical-align middle
 
-        .type,
-        .skills
+        &__type,
+        &__skills
           vertical-align middle
 
           > span
             &:first-child::before
               content ' '
 
-        .logo
+        &__logo
           display inline-block
           margin-right $golden-num em
           margin-top $golden-num em
 
-          &.datagif
+          &--datagif
             margin-bottom -8px
 
           .inline-svg
@@ -292,10 +277,10 @@ main.curriculum
             polygon
               fill white
 
-  &.show
+  &--show
     opacity 1
 
-  &.hide
+  &--hide
     opacity 0
     pointer-events none
 
@@ -316,47 +301,47 @@ main.curriculum
   width 100%
 
 @media only screen and (max-width 1120px)
-  main.curriculum
-    .content
-      .item
+  .CurriculumContent
+    &__content
+      &__item
         margin 0 $theme-margin-left-right 60px $theme-margin-left-right
 
         &:last-child
           margin 0 0 0 $theme-margin-left-right
 
 @media only screen and (max-width 1050px)
-  main.curriculum
-    .content
-      .item
-        .date
+  .CurriculumContent
+    &__content
+      &__item
+        &__date
           padding-right 30px
           width 150px
 
-          .since
+          &__since
             font-size: (1 / $golden-num)em
 
-          .year
+          &__year
             font-size 1em
 
-          .skill-tag
+          &__skill-tag
             font-size 1em
 
-        .thing
+        &__thing
           max-width 410px
 
-          .occupation,
-          .type
+          &__occupation,
+          &__type
             font-size $golden-num em
 
-          .location
+          &__location
             line-height: (2.5 / $golden-num)em
             font-size: (1 / $golden-num)em
 
-          .skills
+          &__skills
             line-height: (2.5 / $golden-num)em
             font-size: (1 / $golden-num)em
 
-          .logo
+          &__logo
             display inline-block
             margin-right 1em
             margin-top 1em
@@ -366,27 +351,27 @@ main.curriculum
                 height 1em
 
 @media only screen and (max-width 780px)
-  main.curriculum
-    .content
-      .item
+  .CurriculumContent
+    &__content
+      &__item
         display block
 
-        .date
+        &__date
           width auto
           text-align left
 
 @media only screen and (max-width 400px)
-  main.curriculum
-    .mask
+  .CurriculumContent
+    &__mask
       height 2.5 * $theme-margin-top-mobile
 
-    .wrapper
+    &__wrapper
       top: $content-margin-top-mobile + $theme-margin-top-mobile
 
-    .content
+    &__content
       padding-bottom $content-margin-top-mobile
 
-      .item
+      &__item
         margin 0 $theme-margin-left-right-mobile
         padding-bottom 35px
 
@@ -394,40 +379,40 @@ main.curriculum
           margin 0 $theme-margin-left-right-mobile
           padding-bottom 0
 
-        .thing
-          .occupation,
+        &__thing
+          &__occupation,
           break-word nowrap
             line-height 1.1em
             font-size: (0.95 * $golden-num)em
 
-          .location
+          &__location
             margin-top 4px
 
-          .category.type
+          &__category__type
             line-height: (0.9 / $golden-num)em
             font-size: (0.95 * $golden-num)em
 
-          .skills
+          &__skills
             line-height: (0.9 / $golden-num)em
 
-          .logo
+          &__logo
             margin-top 0.5em
 
     .iScrollVerticalScrollbar
       left: ($theme-margin-left-right-mobile / 2 - 3px)
 
 @media only screen and (max-width 340px) and (max-height 580px)
-  main.curriculum
-    .mask
+  .CurriculumContent
+    &__mask
       height 2.5 * ($theme-margin-top-mobile - 10px)
 
-    .wrapper
+    &__wrapper
       top ($content-margin-top-mobile - 10px) + ($theme-margin-top-mobile - 10px)
 
-    .content
+    &__content
       padding-bottom: ($content-margin-top-mobile - 10px)
 
-      .item
+      &__item
         margin 0 ($theme-margin-left-right-mobile - 10px)
 
         &:last-child
@@ -473,8 +458,8 @@ const emit = defineEmits<{
 }>();
 
 const classes = computed(() => ({
-  show: props.show,
-  hide: !props.show,
+  'CurriculumContent--show': props.show,
+  'CurriculumContent--hide': !props.show,
 }));
 
 let myScroll: IScroll | null = null;
diff --git a/src/components/IntroLogo.vue b/src/components/IntroLogo.vue
index 354a87e..5c325c1 100644
--- a/src/components/IntroLogo.vue
+++ b/src/components/IntroLogo.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-InlineSvg.intro-logo(
+InlineSvg.IntroLogo(
   :class="classes"
   :src="svgEk"
 )
@@ -9,7 +9,7 @@ InlineSvg.intro-logo(
 $beat-scale = 1.2
 $logo-w = 2.5em
 
-.intro-logo
+.IntroLogo
   width $logo-w
   position absolute
   top 50%
@@ -21,10 +21,10 @@ $logo-w = 2.5em
 
   svg
     width $logo-w
-    animation beating 15s linear infinite
+    animation IntroLogo__beating 15s linear infinite
     animation-delay 10s
 
-  &.show
+  &--show
     pointer-events auto
     opacity 1
 
@@ -36,7 +36,7 @@ $logo-w = 2.5em
       transition fill 0.5s linear
       fill $theme-color-dark-white
 
-@keyframes beating
+@keyframes IntroLogo__beating
   0%,
   49%,
   51%,
@@ -62,7 +62,7 @@ export interface IntroLogoProps {
 const props = defineProps<IntroLogoProps>();
 
 const classes = computed(() => ({
-  show: props.show,
-  clickable: props.show,
+  'IntroLogo--show': props.show,
+  'IntroLogo--clickable': props.show,
 }));
 </script>
diff --git a/src/components/IntroText.vue b/src/components/IntroText.vue
index ed2a54d..a1b97cc 100644
--- a/src/components/IntroText.vue
+++ b/src/components/IntroText.vue
@@ -1,15 +1,15 @@
 <template lang="pug">
-.intro-text(:class="classes")
-  h1
-    span.name {{ notFound ? '404' : 'François Risoud' }}
-    span.type &nbsp;{{ notFound ? 'Not Found' : 'Portfolio' }}
+IntroText(:class="classes")
+  h1.IntroText__title
+    span.IntroText__title__name {{ notFound ? '404' : 'François Risoud' }}
+    span.IntroText__title__type &nbsp;{{ notFound ? 'Not Found' : 'Portfolio' }}
     br(v-if="notFound")
-    span.emoji.reverse(v-if="notFound") づ
-    span.emoji(v-if="notFound") (｡◉‿◉｡)づ
+    span.IntroText__title__emoji--reverse(v-if="notFound") づ
+    span.IntroText__title__emoji(v-if="notFound") (｡◉‿◉｡)づ
 </template>
 
 <style lang="stylus">
-.intro-text
+.IntroText
   position absolute
   height 20px
   margin-top $theme-margin-top
@@ -21,7 +21,7 @@
   justify-content center
   pointer-events none
 
-  h1
+  &__title
     font-family 'Raleway', sans-serif
     font-size 1em
     color $theme-color-black
@@ -32,29 +32,29 @@
     line-height $golden-num
     opacity 0
 
-    .name
+    &__name
       font-weight 700
 
-    .type
+    &__type
       font-family $the-serif, serif
       font-weight 400
 
-    .emoji
+    &__emoji
       opacity 0
       font-weight 400
       transition opacity 0.5s linear
 
-    .reverse
+    &__emoji--reverse
       display inline-block
       transform scaleX(-1)
 
-  &.show
+  &--show
     pointer-events auto
 
-    h1
+    &__title
       opacity 1
 
-      .emoji
+      &__emoji
         opacity 1
         transition opacity 1s linear
         transition-delay 2s
@@ -77,6 +77,6 @@ const props = withDefaults(defineProps<IntroTextProps>(), {
 });
 
 const classes = computed(() => ({
-  show: props.show,
+  'IntroText--show': props.show,
 }));
 </script>
diff --git a/src/components/PhysicalBubble.vue b/src/components/PhysicalBubble.vue
index 1909909..15ee999 100644
--- a/src/components/PhysicalBubble.vue
+++ b/src/components/PhysicalBubble.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.physical-bubble(ref="elementRef")
+PhysicalBubble(ref="elementRef")
 </template>
 
 <style lang="stylus">
@@ -11,7 +11,7 @@ $line45deg-translate = -($circle-radius + $line45deg-length / 2) * cos(45deg)
 $show-color = $theme-color-pink
 $particle-project-circle-radius = 27px
 
-.physical-bubble
+.PhysicalBubble
   display block
   position fixed
   top 0
@@ -21,10 +21,10 @@ $particle-project-circle-radius = 27px
   opacity 1
   transition opacity 0.3s linear
 
-  &.hide
+  &--hide
     opacity 0
 
-  .isolated-particle-view
+  &__isolatedParticleView
     width 2 * $circle-radius
     height 2 * $circle-radius
     // background-color rgba(155,155,0,0.2)
@@ -34,11 +34,11 @@ $particle-project-circle-radius = 27px
     opacity 0
     transition opacity 0.6s linear
 
-    &.show
+    &--show
       opacity 1
       transition opacity 0.3s linear
 
-    .text
+    &__text
       width 2 * $circle-radius - 40px
       font-size 0.7em
       line-height 1.4
@@ -52,7 +52,7 @@ $particle-project-circle-radius = 27px
       transform translateY(-50%)
       margin-left - @width - $line-length - $text-line-spacing
 
-    .line
+    &__line
       width $line-length
       height 1px
       background-color $show-color
@@ -61,7 +61,7 @@ $particle-project-circle-radius = 27px
       left 50%
       margin-left: (- $line-length)
 
-  .project-particle-view
+  &__projectParticleView
     width 2 * $circle-radius
     height 2 * $circle-radius
     position fixed
@@ -70,10 +70,10 @@ $particle-project-circle-radius = 27px
     opacity 0
     transition opacity 0.3s linear
 
-    &.show
+    &--show
       opacity 1
 
-    .circle
+    &__circle
       width 2 * $particle-project-circle-radius
       height 2 * $particle-project-circle-radius
       position absolute
@@ -86,15 +86,15 @@ $particle-project-circle-radius = 27px
       border-radius $particle-project-circle-radius
 
 body:not(.has-touch)
-  .physical-bubble
-    .project-particle-view
-      .circle:hover
+  .PhysicalBubble
+    &__projectParticleView
+      &__circle:hover
         background-color alpha($theme-color-dark-teal, 0.6)
 
 body.has-touch
-  .physical-bubble
-    .project-particle-view
-      .circle.hover
+  .PhysicalBubble
+    &__projectParticleView
+      &__circle.hover
         transition all 0.2s linear
         background-color alpha($theme-color-pink, 0.6)
         border 5px solid $theme-color-pink
@@ -290,9 +290,9 @@ watch(
   () => props.hide,
   newVal => {
     if (newVal) {
-      elementRef.value?.classList.add('hide');
+      elementRef.value?.classList.add('PhysicalBubble--hide');
     } else {
-      elementRef.value?.classList.remove('hide');
+      elementRef.value?.classList.remove('PhysicalBubble--hide');
     }
   }
 );
diff --git a/src/components/ProjectContent.vue b/src/components/ProjectContent.vue
index 62c85aa..8e7e878 100644
--- a/src/components/ProjectContent.vue
+++ b/src/components/ProjectContent.vue
@@ -1,28 +1,28 @@
 <template lang="pug">
-main.project(
+main.ProjectContent(
   ref="elementRef"
   :class="classes"
   :style="computedBlendModeStyle"
 )
-  .image-wrapper(:style="computedImageWrapperStyle")
-    .image(:style="computedImageStyle")
-  .infos(:style="computedInfosStyle")
+  .ProjectContent__imageWrapper(:style="computedImageWrapperStyle")
+    .ProjectContent__image(:style="computedImageStyle")
+  .ProjectContent__infos(:style="computedInfosStyle")
     a(
       :href="selectedProject?.url"
       target="_blank"
     )
-      h1 {{ selectedProject?.title }} - {{ selectedProject?.type }}
+      h1.ProjectContent__infos__title {{ selectedProject?.title }} - {{ selectedProject?.type }}
         InlineSvg(:src="svgNewWindow")
 
-    h2(v-if="selectedProject?.date") {{ selectedProject.date }}
-    h2(
+    h2.ProjectContent__infos__date(v-if="selectedProject?.date") {{ selectedProject.date }}
+    h2.ProjectContent__infos__techInfo(
       v-for="(infoLine, index) in selectedProject?.techInfos"
       :key="index"
     ) {{ infoLine }}
 </template>
 
 <style lang="stylus">
-main.project
+.ProjectContent
   position absolute
   top 0
   left 0
@@ -31,7 +31,7 @@ main.project
   opacity 0
   transition opacity 1s ease-in
 
-  .image-wrapper
+  &__imageWrapper
     position absolute
     top 0
     left 0
@@ -41,7 +41,7 @@ main.project
     opacity 1
     transition opacity 0.5s linear
 
-  .image
+  &__image
     position absolute
     top 0
     left 0
@@ -51,7 +51,7 @@ main.project
     background-size cover
     background-position center center
 
-  .infos
+  &__infos
     position absolute
     left $theme-margin-left-right
     bottom $theme-margin-top
@@ -60,12 +60,13 @@ main.project
     font-family 'Raleway', sans-serif
     color $theme-color-white
 
-    h1
+    &__title
       white-space nowrap
       font-weight 700
       font-size $golden-num em
 
-    h2
+    &__date,
+    &__techInfo
       font-weight 400
       font-size 1em
       font-family $the-serif, serif
@@ -73,17 +74,17 @@ main.project
     .inline-svg
       display none
 
-  &.show
+  &--show
     opacity 1
     transition opacity 0.2s ease-in
 
-  &.transition
-    .image-wrapper
+  &--transition
+    &__imageWrapper
       opacity 0
 
 body.has-touch
-  main.project
-    .infos
+  .ProjectContent
+    &__infos
       a
         pointer-events all
 
@@ -100,13 +101,13 @@ body.has-touch
               fill $theme-color-white
 
 @media only screen and (max-width 1100px)
-  main.project
-    .infos
+  .ProjectContent
+    &__infos
       bottom $theme-margin-top-mobile
 
 @media only screen and (max-width 660px)
-  main.project
-    .infos
+  .ProjectContent
+    &__infos
       top auto
       left 0
       right 0
@@ -114,48 +115,51 @@ body.has-touch
       padding ($theme-margin-top-mobile - 10px) $theme-margin-left-right $theme-margin-top-mobile
 
   body.has-touch
-    main.project
-      .infos
+    .ProjectContent
+      &__infos
         padding ($theme-margin-top-mobile / 2 - 5px) $theme-margin-left-right ($theme-margin-top-mobile / 2)
 
-        h1
+        &__title
           font-size 1em
 
-        h2
+        &__date,
+        &__techInfo
           font-size: (1 / $golden-num-sqrt)em
 
 @media only screen and (max-width 400px)
   body.has-touch
-    main.project
-      .infos
+    .ProjectContent
+      &__infos
         padding ($theme-margin-top-mobile / 2 - 5px) $theme-margin-left-right-mobile ($theme-margin-top-mobile / 2)
 
-        h1
+        &__title
           font-size: (1 / $golden-num-sqrt)em
 
-        h2
+        &__date,
+        &__techInfo
           font-size: (1 / $golden-num)em
 
 @media only screen and (max-width 340px)
   body.has-touch
-    main.project
-      .infos
-        h1
+    .ProjectContent
+      &__infos
+        &__title
           font-size: (1 / $golden-num)em
           margin-bottom 2px
 
-        h2
+        &__date,
+        &__techInfo
           font-size: (1 / $golden-num)em
 
 @media only screen and (min-width 661px) and (max-height 700px)
-  main.project
-    .infos
+  .ProjectContent
+    &__infos
       bottom: ($theme-margin-top / 2)
 
 @media only screen and (max-width 340px) and (max-height 580px)
   body.has-touch
-    main.project
-      .infos
+    .ProjectContent
+      &__infos
         padding ($theme-margin-top-mobile / 2 - 10px) ($theme-margin-left-right-mobile - 10px) ($theme-margin-top-mobile / 2 - 10px)
 </style>
 
@@ -215,8 +219,8 @@ const radius = ref(0);
 const newPos = ref({ x: 0, y: 0 });
 
 const classes = computed(() => ({
-  show: props.show,
-  transition: transition.value,
+  'ProjectContent--show': props.show,
+  'ProjectContent--transition': transition.value,
 }));
 
 const computedImageStyle = computed<CSSProperties>(() => {
diff --git a/src/index.html b/src/index.html
index 7e284a8..89c865f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,11 +18,11 @@
     <title>Francois Risoud Portfolio</title>
 
     <style>
-      html.js .no-js-info {
+      html.js .NoJsInfo {
         display: none;
       }
 
-      html.no-js .no-js-info {
+      html.no-js .NoJsInfo {
         display: block;
         text-align: center;
         margin-top: 100px;
@@ -35,7 +35,7 @@
         background-color: #1a33ff;
       }
 
-      .loader-wrapper {
+      .LoaderWrapper {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -44,18 +44,18 @@
         transition: opacity 0.2s linear;
       }
 
-      .loader {
+      .LoaderWrapper__loader {
         width: 75px;
         height: 75px;
         transform-origin: center center;
-        animation: loader-breath 2s ease infinite alternate;
+        animation: LoaderWrapper__loader__breath 2s ease infinite alternate;
       }
 
-      body.mounted .loader-wrapper {
+      body.mounted .LoaderWrapper {
         opacity: 0;
       }
 
-      @keyframes loader-breath {
+      @keyframes LoaderWrapper__loader__breath {
         0% {
           transform: scale(0.1);
         }
@@ -71,12 +71,12 @@
     </script>
   </head>
   <body>
-    <div class="no-js-info">
+    <div class="NoJsInfo">
       <h1>Sorry, this website needs javascript 〴⋋_⋌〵</h1>
     </div>
 
-    <div class="loader-wrapper">
-      <div class="loader">
+    <div class="LoaderWrapper">
+      <div class="LoaderWrapper__loader">
         <svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
           <circle fill="#001433" cx="1" cy="1" r="1" />
         </svg>