fix(): Fixing minor things related to UI component

Author: ar1603

src/components/Timeline/Timeline.tsx

@@ -23,14 +23,8 @@ const Timeline = ({ data }: { data: TimelineEntry[] }) => {
   const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
 
   return (
-    <div
-      className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"
-      ref={containerRef}
-    >
-      <div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
-        <h2 className="text-lg md:text-4xl mb-4 text-black dark:text-white max-w-4xl">
-          Changelog from my journey
-        </h2>
+    <div className="w-full bg-black font-sans md:px-10" ref={containerRef}>
+      <div className="max-w-7xl mx-auto pt-20 px-4 md:px-8 lg:px-10">
         <p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-base max-w-sm">
           I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s
           a timeline of my journey.

src/screens/articles/ArticlesScreen.tsx

@@ -1,8 +1,14 @@
+import { VStack } from '@chakra-ui/react';
+
 const ArticlesScreen = () => {
   return (
-    <div>
-      <h1>Articles</h1>
-    </div>
+    <VStack
+      minH={'100vh'}
+      id="projects"
+      rowGap={20}
+      bg={'black'}
+      paddingTop={20}
+    ></VStack>
   );
 };
 

src/screens/common/Footer.tsx

@@ -15,11 +15,9 @@ const FooterEndText = () => (
 const Footer = () => {
   return (
     <Box
-      display={'absolute'}
       flexDirection={'column'}
-      width={'99%'}
-      height={'230px'}
-      p={2}
+      width={'100%'}
+      overflowX={'hidden'}
       bg={'black'}
       color={'white'}
     >

src/screens/common/NavigationBar.tsx

@@ -72,7 +72,7 @@ const NavigationBar = () => {
       width={'100%'}
       paddingRight={14}
       paddingLeft={{ base: 14, '2xl': 32 }}
-      zIndex={1}
+      zIndex={2}
       justifyContent={'space-between'}
     >
       <Img

src/screens/mainFlow/contents/AboutMe.tsx

@@ -1,30 +1,12 @@
 import { Heading, VStack } from '@chakra-ui/react';
-import { useCursor } from '@components';
-import { useIsIntersecting } from '@hooks';
-import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextGenerateEffect } from '@components';
 
 const AboutMe = () => {
   const { t } = useTranslation();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isIntersecting = useIsIntersecting(containerRef);
-  const { setCursorType } = useCursor();
-
-  useEffect(() => {
-    if (isIntersecting) {
-      setCursorType('splash');
-    }
-  }, [isIntersecting, setCursorType]);
 
   return (
-    <VStack
-      ref={containerRef}
-      minH={'100vh'}
-      id="about"
-      width={'99vw'}
-      paddingX={32}
-    >
+    <VStack minH={'100vh'} id="about" width={'99vw'} paddingX={32}>
       <Heading
         width={'100%'}
         textAlign={'start'}
@@ -33,7 +15,7 @@ const AboutMe = () => {
       >
         {t('about.title')}
       </Heading>
-      <TextGenerateEffect words={t('about.aboutMe')} />
+      <TextGenerateEffect words={t('about.aboutMe')} className="mt-20" />
     </VStack>
   );
 };

src/screens/mainFlow/contents/Work.tsx

@@ -1,13 +1,38 @@
 import { Box, Heading } from '@chakra-ui/react';
+import { Timeline } from '@components';
 import { useTranslation } from 'react-i18next';
 
 const Work = () => {
   const { t } = useTranslation();
   return (
-    <Box zIndex={0} height={'100vh'} width={'99vw'} id="work" paddingX={32}>
+    <Box zIndex={0} height={'200vh'} width={'99vw'} id="work" paddingX={32}>
       <Heading position={'sticky'} top={'10vh'}>
         {t('work.title')}
       </Heading>
+      <Timeline
+        data={[
+          {
+            title: '2025',
+            content: <></>,
+          },
+          {
+            title: '2024',
+            content: <></>,
+          },
+          {
+            title: '2023',
+            content: <></>,
+          },
+          {
+            title: '2022',
+            content: <></>,
+          },
+          {
+            title: '2021',
+            content: <></>,
+          },
+        ]}
+      />
     </Box>
   );
 };