fixed the timeline issue

Author: codewithdev

pages/about.tsx

@@ -7,6 +7,7 @@ import { LuExternalLink } from "react-icons/lu";
 import { motion, AnimatePresence, PanInfo } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { BsArrowLeftCircle, BsArrowRightCircle } from 'react-icons/bs';
+import { BsStackOverflow } from "react-icons/bs";
 
 import Container from 'components/Container';
 import avatar from 'public/headshot-dev.jpg';
@@ -144,6 +145,9 @@ export default function About() {
             <Link href="https://www.linkedin.com/in/idevprakaash" className="p-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">
               <FaLinkedin className="w-4 h-4 text-[#0077b5]" />
             </Link>
+            <Link href="https://stackoverflow.com/users/13662843/codewithdev" className="p-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">
+            <BsStackOverflow className='w-4 h-4 text-[#0077b5]'/>
+            </Link>
           </div>
           <p>Technical Writer and Open Source Developer</p>
           <h3 className="mb-1">Work Experience</h3>
@@ -180,21 +184,34 @@ export default function About() {
                     key={index}
                     initial={false}
                     animate={{
-                      scale: offset === 0 ? 1 : 0.8,
-                      x: offset * (windowWidth < 768 ? 160 : 260),
-                      opacity: 1 - Math.abs(offset) * 0.3,
-                      zIndex: 2 - Math.abs(offset)
+                      scale: offset === 0 ? 1 : 0.6,
+                      x: offset * (windowWidth < 768 ? 120 : 260),
+                      opacity: offset === 0 ? 1 : 0.15,
+                      zIndex: offset === 0 ? 2 : 0,
+                      filter: offset === 0 ? 'blur(0px)' : 'blur(4px)',
                     }}
                     transition={{
-                      duration: 0.5
+                      duration: 0.5,
+                      ease: "easeInOut"
                     }}
                     drag="x"
                     dragConstraints={{ left: 0, right: 0 }}
                     dragElastic={1}
                     onDragEnd={handleDragEnd}
-                    className="absolute w-[90vw] sm:w-full max-w-[300px]"
+                    className={`absolute w-[90vw] sm:w-full max-w-[300px] ${
+                      offset === 0 
+                        ? 'pointer-events-auto backdrop-blur-none' 
+                        : 'pointer-events-none backdrop-blur-sm'
+                    }`}
                   >
-                    <div className={`${timeline[index].bgColor} p-3 md:p-4 rounded-lg shadow-sm dark:border dark:border-gray-700 transition-colors duration-300 relative overflow-hidden`}>
+                    <div className={`${timeline[index].bgColor} p-3 md:p-4 rounded-lg
+                      dark:border dark:border-gray-700 transition-colors duration-300 
+                      relative overflow-hidden ${
+                        offset === 0 
+                          ? 'shadow-lg ring-1 ring-gray-900/5 dark:ring-white/10' 
+                          : 'shadow-none opacity-50'
+                      }`}
+                    >
                       <div className="flex flex-col items-start space-y-0.5">
                         <span className="text-xs text-gray-500 dark:text-gray-400">{timeline[index].period}</span>
                         <h4 className="text-base text-gray-900 dark:text-white">{timeline[index].company}</h4>

pages/index.tsx

@@ -57,7 +57,7 @@ export default function Home() {
               <div className="bg-white dark:bg-gray-900 rounded-lg px-4 py-3 shadow-sm border border-gray-200 dark:border-gray-800">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-2">
-                    <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5 text-[#F48024]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                     </svg>