From 2fb67d9757abd3c7bbb5a9293f2e1f49d637cfa8 Mon Sep 17 00:00:00 2001
From: Sahil David <sahildavid.dev@gmail.com>
Date: Sat, 12 Jul 2025 16:40:29 +0100
Subject: [PATCH] refactor(text-animations): convert GlitchText from CSS file
 to Tailwind classes

- Remove external GlitchText.css file dependency
- Convert all styles to Tailwind utility classes
- Maintain identical functionality and visual effects
- Improve component maintainability and consistency
---
 .../TextAnimations/GlitchText/GlitchText.css  | 120 --------------
 .../TextAnimations/GlitchText/GlitchText.vue  | 148 +++++++++++++++++-
 2 files changed, 145 insertions(+), 123 deletions(-)
 delete mode 100644 src/content/TextAnimations/GlitchText/GlitchText.css

diff --git a/src/content/TextAnimations/GlitchText/GlitchText.css b/src/content/TextAnimations/GlitchText/GlitchText.css
deleted file mode 100644
index faff805..0000000
--- a/src/content/TextAnimations/GlitchText/GlitchText.css
+++ /dev/null
@@ -1,120 +0,0 @@
-.glitch {
-  color: #fff;
-  font-size: clamp(2rem, 10vw, 8rem);
-  white-space: nowrap;
-  font-weight: 900;
-  position: relative;
-  margin: 0 auto;
-  user-select: none;
-  cursor: pointer;
-}
-
-.glitch::after,
-.glitch::before {
-  content: attr(data-text);
-  position: absolute;
-  top: 0;
-  color: #fff;
-  background-color: #060010;
-  overflow: hidden;
-  clip-path: inset(0 0 0 0);
-}
-
-.glitch:not(.enable-on-hover)::after {
-  left: 10px;
-  text-shadow: var(--after-shadow, -10px 0 red);
-  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
-}
-.glitch:not(.enable-on-hover)::before {
-  left: -10px;
-  text-shadow: var(--before-shadow, 10px 0 cyan);
-  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
-}
-
-.glitch.enable-on-hover::after,
-.glitch.enable-on-hover::before {
-  content: '';
-  opacity: 0;
-  animation: none;
-}
-
-.glitch.enable-on-hover:hover::after {
-  content: attr(data-text);
-  opacity: 1;
-  left: 10px;
-  text-shadow: var(--after-shadow, -10px 0 red);
-  animation: animate-glitch var(--after-duration, 3s) infinite linear alternate-reverse;
-}
-.glitch.enable-on-hover:hover::before {
-  content: attr(data-text);
-  opacity: 1;
-  left: -10px;
-  text-shadow: var(--before-shadow, 10px 0 cyan);
-  animation: animate-glitch var(--before-duration, 2s) infinite linear alternate-reverse;
-}
-
-@keyframes animate-glitch {
-  0% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  5% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  10% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  15% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  20% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  25% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  30% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  35% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  40% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  45% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  50% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  55% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  60% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  65% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  70% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  75% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  80% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  85% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  90% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  95% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  100% {
-    clip-path: inset(30% 0 40% 0);
-  }
-}
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.vue b/src/content/TextAnimations/GlitchText/GlitchText.vue
index 934c41e..b511ba4 100644
--- a/src/content/TextAnimations/GlitchText/GlitchText.vue
+++ b/src/content/TextAnimations/GlitchText/GlitchText.vue
@@ -7,7 +7,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { CSSProperties } from 'vue';
-import './GlitchText.css';
 
 interface GlitchTextProps {
   children: string;
@@ -40,8 +39,151 @@ const inlineStyles = computed(
   })
 );
 
+const baseClasses = [
+  // Base styling
+  'text-white',
+  'font-black',
+  'whitespace-nowrap',
+  'relative',
+  'mx-auto',
+  'select-none',
+  'cursor-pointer',
+  'text-[clamp(2rem,10vw,8rem)]',
+
+  // Pseudo-elements base
+  'before:content-[attr(data-text)]',
+  'before:absolute',
+  'before:top-0',
+  'before:text-white',
+  'before:bg-[#060010]',
+  'before:overflow-hidden',
+  'before:[clip-path:inset(0_0_0_0)]',
+
+  'after:content-[attr(data-text)]',
+  'after:absolute',
+  'after:top-0',
+  'after:text-white',
+  'after:bg-[#060010]',
+  'after:overflow-hidden',
+  'after:[clip-path:inset(0_0_0_0)]'
+];
+
+const normalGlitchClasses = [
+  // After pseudo-element for normal mode
+  'after:left-[10px]',
+  'after:[text-shadow:var(--after-shadow,-10px_0_red)]',
+  'after:[animation:animate-glitch_var(--after-duration,3s)_infinite_linear_alternate-reverse]',
+
+  // Before pseudo-element for normal mode
+  'before:left-[-10px]',
+  'before:[text-shadow:var(--before-shadow,10px_0_cyan)]',
+  'before:[animation:animate-glitch_var(--before-duration,2s)_infinite_linear_alternate-reverse]'
+];
+
+const hoverOnlyClasses = [
+  // Hide pseudo-elements by default
+  'before:content-[""]',
+  'before:opacity-0',
+  'before:[animation:none]',
+  'after:content-[""]',
+  'after:opacity-0',
+  'after:[animation:none]',
+
+  // Show and animate on hover
+  'hover:before:content-[attr(data-text)]',
+  'hover:before:opacity-100',
+  'hover:before:left-[-10px]',
+  'hover:before:[text-shadow:var(--before-shadow,10px_0_cyan)]',
+  'hover:before:[animation:animate-glitch_var(--before-duration,2s)_infinite_linear_alternate-reverse]',
+
+  'hover:after:content-[attr(data-text)]',
+  'hover:after:opacity-100',
+  'hover:after:left-[10px]',
+  'hover:after:[text-shadow:var(--after-shadow,-10px_0_red)]',
+  'hover:after:[animation:animate-glitch_var(--after-duration,3s)_infinite_linear_alternate-reverse]'
+];
+
 const computedClasses = computed(() => {
-  const hoverClass = props.enableOnHover ? 'enable-on-hover' : '';
-  return `glitch ${hoverClass} ${props.className}`.trim();
+  const classes = [...baseClasses];
+
+  if (props.enableOnHover) {
+    classes.push(...hoverOnlyClasses);
+  } else {
+    classes.push(...normalGlitchClasses);
+  }
+
+  if (props.className) {
+    classes.push(props.className);
+  }
+
+  return classes.join(' ');
 });
 </script>
+
+<style>
+@keyframes animate-glitch {
+  0% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  5% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  10% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  15% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  20% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  25% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  30% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  35% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  40% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  45% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  50% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  55% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  60% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  65% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  70% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  75% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  85% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  90% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  95% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  100% {
+    clip-path: inset(30% 0 40% 0);
+  }
+}
+</style>