Added technologies, other approach for image loading

src/components/ceCard.astro

@@ -7,8 +7,8 @@ export interface Props {
 
 const {mlb, link, name } = Astro.props;
 
-const ce_img: string = `../ce/${link}.webp`;
-const mlb_ce: string = `../ce/mlb.webp`
+const ce_img: string = `/fgosite/ce/${link}.webp`;
+const mlb_ce: string = `/fgosite/ce/mlb.webp`
 let mlb_image: string = "mlbalign";
 
 if(mlb === "false") {

src/components/favouriteCard.astro

@@ -7,7 +7,7 @@ export interface Props {
 
 const {image, origin, name } = Astro.props;
 
-const img: string = `favourites/${image}.webp`;
+const img: string = `/fgosite/favourites/${image}.webp`;
 
 ---
 

src/components/navbar.astro

@@ -1,9 +1,9 @@
 ---
-import headerimg from "../../static/link_192.png"
+import headerimg from "/link_192.png"
 ---
 
 <header>
-    <a href={Astro.site} rel="noopener noreferrer" aria-label="Home">
+    <a href="/fgosite/" rel="noopener noreferrer" aria-label="Home">
         <img src={headerimg} alt="">
     </a>
     <ul class="desktop">

src/components/navbarEntry.astro

@@ -17,7 +17,7 @@ if (currentPage === slug) {
     currPage = "current"
 }
 
-const fulllink = `${Astro.site}${slug}`;
+const fulllink = `/fgosite/${slug}`;
 ---
 
 <li>

src/components/servantCard.astro

@@ -12,8 +12,8 @@ export interface Props {
 
 const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
 
-const servant_img: string = `../servant/${image_servant}.webp`;
-const bondce_img: string = `../ce/bond-ce/${image_bond}.webp`
+const servant_img: string = `/fgosite/servant/${image_servant}.webp`;
+const bondce_img: string = `/fgosite/ce/bond-ce/${image_bond}.webp`
 let bondce_css: string = "bond-ce";
 
 if(bond10 === "false") {

src/components/taCard.astro

@@ -7,7 +7,7 @@ export interface Props {
 
 const { image, link, title } = Astro.props;
 
-const icon: string = `background: url('../ta_icons/${image}.webp')`
+const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
 ---
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
     <article>

src/components/technologyCard.astro

@@ -0,0 +1,55 @@
+---
+export interface Props {
+	title: string;
+	link: string;
+	image: string;
+}
+
+const { image, link, title } = Astro.props;
+
+const icon: string = `background-image: url('/fgosite/technologies/${image}.webp')`
+---
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
+    <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 {
+    background-size: contain;
+    width: 128px;
+    height: 128px;
+}
+
+article:hover h2 {
+    color: white;
+    background-color: #1e1e1e;
+    font-size: 18px;
+    display: inline-block;
+    vertical-align: center;
+    line-height: normal;
+    width: 90%;
+    border-radius: 5px;
+    opacity: 90%;
+}
+
+article h2 {
+    display: none;
+}
+</style>