achievements page responsiveness issues

namespacecomm · Sep 1, 2024 · a3caa18 · a3caa18
1 parent 816e476
commit a3caa18
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 128 deletions.
diff --git a/src/Pages/Achievements/Achievements.jsx b/src/Pages/Achievements/Achievements.jsx
@@ -14,13 +14,10 @@ const Achievements = () => {
         At nameSpace, we take pride in the remarkable accomplishments of our members, who consistently push the boundaries of innovation and excellence. This section celebrates the dedication, hard work, and success of those who have made significant contributions both within our society and beyond. From pioneering projects to winning prestigious awards, our achievers exemplify the true spirit of nameSpace. Explore the milestones and achievements that define our journey and inspire future generations.
       </p>
 
-      <div className="flex flex-wrap justify-center">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         {achievements.map((event, index) => (
-          <div
-            key={index}
-            className="w-full md:w-1/2 lg:w-1/3 p-4 flex justify-center"
-          >
-            <div className="w-full max-w-2xl">
+          <div key={index} className="p-4 flex justify-center">
+            <div className="w-full max-w-xs"> {/* Adjusting width to make the photo square */}
               <AnimatedCard
                 img={event.img}
                 title={event.name}

diff --git a/src/components/AnimatedCard/AnimatedCard.css b/src/components/AnimatedCard/AnimatedCard.css
@@ -1,111 +1,109 @@
 .card-container {
-    perspective: 1000px; /* Enable 3D space for flip effect */
-    position: relative;
-    width: 100%;
-    max-width: 600px;
-    height: 500px; /* Ensure consistent height */
-  }
-
-  .card-inner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.6s;
-    transform-style: preserve-3d;
-  }
-
-  .card-container:hover .card-inner {
-    transform: rotateY(180deg);
-  }
-
-  .card-front,
-  .card-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-    border-radius: 1rem;
-  }
-
-  .card-front {
-    background: rgba(0, 0, 0, 0.5); /* Darker background for the front */
-  }
-
-  .card-back {
-    background: rgba(255, 255, 255, 0.1); /* Darker background for the back */
-    transform: rotateY(180deg);
-  }
-
-  .image-container {
-    position: relative;
-    width: 100%;
-    height: 80%; /* Fixed height for the image container */
-    overflow: hidden;
-  }
-
-  .card-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .no-image {
-    width: 100%;
-    height: 100%;
-    background-color: #4a4a4a; /* Placeholder color */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #ffffff;
-    font-size: 1.25rem;
-  }
-
-  .image-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
-    opacity: 0.5;
-    /* blur: 10px; */
-    border-radius: 50%;
-    z-index: -1;
-  }
-
-  .card-title {
-    font-size: 1.5rem;
-    color: white;
-    margin-top: 1rem;
-  }
-
-  .card-batch {
-    font-size: 1rem;
-    color: #d1d1d1;
-    margin-bottom: 1rem;
-  }
-
-  .achievements {
-    overflow-y: auto;
-    max-height: 100%;
-    padding: 1rem;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 0.5rem;
-  }
-
-  .achievement {
-    margin-bottom: 0.5rem;
-  }
-
-  .decorative-element {
-    position: absolute;
-    bottom: -1px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 75%;
-    height: 4px;
-    background-color: #4f46e5;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
+  perspective: 1000px; /* Enable 3D space for flip effect */
+  position: relative;
+  width: 100%;
+  max-width: 350px; /* Reduced max width */
+  height: 300px; /* Reduced height */
+}
+
+.card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.card-container:hover .card-inner {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 1rem;
+}
+
+.card-front {
+  background: rgba(0, 0, 0, 0.5); /* Darker background for the front */
+}
+
+.card-back {
+  background: rgba(0, 0, 0, 0.5); /* Consistent background for the back */
+  transform: rotateY(180deg);
+}
+
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 66%; /* Adjusted height for image container */
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.no-image {
+  width: 100%;
+  height: 100%;
+  background-color: #4a4a4a; /* Placeholder color */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 1rem; /* Adjusted font size */
+}
+
+.image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
+  opacity: 0.5;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.card-title {
+  font-size: 1.25rem; /* Adjusted font size */
+  color: white;
+  margin-top: 0.5rem; /* Adjusted margin */
+}
+
+.card-batch {
+  font-size: 0.875rem; /* Adjusted font size */
+  color: #d1d1d1;
+  margin-bottom: 0.5rem; /* Adjusted margin */
+}
+
+.achievements {
+  overflow-y: auto;
+  max-height: 100%; /* Adjusted height */
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.5); /* Consistent background color */
+  border-radius: 0.5rem;
+}
+
+.achievement {
+  margin-bottom: 0.5rem;
+}
+
+.decorative-element {
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 75%;
+  height: 4px;
+  background-color: #4f46e5;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/components/AnimatedCard/AnimatedCard.jsx b/src/components/AnimatedCard/AnimatedCard.jsx
@@ -5,38 +5,38 @@ import './AnimatedCard.css'; // Import custom CSS file
 const AnimatedCard = ({ img, title, date, description }) => {
   return (
     <motion.div
-      className="card-container"
+      className="card-container bg-blue-1000 rounded-lg shadow-lg overflow-hidden"
       initial={{ opacity: 0, y: -50 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0 }}
-      whileHover={{ rotate: 0, scale: 1.1, y: -5 }}
+      whileHover={{ rotate: 0, scale: 1.05, y: -5 }} 
     >
-      <div className="card-inner">
+      <div className="card-inner relative">
         {/* Front Side of the Card */}
         <div className="card-front">
           {/* Image with Glow Effect */}
-          <div className="image-container">
+          <div className="image-container relative w-full">
             {img ? (
-              <img src={img} alt={`${title} - achiever image`} className="card-image" />
+              <img src={img} alt={`${title} - achiever image`} className="card-image w-full h-auto object-cover" />
             ) : (
-              <div className="no-image">
+              <div className="no-image bg-gray-300 flex justify-center items-center h-40">
                 <span>No Image</span>
               </div>
             )}
-            <div className="image-overlay"></div>
+            <div className="image-overlay absolute top-0 left-0 right-0 bottom-0"></div>
           </div>
 
           {/* Name with Enhanced Typography */}
-          <h3 className="card-title">{title}</h3>
+          <h3 className="card-title text-white text-center mt-2">{title}</h3>
 
           {/* Batch */}
-          <p className="card-batch">{date}</p>
+          <p className="card-batch text-white text-center mb-2">{date}</p>
         </div>
 
         {/* Back Side of the Card */}
-        <div className="card-back">
+        <div className="card-back absolute top-0 left-0 w-full h-full bg-blue-1000 p-4 flex items-center justify-center">
           {/* Achievements with Styling */}
-          <div className="achievements">
+          <div className="achievements text-white">
             {description.split('|').map((achievement, index) => (
               <p key={index} className="achievement">
                 {achievement.trim()}

diff --git a/src/constants/achievementConstants.js b/src/constants/achievementConstants.js
@@ -9,7 +9,7 @@ export const achievements = [
     img: "https://media.licdn.com/dms/image/v2/C4D03AQEatv7P9Aso-w/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1651746196592?e=1730332800&v=beta&t=_WKkn9_qse81Uauxp3pOBvWAxKF0rfVO-ZWGSaEFHXA",
     name: "Deepti Mittal",
     batch: "2020-24",
-    achievements: "SDE @Xeno",
+    achievements: "SDE @Xeno | Offered Juspay, Josh Technologies",
   },
   {
     img: "https://media.licdn.com/dms/image/v2/D5635AQGjh-QoZIKR5w/profile-framedphoto-shrink_400_400/profile-framedphoto-shrink_400_400/0/1703348681758?e=1725631200&v=beta&t=HK7AQEFGQboS-uldiGiWWlpYRevHr8lM4REJ53jUm3s",