refact : component file structure refactored

src/App.js

@@ -1,9 +1,9 @@
 import TransitionColorProvider from '@context/TransitionColorContext';
 import Page404 from '@pages/404';
 import { AboutUs } from '@pages/AboutUs';
-import ClubsPage from '@pages/Clubs';
-import DeveloperPage from '@pages/Developer';
-import GooglePage from '@pages/Google';
+import { ClubsPage } from '@pages/Clubs';
+import { DeveloperPage } from '@pages/Developer';
+import GooglePage from '@pages/Google/GooglePage';
 import Home from '@pages/Home';
 import StudentPage from '@pages/Student';
 import { AnimatePresence } from 'framer-motion';

src/components/GithubCursor/GithubCursor.jsx

@@ -1,6 +1,6 @@
 import { ReactComponent as GithubIcon } from '@assets/images/icons/github.svg';
 import { MouseContext } from '@context/MouseContext';
-import useMousePosition from '@hooks/useMousePosition/useMousePosition';
+import { useMousePosition } from '@hooks';
 import { memo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 

src/components/Head/Head.jsx

@@ -1,4 +1,4 @@
-import useIdle from '@hooks/useIdle/useIdle';
+import { useIdle } from '@hooks';
 import { Helmet } from 'react-helmet-async';
 
 function Head() {

src/components/Header/MainHeader/MainHeader.jsx

@@ -2,7 +2,7 @@ import { DelayedLink } from '@components/DelayedLink';
 import { DropdownIcon } from '@components/DropdownIcon';
 import { TRANSITION_DURATION } from '@constants/constants';
 import { TransitionColorContext } from '@context/TransitionColorContext';
-import useComponentVisible from '@hooks/useComponentVisible/useComponentVisible';
+import { useComponentVisible } from '@hooks';
 import DropdownList from '@pages/Home/Hero/components/DropdownList';
 import { useContext } from 'react';
 import { useLocomotiveScroll } from 'react-locomotive-scroll';

src/hooks/index.js

@@ -1,17 +1,18 @@
-export { useCanvas } from './useCanvas';
-export { useComponentVisible } from './useComponentVisible';
-export { useGoogleAnalytics } from './useGoogleAnalytics';
-export { useHandleAnimationScroll } from './useHandleAnimationScroll';
-export { useHover } from './useHover';
-export { useIdle } from './useIdle';
-export { useIntersectionObserver } from './useIntersectionObserver';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-export { useKeyPress } from './useKeyPress';
-export { useLocomotiveScrollPosition } from './useLocomotiveScrollPosition';
-export { useMediaQuery } from './useMediaQuery';
-export { useMount } from './useMount';
-export { useOnScreen } from './useOnScreen';
-export { useScrollPosition } from './useScrollPosition';
-export { useTimeout } from './useTimeout';
-export { useUnmount } from './useUnmount';
-export { useWindowSize } from './useWindowSize';
+export * as useCanvas from './useCanvas';
+export * as useComponentVisible from './useComponentVisible';
+export * as useGoogleAnalytics from './useGoogleAnalytics';
+export * as useHandleAnimationScroll from './useHandleAnimationScroll';
+export * as useHover from './useHover';
+export * as useIdle from './useIdle';
+export * as useIntersectionObserver from './useIntersectionObserver';
+export * as useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+export * as useKeyPress from './useKeyPress';
+export * as useLocomotiveScrollPosition from './useLocomotiveScrollPosition';
+export * as useMediaQuery from './useMediaQuery';
+export * as useMount from './useMount';
+export * as useMousePosition from './useMousePosition';
+export * as useOnScreen from './useOnScreen';
+export * as useScrollPosition from './useScrollPosition';
+export * as useTimeout from './useTimeout';
+export * as useUnmount from './useUnmount';
+export * as useWindowSize from './useWindowSize';

src/hooks/useGoogleAnalytics/useGoogleAnalytics.js

@@ -1,8 +1,9 @@
-import useMount from '@hooks/useMount/useMount';
 import { useEffect, useState } from 'react';
 import ReactGA from 'react-ga4';
 import { useLocation } from 'react-router-dom';
 
+import { useMount } from '..';
+
 const useGoogleAnalytics = () => {
   const location = useLocation();
   const [initialized, setInitialized] = useState(false);

src/hooks/useTimeout/useTimeout.js

@@ -1,4 +1,4 @@
-import useIsomorphicLayoutEffect from '@hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '@hooks';
 import { useEffect, useRef } from 'react';
 
 function useTimeout(cb, delay) {

src/pages/AboutUs/AboutUs.jsx

@@ -1,8 +1,7 @@
 import { LoadingScreen } from '@components/LoadingScreen';
 import { LocomotiveScrollProvider } from '@context';
 import { TransitionColorContext } from '@context/TransitionColorContext';
-import useHandleAnimationScroll from '@hooks/useHandleAnimationScroll/useHandlerAnimationScroll';
-import useMount from '@hooks/useMount/useMount';
+import { useHandleAnimationScroll, useMount } from '@hooks';
 import { useContext, useRef } from 'react';
 import styled, { useTheme } from 'styled-components';
 

src/pages/AboutUs/Hero/Hero.jsx

@@ -1,5 +1,4 @@
-import useLocomotiveScrollPosition from '@hooks/useLocomotiveScrollPosition/useLocomotiveScrollPosition';
-import useWindowSize from '@hooks/useWindowSize/useWindowSize';
+import { useLocomotiveScrollPosition, useWindowSize } from '@hooks';
 import styled from 'styled-components';
 
 import { BackgroundVideo, GoBackArrow, SearchBar } from '../components';

src/pages/Clubs/Banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './Banner';

src/pages/Clubs/ClubsPage.jsx

@@ -0,0 +1,64 @@
+import { LoadingScreen } from '@components/LoadingScreen';
+import { LocomotiveScrollProvider } from '@context';
+import { TransitionColorContext } from '@context/TransitionColorContext';
+import { useHandleAnimationScroll, useMount } from '@hooks';
+import { useContext, useRef } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import Banner from './Banner/Banner';
+import { GalleryComponent } from './GalleryComponent';
+
+function ClubsPage() {
+  const { handleAnimationStart, handleAnimationComplete } = useHandleAnimationScroll();
+  const { transitionColorHandler } = useContext(TransitionColorContext);
+  const { color } = useTheme();
+  const containerRef = useRef(null);
+
+  useMount(() => {
+    transitionColorHandler(color.yellow);
+  });
+
+  return (
+    <>
+      <LocomotiveScrollProvider.Horizontal containerRef={containerRef}>
+        <Container data-scroll-container ref={containerRef} id="#fixed-element-clubs-container">
+          <Banner />
+          <GalleryPadding data-scroll-section />
+          <GalleryComponent />
+        </Container>
+      </LocomotiveScrollProvider.Horizontal>
+      <LoadingScreen
+        handleAnimationStart={handleAnimationStart}
+        handleAnimationComplete={handleAnimationComplete}
+      />
+    </>
+  );
+}
+
+export default ClubsPage;
+
+const Container = styled.main`
+  width: fit-content;
+  height: 100vh;
+
+  display: flex;
+
+  font-family: 'Google Sans', sans-serif;
+  perspective: 1px; // for locomotive-scroll element disappearance bug fix.
+  background-color: ${(props) => props.theme.backgroundColor.white};
+
+  ${({ theme }) => theme.tablet`
+    height: calc(var(--vh, 1vh) * 100);
+  `}
+`;
+
+const GalleryPadding = styled.div`
+  width: 35vw;
+  height: 100%;
+
+  background: linear-gradient(
+    to right,
+    ${(props) => props.theme.backgroundColor.white} 0%,
+    ${(props) => props.theme.backgroundColor.black} 100%
+  );
+`;

src/pages/Clubs/GalleryComponent/FocusedGalleryItem/index.jsx

@@ -1,7 +1,7 @@
 import 'swiper/css';
 import 'swiper/css/pagination';
 
-import useKeyPress from '@hooks/useKeyPress/useKeyPress';
+import { useKeyPress } from '@hooks';
 import { motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 import { useLocomotiveScroll } from 'react-locomotive-scroll';

src/pages/Clubs/GalleryComponent/index.js

@@ -0,0 +1 @@
+export { default as GalleryComponent } from './GalleryComponent';

src/pages/Clubs/index.js

@@ -1,65 +1 @@
-import { LoadingScreen } from '@components/LoadingScreen';
-import { LocomotiveScrollProvider } from '@context';
-import { TransitionColorContext } from '@context/TransitionColorContext';
-import useHandleAnimationScroll from '@hooks/useHandleAnimationScroll/useHandlerAnimationScroll.js';
-import useMount from '@hooks/useMount/useMount';
-import { useContext, useRef } from 'react';
-import styled, { useTheme } from 'styled-components';
-
-import Banner from './Banner';
-import GalleryComponent from './GalleryComponent';
-
-function ClubsPage() {
-  const { handleAnimationStart, handleAnimationComplete } = useHandleAnimationScroll();
-  const { transitionColorHandler } = useContext(TransitionColorContext);
-  const { color } = useTheme();
-  const containerRef = useRef(null);
-
-  useMount(() => {
-    transitionColorHandler(color.yellow);
-  });
-
-  return (
-    <>
-      <LocomotiveScrollProvider.Horizontal containerRef={containerRef}>
-        <Container data-scroll-container ref={containerRef} id="#fixed-element-clubs-container">
-          <Banner />
-          <GalleryPadding data-scroll-section />
-          <GalleryComponent />
-        </Container>
-      </LocomotiveScrollProvider.Horizontal>
-      <LoadingScreen
-        handleAnimationStart={handleAnimationStart}
-        handleAnimationComplete={handleAnimationComplete}
-      />
-    </>
-  );
-}
-
-export default ClubsPage;
-
-const Container = styled.main`
-  width: fit-content;
-  height: 100vh;
-
-  display: flex;
-
-  font-family: 'Google Sans', sans-serif;
-  perspective: 1px; // for locomotive-scroll element disappearance bug fix.
-  background-color: ${(props) => props.theme.backgroundColor.white};
-
-  ${({ theme }) => theme.tablet`
-    height: calc(var(--vh, 1vh) * 100);
-  `}
-`;
-
-const GalleryPadding = styled.div`
-  width: 35vw;
-  height: 100%;
-
-  background: linear-gradient(
-    to right,
-    ${(props) => props.theme.backgroundColor.white} 0%,
-    ${(props) => props.theme.backgroundColor.black} 100%
-  );
-`;
+export { default as ClubsPage } from './ClubsPage';

src/pages/Developer/Banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './Banner';

src/pages/Developer/DeveloperPage.js

@@ -0,0 +1,67 @@
+import { LoadingScreen } from '@components/LoadingScreen';
+import { LocomotiveScrollProvider } from '@context';
+import { TransitionColorContext } from '@context/TransitionColorContext';
+import { useHandleAnimationScroll, useMount } from '@hooks';
+import { useContext, useRef } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import Banner from './Banner/Banner';
+import FooterSection from './FooterSection/FooterSection';
+import Introduction from './Introduction/Introduction';
+import DevRelSection from './JamSection/DevRel';
+import FSSection from './JamSection/FS';
+import MLSection from './JamSection/ML';
+import MobileSection from './JamSection/Mobile';
+import ServerSection from './JamSection/Server';
+import WebSection from './JamSection/Web';
+import SectionIntro from './SectionIntro/SectionIntro';
+
+function DeveloperPage() {
+  const { handleAnimationStart, handleAnimationComplete } = useHandleAnimationScroll();
+
+  const { transitionColorHandler } = useContext(TransitionColorContext);
+  const { color } = useTheme();
+  const containerRef = useRef(null);
+
+  useMount(() => {
+    transitionColorHandler(color.green);
+  });
+
+  return (
+    <>
+      <LocomotiveScrollProvider.Vertical containerRef={containerRef}>
+        <Container data-scroll-container ref={containerRef}>
+          <Banner />
+          <Introduction />
+          <SectionIntro />
+          <WebSection />
+          <ServerSection />
+          <MobileSection />
+          <MLSection />
+          <FSSection />
+          <DevRelSection />
+          <FooterSection />
+        </Container>
+      </LocomotiveScrollProvider.Vertical>
+      <LoadingScreen
+        handleAnimationStart={handleAnimationStart}
+        handleAnimationComplete={handleAnimationComplete}
+      />
+    </>
+  );
+}
+
+export default DeveloperPage;
+
+const Container = styled.main`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  font-family: 'Google Sans', sans-serif;
+  perspective: 1px; // for locomotive-scroll element disappearance bug fix.
+  background-color: ${(props) => props.theme.backgroundColor.white};
+`;

src/pages/Developer/FooterSection/index.js

@@ -0,0 +1 @@
+export { default as FooterSection } from './FooterSection';

src/pages/Developer/Introduction/index.jsx → src/pages/Developer/Introduction/Introduction.jsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 
-import Jam from './Jam/Jam';
-import { JamList } from './Jam/JamList';
+import { Jam, JamList } from './Jam';
 
 function Introduction() {
   const [hoveredSection, setHoveredSection] = useState(null);

src/pages/Developer/Introduction/Jam/Jam.jsx

@@ -1,4 +1,4 @@
-import useHover from '@hooks/useHover/useHover';
+import { useHover } from '@hooks';
 import { IconContext } from '@react-icons/all-files';
 import { useCallback } from 'react';
 import { useLocomotiveScroll } from 'react-locomotive-scroll';

src/pages/Developer/Introduction/Jam/index.js

@@ -0,0 +1,2 @@
+export { default as Jam } from './Jam';
+export { JamList } from './JamList';

src/pages/Developer/Introduction/index.js

@@ -0,0 +1 @@
+export { default as Introduction } from './Introduction';

src/pages/Developer/JamSection/DevRel/index.jsx

@@ -1,4 +1,4 @@
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { useRef } from 'react';
 import { TypeAnimation } from 'react-type-animation';
 import styled from 'styled-components';

src/pages/Developer/JamSection/FS/index.jsx

@@ -5,7 +5,7 @@ import { ReactComponent as SiMongoDB } from '@assets/images/icons/server/mongodb
 import { ReactComponent as SiNodeJS } from '@assets/images/icons/web/nodedotjs.svg';
 import { ReactComponent as SiReact } from '@assets/images/icons/web/react.svg';
 import { ReactComponent as SiTypescript } from '@assets/images/icons/web/typescript.svg';
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { useRef } from 'react';
 import { Tooltip } from 'react-tooltip';
 import { TypeAnimation } from 'react-type-animation';

src/pages/Developer/JamSection/ML/index.jsx

@@ -6,7 +6,7 @@ import { ReactComponent as SiSklearn } from '@assets/images/icons/ML/scikitlearn
 import { ReactComponent as SiTensorflow } from '@assets/images/icons/ML/tensorflow.svg';
 // Icon Import
 import { ReactComponent as SiPython } from '@assets/images/icons/python.svg';
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { useRef } from 'react';
 import { Tooltip } from 'react-tooltip';
 import { TypeAnimation } from 'react-type-animation';

src/pages/Developer/JamSection/Mobile/index.jsx

@@ -4,7 +4,7 @@ import { ReactComponent as SiFlutter } from '@assets/images/icons/mobile/flutter
 import { ReactComponent as SiUIKit } from '@assets/images/icons/mobile/uikit.svg';
 // Icon Import
 import { ReactComponent as SiSwift } from '@assets/images/icons/swift.svg';
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { useRef } from 'react';
 import { Tooltip } from 'react-tooltip';
 import { TypeAnimation } from 'react-type-animation';

src/pages/Developer/JamSection/Server/index.jsx

@@ -27,7 +27,7 @@ import { ReactComponent as SiSQLite } from '@assets/images/icons/server/sqlite.s
 import { ReactComponent as SiSymfony } from '@assets/images/icons/server/symfony.svg';
 import { ReactComponent as SiSwift } from '@assets/images/icons/swift.svg';
 import { ReactComponent as SiNodeJS } from '@assets/images/icons/web/nodedotjs.svg';
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { SiJavascript } from '@react-icons/all-files/si/SiJavascript';
 import { useRef } from 'react';
 import { Tooltip } from 'react-tooltip';

src/pages/Developer/JamSection/Web/index.jsx

@@ -10,7 +10,7 @@ import { ReactComponent as SiSass } from '@assets/images/icons/web/sass.svg';
 import { ReactComponent as SiStyledComponents } from '@assets/images/icons/web/styledcomponents.svg';
 import { ReactComponent as SiThreeJS } from '@assets/images/icons/web/threedotjs.svg';
 import { ReactComponent as SiVite } from '@assets/images/icons/web/vite.svg';
-import useOnScreen from '@hooks/useOnScreen/useOnScreen';
+import { useOnScreen } from '@hooks';
 import { SiAngular } from '@react-icons/all-files/si/SiAngular';
 import { SiBabel } from '@react-icons/all-files/si/SiBabel';
 import { SiCss3 } from '@react-icons/all-files/si/SiCss3';