Redesign mostly done

src/components/Card.astro

@@ -1,62 +0,0 @@
----
-export interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.15rem;
-		background-color: white;
-		background-image: var(--accent-gradient);
-		background-size: 400%;
-		border-radius: 0.5rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	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;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
-</style>

src/components/navbar.astro

@@ -1,28 +1,12 @@
 ---
-export interface Props {
-	currentPage: string;
-}
-
-const {currentPage } = Astro.props;
 ---
 
 <header>
-    <a href="">
+    <a href="/" rel="noopener noreferrer" aria-label="Home">
         <img src="link_192.png" alt="">
     </a>
-    <ul role="navigation">
+    <ul>
-        <li><a href="">
+        <slot />
-            <i class="iconoir-home-alt"></i>
-            Home
-        </a></li>
-        <li><a href="">
-            <i class="iconoir-book-stack"></i>
-            Servants
-        </a></li>
-        <li><a href="">
-            <i class="iconoir-database-script"></i>
-            Blog
-        </a></li>
     </ul>
 </header>
 
@@ -61,23 +45,4 @@ const {currentPage } = Astro.props;
         margin-block-end: 0px;
         line-height: 1.5em;
     }
-    li {
-        align-items: center;
-        justify-content: center;
-        text-align: left;
-        display: flex;
-        width: 200px;
-    }
-    li > a {
-        color: white;
-        text-decoration: none;
-        justify-content: center;
-        align-items: center;
-        font-size: 1.4em;
-        height: 100%;
-        font-weight: bold;
-    }
-    li > a:hover{
-        color: #551a8b;
-    }
 </style>

src/components/navbarEntry.astro

@@ -0,0 +1,50 @@
+---
+export interface Props {
+	currentPage?: string;
+    link: string;
+    text: string;
+    icon: string;
+}
+
+const {icon, text, link, currentPage } = Astro.props;
+
+let currPage = "";
+
+if (currentPage === link.replace(new RegExp('/', 'g'), "")) {
+    currPage = "current"
+} else if (currentPage === "home" && link === "/") {
+    currPage = "current"
+}
+---
+
+<li>
+    <a href={link} rel="noopener noreferrer" aria-label={text} class={currPage}>
+        <i class={icon}></i>
+        {text}
+    </a>
+</li>
+
+<style>
+    li {
+        align-items: center;
+        justify-content: center;
+        text-align: left;
+        display: flex;
+        width: 200px;
+    }
+    li > a {
+        color: white;
+        text-decoration: none;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.4em;
+        height: 100%;
+        font-weight: bold;
+    }
+    li > a:hover{
+        color: #551a8b;
+    }
+    .current {
+        color: #b86cffed;
+    }
+</style>

src/layouts/Layout.astro

@@ -1,9 +1,14 @@
 ---
+import Navbar from '../components/navbar.astro';
+import NavbarEntry from '../components/navbarEntry.astro';
+import navdata from '../../static/_navdata.json'
+
 export interface Props {
 	title: string;
+	currentpage: string;
 }
 
-const { title } = Astro.props;
+const { currentpage, title } = Astro.props;
 const description: string = "A reference for all esports Servants, CEs and already completed TAs that Firq can provide. Contact information available as well.";
 ---
 
@@ -25,6 +30,9 @@ const description: string = "A reference for all esports Servants, CEs and alrea
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
 	</head>
 	<body>
+		<Navbar>
+			{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))}
+		</Navbar>
 		<slot />
 	</body>
 </html>

src/layouts/customFooter.astro

