Restructure and extra stuff

src/components/cards/ceCard.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets'
-import mlb_ce from '../../assets/ce/mlb.webp'
+import mlb_ce from '@assets/ce/mlb.webp'
 import type { GlobImage } from '../../types/generic'
 import { plsLoadImage } from '../../utils/tools'
 

src/components/fgotaHero.astro

@@ -54,6 +54,10 @@ const display = fadeout ? "": "display: none"
     width: 100%;
   }
 
+  span {
+    margin: 0 .5rem;
+  }
+
   .fancy {
     color: var(--c-accent-1);
   }

src/components/links/linkCard.astro

@@ -0,0 +1,47 @@
+---
+import type { ImageMetadata } from 'astro'
+
+
+export interface Props {
+  text: string
+  icon: ImageMetadata
+  link: string
+}
+
+const { text, icon, link } = Astro.props
+const icon_src_url = `url("${icon.src}")`
+
+---
+
+<a href={link} target="_blank" rel="noopener noreferrer">
+  <div class="icon"></div>
+  <span class="visually-hidden">{text}</span>
+</a>
+
+<style define:vars={{ icon_src_url }}>
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: var(--c-primary-background);
+    border-radius: .35rem;
+    border: 2px solid var(--c-primary-text);
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
+    & .icon {
+      background: var(--c-accent-1);
+    }
+  }
+
+  .icon {
+    mask: var(--icon_src_url) no-repeat center;
+    mask-size: contain;
+    background-color: var(--c-primary-text);
+    height: 65%;
+    width: 65%;
+  }
+</style>

src/components/links/linkContainer.astro

@@ -0,0 +1,58 @@
+---
+import LinkCard from "./linkCard.astro"
+
+import mastodon from 'iconoir/icons/mastodon.svg'
+import youtube from 'iconoir/icons/youtube.svg'
+import forgejo from '@assets/custom-svg/forgejo.svg'
+import rayshift from '@assets/custom-svg/rayshift.svg'
+import twitch from '@assets/custom-svg/twitch.svg'
+
+const links = [
+  {
+    link: "https://www.youtube.com/@Firq_",
+    icon: youtube,
+    text: "Youtube",
+  },
+  {
+    link: "https://mastodon.neshweb.net/@Firq",
+    icon: mastodon,
+    text: "Mastodon",
+  },
+  {
+    link: "https://twitch.tv/Firq",
+    icon: twitch,
+    text: "Twitch",
+  },
+  {
+    link: "https://forgejo.neshweb.net/Firq",
+    icon: forgejo,
+    text: "Forgejo",
+  },
+  {
+    link: "https://rayshift.io/na/firq",
+    icon: rayshift,
+    text: "Rayshift",
+  }
+]
+---
+
+<div>
+  {
+    links.map(
+      (item) => <LinkCard {...item} />
+    )
+  }
+</div>
+
+<style>
+  div {
+    margin-top: .75rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: auto;
+    column-gap: 0.5rem;
+  }
+</style>

src/components/navbar/navbar.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets'
-import logo from '../../assets/logo.svg'
+import logo from '@assets/logo.svg'
 import hamburger from 'iconoir/icons/menu.svg'
 const hamburger_src_url = `url("${hamburger.src}")`
 ---

src/components/titles/smallTitle.astro

@@ -58,6 +58,7 @@ const displayBackButton = returnbutton ? "": "display: none"
   }
 
   .head {
+    margin: 0 .5rem;
     hyphens: auto;
     padding-top: 2rem;
     font-size: 3.25rem;
@@ -66,6 +67,7 @@ const displayBackButton = returnbutton ? "": "display: none"
   }
 
   .sub {
+    margin: 0 .5rem;
     font-size: 0.9rem;
     font-weight: 500;
     font-family: 'Work Sans Variable', sans-serif;

src/components/titles/title.astro

@@ -1,9 +1,12 @@
 ---
+import LinkContainer from "../links/linkContainer.astro";
+
 ---
 
 <div class="wrap">
   <div class="head">Hi, I'm <span class="fancy">Firq</span></div>
   <div class="sub">&lt;/ Software dev / Scathach enthusiast / Germany /&gt;</div>
+  <LinkContainer />
   <div class="fade"></div>
 </div>