Mostly rewritten here, lets see about deployment tomorrow

src/components/taCard.astro

@@ -0,0 +1,56 @@
+---
+export interface Props {
+	title: string;
+	link: string;
+	image: string;
+}
+
+const { image, link, title } = Astro.props;
+
+const icon: string = `background: url('ta_icons/${image}.png')`
+---
+<a href={link} target="_blank" rel="noopener noreferrer">
+    <article>
+        <div style={icon}>
+            <h2>{title}</h2>
+        </div>
+    </article>
+</a>
+
+<style>
+article {
+    background-color: rgb(27, 27, 27);
+    border-color: #1e1e1e;
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    height: auto;
+    width: auto;
+    line-height: 128px;
+}
+article:hover {
+    transform: scale(var(--hover-scale));
+}
+article > div {
+    width: 128px;
+    height: 128px;
+    object-fit: cover;
+    object-position: 0% 0%;
+}
+
+article:hover h2 {
+    color: white;
+    background-color: #1e1e1e;
+    font-size: 18px;
+    display: inline-block;
+    vertical-align: bottom;
+    line-height: normal;
+    width: 90%;
+    border-radius: 5px;
+    opacity: 90%;
+}
+
+article h2 {
+    display: none;
+}
+</style>