@@ -31,7 +31,8 @@
 
 <style>
     footer {
-        color: white
+        color: white;
+        bottom:0;
     }
     footer > div > a {
         color: white

src/pages/about.astro

@@ -1,19 +1,20 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import CustomFooter from '../layouts/customFooter.astro';
+import BasicSection from '../layouts/basicSection.astro';
-import Hometitle from '../layouts/hometitle.astro';
-import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
-import ContactSection from '../layouts/contactSection.astro';
-import contactdata from '../../static/_contactdata.json'
-import ContactCard from '../components/contactCard.astro';
-import AboutSection from '../layouts/aboutSection.astro';
 
+import Navbar from '../components/navbar.astro';
+import NavbarEntry from '../components/navbarEntry.astro';
+import navdata from '../../static/_navdata.json'
+
+import ContactSection from '../layouts/contactSection.astro';
+import ContactCard from '../components/contactCard.astro';
+import contactdata from '../../static/_contactdata.json'
 ---
 
-<Layout title="Firq FGO Site">
+<Layout title="About" currentpage="about">
-    <AboutSection title="About">
+    <BasicSection title="About">
         This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
-    </AboutSection>
+    </BasicSection>
     <ContactSection title="Contact me">
 		{contactdata.map((item) => (<ContactCard {...item}/>))}
 	</ContactSection>

src/pages/blog.astro

@@ -0,0 +1,15 @@
+---
+import Layout from '../layouts/Layout.astro';
+import BasicSection from '../layouts/basicSection.astro';
+
+---
+
+<Layout title="Blog" currentpage="blog">
+    <BasicSection title="Work in Progress">
+        Nothing to see here (yet)
+    </BasicSection>
+    
+</Layout>
+
+<style>
+</style>

src/pages/experiment.astro

@@ -1,14 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Navbar from '../components/navbar.astro';
-import Hero from '../components/hero.astro';
-
----
-
-<Layout title="Expreimenting">
-    <Navbar currentPage="Home"/>
-    <Hero/>
-</Layout>
-
-<style>
-</style>

src/pages/index.astro

@@ -1,15 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import CustomFooter from '../layouts/customFooter.astro';
+import Hero from '../components/hero.astro';
-import Hometitle from '../layouts/hometitle.astro';
-import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
 
 ---
 
-<Layout title="Firq FGO Site">
+<Layout title="Firq FGO Site" currentpage="home">
-    <Hometitle>
+    <Hero/>
-        <NavbuttonsTitle></NavbuttonsTitle>
-    </Hometitle>
 </Layout>
 
 <style>

src/pages/index.astro.old

@@ -0,0 +1,17 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+---
+
+<Layout title="Firq FGO Site">
+    <Navbar/>
+    <Title/>
+    <Divider/>
+    <HomeLayout>
+        <AboutMe/>
+        <Favourites/>
+    </HomeLayout>
+</Layout>
+
+<style>
+</style>

src/pages/servants.astro

@@ -1,32 +1,23 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import BaseSection from '../layouts/baseSection.astro';
-import TaSection from '../layouts/taSection.astro';
-import ContactSection from '../layouts/contactSection.astro';
 import CustomFooter from '../layouts/customFooter.astro';
 
 import ServantCard from '../components/servantCard.astro';
-import CeCard from '../components/ceCard.astro';
-import TaCard from '../components/taCard.astro';
-import ContactCard from '../components/contactCard.astro';
-
 import servantdata from '../../static/_servantdata.json'
+
+import CeCard from '../components/ceCard.astro';
 import cedata from '../../static/_cedata.json'
-import tadata from '../../static/_tadata.json'
-import contactdata from '../../static/_contactdata.json'
 
 ---
 
-<Layout title="Firq TA on Astro">
+<Layout title="Servants" currentpage="servants">
 	<BaseSection title="Servant Offering">
 		{servantdata.map((item) => (<ServantCard {...item}/>))}
 	</BaseSection>
 	<BaseSection title="CE Offering">
 		{cedata.map((item) => (<CeCard {...item}/>))}
 	</BaseSection>
-	<TaSection title="Completed TAs">
-		{tadata.map((item) => (<TaCard {...item}/>))}
-	</TaSection>
 	<CustomFooter />
 </Layout>
 

src/pages/ta-collection.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '../layouts/Layout.astro';
+import CustomFooter from '../layouts/customFooter.astro';
+
+import TaSection from '../layouts/taSection.astro';
+import TaCard from '../components/taCard.astro';
+import tadata from '../../static/_tadata.json'
+
+---
+
+<Layout title="TA Collection" currentpage="ta-collection">
+    <TaSection title="Completed TAs">
+		{tadata.map((item) => (<TaCard {...item}/>))}
+	</TaSection>
+    <CustomFooter />
+</Layout>
+
+<style>
+</style>

static/_navdata.json

@@ -0,0 +1,27 @@
+[
+	{
+        "link": "/",
+        "text": "Home",
+        "icon": "iconoir-home-alt"
+	},
+    {
+        "link": "/servants",
+        "text": "Servants",
+        "icon": "iconoir-database-script"
+	},
+    {
+        "link": "/ta-collection",
+        "text": "TA Collection",
+        "icon": "iconoir-db"
+	},
+    {
+        "link": "/blog",
+        "text": "Blog",
+        "icon": "iconoir-bookmark-book"
+	},
+    {
+        "link": "/about",
+        "text": "About",
+        "icon": "iconoir-mail"
+	}
+]

static/_tadata.json

@@ -28,5 +28,50 @@
 		"title": "MHXX 2T (No DMG CE)",
 		"link": "https://www.youtube.com/watch?v=lz6iBZvoDuw",
 		"image": "mhxx"
+	},
+	{
+		"title": "Taira 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
+		"image": "taira"
+	},
+	{
+		"title": "Douman 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
+		"image": "douman"
+	},
+	{
+		"title": "Christmas 2021 Rerun CQ 5T",
+		"link": "https://www.youtube.com/watch?v=cpqhx9dUgTU",
+		"image": "santagale"
+	},
+	{
+		"title": "Summer 4 Rerun CQ 3T",
+		"link": "https://www.youtube.com/watch?v=u72o7PDBtks",
+		"image": "fuuma"
+	},
+	{
+		"title": "Fate/Requiem CQ 3T",
+		"link": "https://www.youtube.com/watch?v=k7vGC4kpEFg",
+		"image": "erice"
+	},
+	{
+		"title": "Kirschtaria 3T (Lostbelt 5)",
+		"link": "https://www.youtube.com/watch?v=k7vGC4kpEFg",
+		"image": "kirschtaria"
+	},
+	{
+		"title": "Aeaean Spring Breeze CQ 3T",
+		"link": "https://www.youtube.com/watch?v=uo3jI9xuVwI",
+		"image": "odysseus"
+	},
+	{
+		"title": "Valentines 2022 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=MOCMXZ17FkU",
+		"image": "sei"
+	},
+	{
+		"title": "Amazoness 2021 CQ 3T",
+		"link": "https://www.youtube.com/watch?v=MU_Hw2KKYRU",
+		"image": "penth"
 	}
 ]