minor changes #4

ukorvl · Jul 14, 2023 · ab708e6 · ab708e6
1 parent d551742
commit ab708e6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/components/Footer/Location.tsx b/components/Footer/Location.tsx
@@ -6,7 +6,7 @@ import envConfig from '@/lib/env/envConfig';
 const {LOCATION_ADDRESS_TEXT, LOCATION_GOOGLE_MAPS_LINK} = envConfig;
 
 const containerCn = clsx('flex', 'justify-center', 'flex-nowrap', 'gap-4');
-const addressCn = clsx('non-italic');
+const addressCn = clsx('not-italic');
 const linkCn = clsx('animated-link');
 
 /**

diff --git a/components/Title/Title.tsx b/components/Title/Title.tsx
@@ -2,12 +2,19 @@
 
 import {memo, useRef} from 'react';
 import {Variants, motion} from 'framer-motion';
+import clsx from 'clsx';
 import useTitleDynamicBackground from './useTitleDynamicBackground';
 
-const titleCn = 'font-light text-9xl text-transparent bg-clip-text';
-const subtitleCn = 'text-2xl font-light tracking-widest text-center';
-const titleContainerCn =
-  'font-sans select-none bg-gradient-to-r from-accent3 to-accent1 bg-clip-text';
+const titleCn = clsx('font-light', 'text-9xl', 'text-transparent', 'bg-clip-text', 'z-10');
+const subtitleCn = clsx('text-2xl', 'font-light', 'tracking-widest', 'text-center');
+const titleContainerCn = clsx(
+  'font-sans',
+  'select-none',
+  'bg-gradient-to-r',
+  'from-accent3',
+  'to-accent1',
+  'bg-clip-text',
+);
 
 const variants: Variants = {
   visible: {opacity: 1},

diff --git a/components/Title/useTitleDynamicBackground.ts b/components/Title/useTitleDynamicBackground.ts
@@ -9,7 +9,7 @@ export type ScrollHandler = (props: {scrollTop?: number}) => void;
 const delay = 50;
 
 /**
- * Hook to change title background on mouse move over element.
+ * Hook to change title background on mouse move.
  * @param ref Ref.
  */
 export default function useTitleDynamicBackground<T extends HTMLElement>(ref: RefObject<T>) {
@@ -20,14 +20,15 @@ export default function useTitleDynamicBackground<T extends HTMLElement>(ref: Re
       return;
     }
 
-    element.style.backgroundColor = 'white';
-    element.style.backgroundSize = '0';
+    element.style.backgroundPosition = '-25% 70%';
+
     const handleResize = debounce((e: MouseEvent) => {
-      element.style.backgroundColor = 'red';
+      //const {clientX, clientY} = e;
+      element.style.backgroundSize = '0 30%';
     }, delay);
 
-    window.addEventListener('mouseover', handleResize);
+    document.addEventListener('mouseover', handleResize);
 
-    return () => window.removeEventListener('mouseover', handleResize);
+    return () => document.removeEventListener('mouseover', handleResize);
   }, [ref]);
 }