v0.9.3 Make projectCards of fixed sizes

src/components/projects/projectCard/ProjectCard.jsx

@@ -7,9 +7,11 @@ function ProjectCard({ project, onClick, className }) {
 			<div className={styles.imageSlider}>
 				<img src={project.images[0]} alt={`${project.title} - main image`} className={styles.projectImage} />
 			</div>
-			<h3 className={styles.title}>{project.title}</h3>
-			<p className={styles.category}>{project.category}</p>
-			<p className={styles.description}>{project.description}</p>
+			<div className={styles.content}>
+				<h3 className={styles.title}>{project.title}</h3>
+				<p className={styles.category}>{project.category}</p>
+				<p className={styles.description}>{project.description}</p>
+			</div>
 		</div>
 	);
 }

src/components/projects/projectCard/ProjectCard.module.css

@@ -5,6 +5,9 @@
 	overflow: hidden;
 	transition: transform 0.3s ease;
 	cursor: pointer;
+	height: 450px; /* Fixed height for the card */
+	display: flex;
+	flex-direction: column;
 }
 
 .card:hover {
@@ -24,21 +27,34 @@
 	transition: opacity 0.5s ease;
 }
 
+.content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	overflow: hidden;
+}
+
 .title {
 	font-size: 1.2rem;
 	font-weight: bold;
-	margin: 1rem;
+	margin-bottom: 0.5rem;
 	color: #333;
 }
 
-.description {
-	font-size: 0.9rem;
-	margin: 0 1rem 1rem;
-	color: #666;
-}
-
 .category {
 	font-size: 0.8rem;
 	color: #666;
-	margin: 0 1rem;
+	margin-bottom: 0.5rem;
+}
+
+.description {
+	font-size: 0.9rem;
+	color: #666;
+	flex-grow: 1;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: 4; /* Adjust this number to show more or fewer lines */
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
 }