src/components/Card.astro

@@ -4,7 +4,7 @@ const { id, name } = Astro.props;
 
 <div class="card">
   <div class="image-wrapper">
-    <img src={`/img/logo/${id}.svg`} alt={`${name} logo`}" />
+    <img src={`/img/logo/${id}.webp`} alt={`${name} logo`}" />
   </div>
   <div class="text">
     <h1>{name}</h1>
@@ -18,24 +18,16 @@ const { id, name } = Astro.props;
   align-items: center;
   padding: 10px;
   margin: 10px 0;
-  border: 2px #ff66ff solid;
+  background-color: white;
-  color: white;
+  color: black;
   border-radius: 25px;
   transition: 0.1s ease-out;
   position: relative;
   top: 0;
-  background-color: #00000000;
 }
 
 .card:hover {
   top: -4px;
-  background-color: #ff80ff;
-  border: none;
-  color: black;
-}
-
-.card:hover img {
-  filter: invert(100%) brightness(0%);
 }
 
 .text {

src/pages/index.astro

@@ -14,7 +14,7 @@ import Card from '../components/Card.astro'
 		<main>
 			<h1>My services</h1>
 			<div id="cards">
-				<Card id="forgejo" name="Forgejo">A straight-to-the-point source code forge</Card>
+				<Card id="test1" name="Bruh">Électrocardiogramme</Card>
 				<Card id="test2" name="Purasehoraderu">:)</Card>
 			</div>
 		</main>
@@ -36,16 +36,6 @@ import Card from '../components/Card.astro'
 }
 
 body {
-	/*
-  background:
-		linear-gradient(135deg, #4d0099 0%, #00000000 100%),
-		linear-gradient(-135deg, #9933ff 0%, #00000000 100%),
-		linear-gradient(45deg, #ff4dff 0%, #00000000 100%),
-		linear-gradient(-45deg, #3366ff 0%, #00000000 100%);
-		*/
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-attachment: fixed;
 	background-color: black;
 	color: white;
 	font-family: 'Cantarell', sans-serif;