Update About.tsx

aniruddhaadak80 · Nov 8, 2024 · a60238b · a60238b
1 parent 88b47ea
commit a60238b
Showing 1 changed file with 11 additions and 16 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -3,20 +3,16 @@ import { Code, Users, Lightbulb } from 'lucide-react';
 
 const About: React.FC = () => {
   const milestones = [
-    { year: 2022, event: 'Started Computer Science Degree', baseColor: '#4F46E5' },
-    { year: 2023, event: 'Learned 1st Programming Language (C)', baseColor: '#10B981' },
-    { year: 2023, event: 'Learned Web Development after June 15th', baseColor: '#F59E0B' },
-    { year: 2024, event: 'Learned GitHub, Cybersecurity before June', baseColor: '#EF4444' },
-    { year: 2024, event: 'Learned Next.js, Astro.js, Qwik.js...', baseColor: '#8B5CF6' },
-    { year: 2024, event: 'Skills upgrading...', baseColor: '#EC4899' },
+    { year: 2022, event: 'Started Computer Science Degree', color: 'from-blue-400 to-blue-600', baseColor: '#4F46E5' },
+    { year: 2023, event: 'Learned 1st Programming Language (C)', color: 'from-green-400 to-green-600', baseColor: '#10B981' },
+    { year: 2023, event: 'Learned Web Development after June 15th', color: 'from-yellow-400 to-yellow-600', baseColor: '#F59E0B' },
+    { year: 2024, event: 'Learned GitHub, Cybersecurity before June', color: 'from-red-400 to-red-600', baseColor: '#EF4444' },
+    { year: 2024, event: 'Learned Next.js, Astro.js, Qwik.js...', color: 'from-purple-400 to-purple-600', baseColor: '#8B5CF6' },
+    { year: 2024, event: 'Skills upgrading...', color: 'from-pink-400 to-pink-600', baseColor: '#EC4899' },
   ];
 
-  // State to store a hover color for each milestone, initialized to baseColor
-  const [hoverColors, setHoverColors] = useState(
-    milestones.map((milestone) => milestone.baseColor)
-  );
+  const [hoverColors, setHoverColors] = useState(milestones.map(milestone => milestone.baseColor));
 
-  // Function to generate a random color
   const getRandomColor = () => {
     const letters = '0123456789ABCDEF';
     let color = '#';
@@ -26,14 +22,12 @@ const About: React.FC = () => {
     return color;
   };
 
-  // Handler to change color on hover for a specific milestone
   const handleMouseEnter = (index: number) => {
     const newColors = [...hoverColors];
     newColors[index] = getRandomColor();
     setHoverColors(newColors);
   };
 
-  // Reset color to baseColor when hover ends
   const handleMouseLeave = (index: number, baseColor: string) => {
     const newColors = [...hoverColors];
     newColors[index] = baseColor;
@@ -67,11 +61,12 @@ const About: React.FC = () => {
                   className="flex items-center animate-zoom-in-right"
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >
-                  <div
-                    className={`w-12 h-12 bg-gradient-to-r ${milestone.baseColor} rounded-full flex items-center justify-center text-white font-bold shadow-md transform hover:scale-110 transition-transform duration-300`}
-                  >
+                  {/* Year section with fixed color */}
+                  <div className={`w-12 h-12 bg-gradient-to-r ${milestone.color} rounded-full flex items-center justify-center text-white font-bold shadow-md transform hover:scale-110 transition-transform duration-300`}>
                     {milestone.year}
                   </div>
+
+                  {/* Event section with dynamic hover color */}
                   <div
                     className="ml-4 bg-white p-2 rounded-lg shadow-md flex-1 transition-colors duration-300 cursor-pointer group"
                     style={{