update

components/Experiences.jsx

@@ -42,7 +42,6 @@ const Experiences = () => {
         Experiences
       </h3>
 
-      {/* Experiences container */}
       <div className="w-full max-w-6xl">
         {experiencesData.map((experience, index) => (
           <div
@@ -53,20 +52,17 @@ const Experiences = () => {
               md:grid md:grid-cols-2 md:gap-8 p-6
             `}
           >
-            {/* Conditional rendering for alternating layout */}
             {index % 2 === 0 ? (
               <>
-                {/* Left/Image Column */}
                 <div className="flex justify-center items-center p-4">
                   <Image
                     src={experience.img}
                     alt={`${experience.name} logo`}
-                    width={200} // Changed to 200
-                    height={200} // Changed to 200
+                    width={200}
+                    height={200}
                     className="w-[200px] h-[200px] object-contain rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                   />
                 </div>
-                {/* Right/Content Column */}
                 <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                   <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                     {experience.name}
@@ -74,11 +70,15 @@ const Experiences = () => {
                   <p className="text-gray-600 text-lg mb-2 font-poppins">
                     {experience.date}
                   </p>
+                  {experience.about && (
+                    <p className="text-gray-500 text-base mb-3 font-poppins italic">
+                      {experience.about}
+                    </p>
+                  )}
                   <p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
                     {experience.desc}
                   </p>
 
-                  {/* Link to experience (if available) */}
                   {experience.link && (
                     <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                       <a
@@ -96,7 +96,6 @@ const Experiences = () => {
               </>
             ) : (
               <>
-                {/* Right/Content Column (now on left visually) */}
                 <div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
                   <h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
                     {experience.name}
@@ -104,11 +103,15 @@ const Experiences = () => {
                   <p className="text-gray-600 text-lg mb-2 font-poppins">
                     {experience.date}
                   </p>
+                  {experience.about && (
+                    <p className="text-gray-500 text-base mb-3 font-poppins italic">
+                      {experience.about}
+                    </p>
+                  )}
                   <p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
                     {experience.desc}
                   </p>
 
-                  {/* Link to experience (if available) */}
                   {experience.link && (
                     <div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
                       <a
@@ -123,13 +126,12 @@ const Experiences = () => {
                     </div>
                   )}
                 </div>
-                {/* Left/Image Column (now on right visually) */}
                 <div className="flex justify-center items-center p-4">
                   <Image
                     src={experience.img}
                     alt={`${experience.name} logo`}
-                    width={200} // Changed to 200
-                    height={200} // Changed to 200
+                    width={200}
+                    height={200}
                     className="w-[200px] h-[200px] object-contain rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
                   />
                 </div>