thanks to stephane-monnot/react-vertical-timeline#166 (comment) solut…

…ion timeline now works

app/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html {
+    --line-color: #e5e7eb;
+}

components/experience.tsx

@@ -1,15 +1,57 @@
+"use client"
 import React from 'react'
-import { useSectionInView } from '../lib/hooks';
 import SectionHeading from './section-heading';
+import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
+import 'react-vertical-timeline-component/style.min.css';
+import { experiencesData } from '../lib/data'
+import { useSectionInView } from '../lib/hooks';
+import { useInView } from 'react-intersection-observer';
+
 
 export default function Experience() {
-    const { ref } =  useSectionInView('Experience');
+  const { ref } = useSectionInView('Experience');
 
   return (
-    <section 
-    ref={ref}
-    id='Experience'>
-        <SectionHeading>Experience</SectionHeading>
+    <section
+      ref={ref}
+      id='experience'>
+      <SectionHeading>My Experience</SectionHeading>
+      <VerticalTimeline lineColor=''>
+      {experiencesData.map((item, index) => {
+          const { ref, inView } = useInView({
+            triggerOnce: true,
+          });
+          return (
+            <div key={index} ref={ref} className="vertical-timeline-element">
+              <VerticalTimelineElement
+                contentStyle={{
+                  background: '#f3f4f6',
+                  boxShadow: 'none',
+                  border: '1px solid rgba(0, 0, 0, 0.05)',
+                  textAlign: 'left',
+                  padding: '1.3rem 2rem',
+                }}
+                contentArrowStyle={{
+                  borderRight: '0.4rem solid #9ca3af',
+                }}
+                visible={inView}
+                date={item.date}
+                icon={item.icon}
+                iconStyle={{
+                  background: 'white',
+                  fontSize: '1.5rem',
+                }}
+              >
+                <h3 className="font-semibold capitalize">{item.title}</h3>
+                <p className="!mt-0 font-normal">{item.location}</p>
+                <p className="!mt-1 !font-normal text-gray-700">
+                  {item.description}
+                </p>
+              </VerticalTimelineElement>
+            </div>
+          );
+        })}
+      </VerticalTimeline>
     </section>
   )
 }

components/skills.tsx

@@ -1,18 +1,46 @@
-import React from 'react'
-import SectionHeading from './section-heading'
-import { skillsData } from '../lib/data'
+import React from 'react';
+import { skillsData } from '../lib/data';
 import { useSectionInView } from '../lib/hooks';
+import { animate, motion } from 'framer-motion'
+import SectionHeading from './section-heading';
+
+const fadeInAnimationVariance ={
+  initial: {
+    opacity: 0,
+    y:100,
+  },
+  animate: (index: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 0.05*index,
+    },
+  }),
+};
 
 export default function Skills() {
+
 const { ref } =  useSectionInView('Skills');
 
   return (
-    <section ref={ref} id='skills'>
+    <section className='mb-28 max-w-[53rem] scroll-mt-28 text-center sm:mb-40'
+    ref={ref} 
+    id='skills'>
         <SectionHeading>My Skills</SectionHeading>
-        <ul>
+        <ul className='flex flex-wrap justify-center gap-2 text-lg text-gray-800'>
             {
                 skillsData.map((skill,index) => (
-                  <li key={index}>{skill}</li>  
+                  <motion.li className='bg-white border border-black/[0.1] rounded-xl px-5 py-3'
+                  key={index}
+                  variants={fadeInAnimationVariance}
+                  initial="initial"
+                  whileInView="animate"
+                  viewport={
+                  {
+                    once: true
+                  }
+                  }
+                  custom={index}>{skill}</motion.li>  
                 ))
             }
         </ul>

package.json

@@ -16,12 +16,14 @@
     "react-dom": "^18",
     "react-icons": "^4.12.0",
     "react-intersection-observer": "^9.8.1",
+    "react-vertical-timeline-component": "^3.6.0",
     "sharp": "^0.33.3"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.3",