implemented project page with cards

1 files changed, 64 insertions, 9 deletions

diff --git a/src/components/Card.astro b/src/components/Card.astro
index bd6d597..bf0ecf5 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,24 +1,30 @@
+User
 ---
 interface Props {
 	title: string;
 	body: string;
 	href: string;
+	language: string;
+	languageColor: string;
 }
 
-const { href, title, body } = Astro.props;
+const { href, title, body, language, languageColor } = Astro.props;
 ---
 
 <li class="link-card">
 	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
+		<div class="content-container">
+			<h2>{title}</h2>
+			<div class="language-container">
+				<span class="dot" style={{ backgroundColor: languageColor }}></span>
+				<span class="language">{language}</span>
+			</div>
+			<div class="separator"></div>
+			<p>{body}</p>
+		</div>
 	</a>
 </li>
+
 <style>
 	.link-card {
 		list-style: none;
@@ -29,9 +35,13 @@ const { href, title, body } = Astro.props;
 		background-size: 400%;
 		border-radius: 7px;
 		background-position: 100%;
+		align-items: flex-start;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+		position: relative;
+		overflow: hidden;
 	}
+
 	.link-card > a {
 		width: 100%;
 		text-decoration: none;
@@ -41,21 +51,66 @@ const { href, title, body } = Astro.props;
 		color: white;
 		background-color: #23262d;
 		opacity: 0.8;
+		display: flex;
+		flex-direction: column; 
+		align-items: flex-start;
+		justify-content: space-between;
+		position: relative; /* Add position property */
+		box-sizing: border-box; /* Include padding in the element's total width/height. */
+		height: 100%; /* Ensure it takes the full height of its parent. */
+	}
+
+	.content-container {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		margin-bottom: 0; 
 	}
+
 	h2 {
 		margin: 0;
 		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
+
 	p {
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
+
+	.separator {
+		height: 1px;
+		width: 100%;
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.language-container {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		margin: 0;
+	}
+
+	.dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		display: inline-block;
+	}
+
+	.language {
+		font-weight: bold;
+		font-size: 1rem;
+		color: rgba(255, 255, 255, 0.8);
+	}
+
 	.link-card:is(:hover, :focus-within) {
 		background-position: 0;
 		background-image: var(--accent-gradient);
+		
 	}
+
 	.link-card:is(:hover, :focus-within) h2 {
 		color: rgb(var(--accent-light));
 	}
-</style>
+</style>
\ No newline at end of file