🐛 fix: refactoring repetitive properties

src/components/about/Timeline.tsx

@@ -3,26 +3,26 @@ import { Calendar } from 'lucide-react';
 
 const releases = [
   { version: '2024.1', date: '2024', description: 'Latest release with enhanced cloud support' },
-  { version: '2023.4', date: '2023', description: 'Major UI overhaul and tool updates' },
-  { version: '2023.1', date: '2023', description: 'Introduced new wireless testing tools' },
-  { version: '2022.4', date: '2022', description: 'Added ARM64 support improvements' },
-  { version: '2022.1', date: '2022', description: 'Enhanced container support' },
 ];
 
 export function Timeline() {
   return (
     <div className="relative">
       {/* Vertical timeline line */}
-      <div className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded" aria-hidden="true" />
+      <div
+        className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded"
+        aria-hidden="true"
+      />
 
       {/* Timeline items */}
+      <div>
         {releases.map((release, index) => (
           <motion.div
             key={release.version}
             initial={{ opacity: 0, x: -20 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
-          transition={{ delay: index * 0.15, duration: 0.7 }}
+            transition={{ delay: index * 0.2, duration: 0.6, ease: 'easeOut' }}
             className="relative pl-12 pb-12"
           >
             {/* Timeline point */}
@@ -41,6 +41,7 @@ export function Timeline() {
               role="group"
               aria-labelledby={`release-title-${release.version}`}
               aria-describedby={`release-desc-${release.version}`}
+              aria-current={index === 0 ? 'step' : undefined} // Mark latest release
             >
               <h3
                 id={`release-title-${release.version}`}
@@ -64,5 +65,6 @@ export function Timeline() {
           </motion.div>
         ))}
       </div>
+    </div>
   );
 }