feat(): Adding all the sections navigation

Author: ar1603

public/cursor.png

@@ -13,7 +13,7 @@ const LinkButton = ({
   fontSize,
 }: LinkButtonProps) => {
   const ref = useRef<HTMLButtonElement>(null);
-  const { toggle, setCursorInsets } = useCursor();
+  const { setCursorInsets } = useCursor();
   const [isHovered, setIsHovered] = useState(false);
 
   const onMouseEnter = () => {
@@ -28,14 +28,12 @@ const LinkButton = ({
     setTimeout(() => {
       setCursorInsets({ height, width, top, left, borderRadius: '5px' });
     }, 0);
-    toggle();
     setIsHovered(true);
   };
 
   const onMouseLeave = () => {
     setCursorInsets(undefined);
     setIsHovered(false);
-    toggle();
   };
 
   const translationProps = isHovered

src/components/Button/LinkButton/LinkButton.tsx

@@ -1,5 +1,6 @@
 import { Box, Heading } from '@chakra-ui/react';
 import { Cover } from './Cover';
+import { ShinyText } from '../ShinyText';
 
 const CoverText = ({
   text,
@@ -15,8 +16,8 @@ const CoverText = ({
       <Heading className="text-2xl md:text-4xl lg:text-6xl font-semibold max-w-7xl mx-auto  mt-6 relative z-20 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-neutral-700 to-neutral-700 dark:from-neutral-800 dark:via-white dark:to-white">
         <h2 className="text-xl md:text-3xl lg:text-4xl pb-6">{text}</h2>
         <Cover>{highlightedText}</Cover>
-        <h2 className="text-xl md:text-3xl lg:text-4xl pt-6">{role}</h2>
       </Heading>
+      <ShinyText className="text-xl md:text-3xl lg:text-6xl pt-2" text={role} />
     </Box>
   );
 };

src/components/CoverText/CoverText.tsx

@@ -1,8 +1,10 @@
 import { createContext, useContext, useState } from 'react';
-import FollowCursor from './Cursor';
+import FollowCursor from './FollowCursor';
+import SplashCursor from './SplashCursor';
+
+export type CursorType = 'follow' | 'splash';
 
 export const CursorContext = createContext<{
-  cursorState: boolean;
   insets:
     | {
         height: number;
@@ -12,7 +14,7 @@ export const CursorContext = createContext<{
         borderRadius?: string;
       }
     | undefined;
-  toggle: () => void;
+  setCursorType: (type: CursorType) => void;
   setCursorInsets: (
     args:
       | {
@@ -25,10 +27,9 @@ export const CursorContext = createContext<{
       | undefined,
   ) => void;
 }>({
-  cursorState: true,
   insets: undefined,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  toggle: () => {},
+  setCursorType: (type: CursorType) => {},
   setCursorInsets: (
     args:
       | {
@@ -44,7 +45,7 @@ export const CursorContext = createContext<{
 });
 
 const CursorProvider = ({ children }: { children: React.ReactNode }) => {
-  const [cursorState, setCursorState] = useState(true);
+  const [cursorType, setCursorTypeState] = useState<CursorType>('follow');
   const [insets, setCursorSize] = useState<
     | {
         height: number;
@@ -56,8 +57,8 @@ const CursorProvider = ({ children }: { children: React.ReactNode }) => {
     | undefined
   >(undefined);
 
-  const toggle = () => {
-    setCursorState((prev) => !prev);
+  const setCursorType = (type: CursorType) => {
+    setCursorTypeState(type);
   };
 
   const setCursorInsets = (
@@ -75,9 +76,13 @@ const CursorProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <CursorContext.Provider
-      value={{ cursorState, insets, toggle, setCursorInsets }}
+      value={{
+        insets,
+        setCursorType,
+        setCursorInsets,
+      }}
     >
-      <FollowCursor />
+      {cursorType === 'splash' ? <SplashCursor /> : <FollowCursor />}
       {children}
     </CursorContext.Provider>
   );

src/components/Cursor/CursorProvider.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
-import { useSpringMousePosition } from '../../hooks';
+import { useMousePositions, useSpringMousePosition } from '../../hooks';
 import { useCursor } from './CursorProvider';
 
 const FollowCursor = () => {
@@ -9,8 +9,8 @@ const FollowCursor = () => {
   const { x, y } = useSpringMousePosition(ref);
 
   const { width, height, top, left, borderRadius } = insets ?? {
-    width: 56,
-    height: 56,
+    width: 32,
+    height: 32,
     top: 0,
     left: 0,
     borderRadius: '5px',
@@ -25,7 +25,6 @@ const FollowCursor = () => {
 
   useEffect(() => {
     // Initial position
-
     ref.current!.style.transform = `translate(${x}px, ${y}px)`;
   }, [x, y, insets]);