feat(): Adding the sections

Author: ar1603

package.json

@@ -51,6 +51,7 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^14.1.1",
+    "react-player": "^2.16.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "react-social-icons": "^6.16.0",

public/hourcoding/hourcoding_main.webm

@@ -1,7 +1,6 @@
 'use client';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { useCursor } from '../Cursor';
 import { Box, Link } from '@chakra-ui/react';
 
 const ThreeDPin = ({
@@ -25,12 +24,10 @@ const ThreeDPin = ({
   };
 
   return (
-    <Link
+    <Box
       className={'relative group/pin z-50  cursor-pointer'}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      href={href}
-      isExternal
     >
       <div
         style={{
@@ -49,29 +46,25 @@ const ThreeDPin = ({
         </div>
       </div>
       <PinPerspective title={title} href={href} />
-    </Link>
+    </Box>
   );
 };
 
 const PinPerspective = ({ title, href }: { title?: string; href?: string }) => {
   return (
-    <motion.div className="pointer-events-none  w-96 h-96 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+    <motion.div className="w-96 h-96 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[102] transition duration-500">
       <div className=" w-full h-full -mt-7 flex-none  inset-0">
         <div className="absolute top-0 inset-x-0  flex justify-center">
-          <a
+          <Link
             href={href}
             className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => {
-              console.log('onClick');
-            }}
+            isExternal
           >
-            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
+            <span className="relative z-103 text-white text-xs font-bold inline-block py-0.5">
               {title}
             </span>
             <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-violet-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
-          </a>
+          </Link>
         </div>
         <div
           style={{
@@ -143,7 +136,6 @@ const PinPerspective = ({ title, href }: { title?: string; href?: string }) => {
             ></motion.div>
           </>
         </div>
-
         <>
           <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />
           <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />

public/hourcoding/hourcoding_main1.png

@@ -2,8 +2,9 @@ import { useRef } from 'react';
 import { useCursor } from '../Cursor';
 import { CardBasic, Icon } from './Card';
 import { CardExportProps } from './types';
+import { Wrap } from '@chakra-ui/react';
 
-const Card = ({ titleText, chipText, centerText }: CardExportProps) => {
+const Card = ({ titleText, chips: chipText, centerText }: CardExportProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { setCursorInsets } = useCursor();
   return (
@@ -18,7 +19,7 @@ const Card = ({ titleText, chipText, centerText }: CardExportProps) => {
         })
       }
       onMouseLeave={() => setCursorInsets(undefined)}
-      className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start max-w-sm mx-auto p-4 relative h-[30rem]"
+      className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start max-w-sm p-4 relative h-[30rem]"
     >
       <CardBasic text={centerText} />
       <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
@@ -28,9 +29,16 @@ const Card = ({ titleText, chipText, centerText }: CardExportProps) => {
       <h2 className="dark:text-white text-black mt-4 text-md font-light">
         {titleText}
       </h2>
-      <p className="text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full mt-4 text-black dark:text-white px-2 py-0.5">
-        {chipText}
-      </p>
+      <Wrap mt={2}>
+        {chipText?.map((chipText) => (
+          <p
+            key={chipText}
+            className="text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full text-black dark:text-white px-1 "
+          >
+            {chipText}
+          </p>
+        ))}
+      </Wrap>
     </div>
   );
 };

public/hourcoding/hourcoding_main2.png

@@ -2,5 +2,5 @@ export type CardExportProps = {
   centerText?: string;
   titleText?: string;
   subtitleText?: string;
-  chipText?: string;
+  chips?: string[];
 };

public/hourcoding/hourcoding_main3.png

@@ -0,0 +1,82 @@
+import { useScroll, useTransform, motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+import { TimelineEntry } from './types';
+
+const Timeline = ({ data }: { data: TimelineEntry[] }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setHeight(rect.height);
+    }
+  }, [ref]);
+
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start 10%', 'end 50%'],
+  });
+
+  const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);
+  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>
+        <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.
+        </p>
+      </div>
+
+      <div ref={ref} className="relative max-w-7xl mx-auto pb-20">
+        {data.map((item, index) => (
+          <div
+            key={index}
+            className="flex justify-start pt-10 md:pt-40 md:gap-10"
+          >
+            <div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
+              <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
+                <div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
+              </div>
+              <h3 className="hidden md:block text-xl md:pl-20 md:text-5xl font-bold text-neutral-500 dark:text-neutral-500 ">
+                {item.title}
+              </h3>
+            </div>
+
+            <div className="relative pl-20 pr-4 md:pl-4 w-full">
+              <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
+                {item.title}
+              </h3>
+              {item.content}{' '}
+            </div>
+          </div>
+        ))}
+        <div
+          style={{
+            height: height + 'px',
+          }}
+          className="absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-neutral-200 dark:via-neutral-700 to-transparent to-[99%]  [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] "
+        >
+          <motion.div
+            style={{
+              height: heightTransform,
+              opacity: opacityTransform,
+            }}
+            className="absolute inset-x-0 top-0  w-[2px] bg-gradient-to-t from-purple-500 via-blue-500 to-transparent from-[0%] via-[10%] rounded-full"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;

src/components/3dPin/3dPin.tsx

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