From d35236c0734dc10c55829d16cfad4511c356e995 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Sat, 21 Jan 2023 00:43:00 +0100
Subject: [PATCH] Mostly rewritten here, lets see about deployment tomorrow

---
 src/components/contactCard.astro              | 37 ++++++++++++
 src/components/taCard.astro                   | 56 +++++++++++++++++++
 src/layouts/Layout.astro                      |  8 +++
 src/layouts/contactSection.astro              | 37 ++++++++++++
 src/layouts/customFooter.astro                | 56 +++++++++++++++++++
 src/layouts/taSection.astro                   | 41 ++++++++++++++
 src/pages/index.astro                         | 20 ++++++-
 static/{cedata.json => _cedata.json}          |  0
 static/_contactdata.json                      | 22 ++++++++
 .../{servantdata.json => _servantdata.json}   |  0
 static/_tadata.json                           | 12 ++++
 11 files changed, 287 insertions(+), 2 deletions(-)
 create mode 100644 src/components/contactCard.astro
 create mode 100644 src/components/taCard.astro
 create mode 100644 src/layouts/contactSection.astro
 create mode 100644 src/layouts/customFooter.astro
 create mode 100644 src/layouts/taSection.astro
 rename static/{cedata.json => _cedata.json} (100%)
 create mode 100644 static/_contactdata.json
 rename static/{servantdata.json => _servantdata.json} (100%)
 create mode 100644 static/_tadata.json

diff --git a/src/components/contactCard.astro b/src/components/contactCard.astro
new file mode 100644
index 0000000..a9acd46
--- /dev/null
+++ b/src/components/contactCard.astro
@@ -0,0 +1,37 @@
+---
+export interface Props {
+	site: string;
+	link: string;
+}
+
+const { link, site } = Astro.props;
+---
+
+<a href={link} target="_blank" rel="noopener noreferrer">
+    <article class="contact do-hover">
+        <h2>{site}</h2>
+    </article>
+</a>
+
+<style>
+    article>h2 {
+        color: white;
+        font-size: 18px;
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+    }
+    article {
+        background-color: rgb(27, 27, 27);
+        border-color: #1e1e1e;
+        padding: 10px;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+        height: 128px;
+        width: 128px;
+        line-height: 128px;
+    }
+    a:hover {
+        transform: scale(var(--hover-scale));
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/taCard.astro b/src/components/taCard.astro
new file mode 100644
index 0000000..04a655d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e48e2b4..e139a72 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ export interface Props {
 }
 
 const { 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.";
 ---
 
 <!DOCTYPE html>
@@ -13,6 +14,13 @@ const { title } = Astro.props;
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/ico" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
+		<meta property="og:title" content="Firq TA Reference" />
+    	<meta property="og:url" content="https://firq.gitpages.neshura-server.net/firq-ta-reference/" />
+    	<meta name="description" content={description}/>
+    	<meta property="og:description" content={description}/>
+    	<meta property="og:image" content="https://firq.gitpages.neshura-server.net/firq-ta-reference/assets/link_192.png" />
+    	<meta property="og:type" content="website" />
+    	<meta property="og:locale" content="en_US" />
 		<title>{title}</title>
 	</head>
 	<body>
diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro
new file mode 100644
index 0000000..ab07042
--- /dev/null
+++ b/src/layouts/contactSection.astro
@@ -0,0 +1,37 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<section>
+    <h1>{title}</h1>
+    <div>
+        <slot />
+    </div>
+</section>
+
+<style>
+h1 {
+    color: white;
+    margin: 0.5rem 0px;
+    padding: 0.25rem 0.75rem;
+    width: max-content;
+    background-color: #1e1e1e;
+}
+div {
+    row-gap: 1em;
+    column-gap: 1em;
+    justify-content: center;
+    align-self: center;
+    display: flex;
+    flex-flow: row wrap;
+    padding: 1em;
+}
+@media (min-width: 512px) {
+    div {
+        justify-content: left;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/customFooter.astro b/src/layouts/customFooter.astro
new file mode 100644
index 0000000..c5f81f8
--- /dev/null
+++ b/src/layouts/customFooter.astro
@@ -0,0 +1,56 @@
+---
+
+---
+
+<footer>
+    <div>Disclaimer:
+        “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
+        use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
+            official website</a> for
+        more
+        information
+    </div>
+    <div>
+        Thanks to <a href=" https://atlasacademy.io/" target="_blank" rel="noopener noreferrer">Atlas Academy</a> for
+        providing the images.
+    </div>
+    <div>
+        Thanks to <a href="https://mitsunee.com" target="_blank" rel="noopener noreferrer">Mitsunee</a> for the support when building this site.
+        Check out <a href="https://fgo.mitsunee.com" target="_blank" rel="noopener noreferrer">FGO Timers here</a>
+        <div class="sticky-image-wrapper">
+            <img src="lurker.png" alt="">
+        </div>
+    </div>
+    <div>
+        Thanks to <a href="https://twitter.com/its_Anthony_J" target="_blank" rel="noopener noreferrer">AnthonyJ</a> for providing me with the custom Shishou favicon.
+        <div class="sticky-image-wrapper">
+            <img src="padoru.png" alt="">
+        </div>
+    </div>
+</footer>
+
+<style>
+    footer {
+        color: white
+    }
+    footer > div > a {
+        color: white
+    }
+    .sticky-image-wrapper {
+        position: fixed;
+        bottom: 0;
+        right: 50%;
+    }
+    :hover>.sticky-image-wrapper>img {
+        transform: translate(-50%, -100px);
+    }
+    .sticky-image-wrapper>img {
+        display: block;
+        position: absolute;
+        bottom: -100px;
+        height: 64px;
+        width: 64px;
+        transition: transform 1s ease-in-out;
+        transform: translateX(-50%);
+    }
+</style>
\ No newline at end of file
diff --git a/src/layouts/taSection.astro b/src/layouts/taSection.astro
new file mode 100644
index 0000000..51eaa6c
--- /dev/null
+++ b/src/layouts/taSection.astro
@@ -0,0 +1,41 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<div>
+    <h1>{title}</h1>
+    <h2>The full list of my completed TAs can be found on my Youtube channel. This is only a small selection of the most notable TAs</h2>
+    <div class="container ta-container">
+        <slot />
+    </div>
+</div>
+
+<style>
+   div > div {
+        row-gap: 1.5em;
+        column-gap: 1.5em;
+        justify-content: center;
+        align-self: center;
+        display: flex;
+        flex-flow: row wrap;
+        padding: 1em;
+    }
+    h1 {
+        color: white;
+        margin: 0.5rem 0px;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: #1e1e1e;
+    }
+    h2 {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 5;
+        line-height: 20px;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index da047d9..2dd1787 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,20 @@
 ---
 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 cedata from '../../static/_cedata.json'
+import tadata from '../../static/_tadata.json'
+import contactdata from '../../static/_contactdata.json'
 
-import servantdata from '../../static/servantdata.json'
-import cedata from '../../static/cedata.json'
 ---
 
 <Layout title="Firq TA on Astro">
@@ -15,6 +24,13 @@ import cedata from '../../static/cedata.json'
 	<BaseSection title="CE Offering">
 		{cedata.map((item) => (<CeCard {...item}/>))}
 	</BaseSection>
+	<TaSection title="Completed TAs">
+		{tadata.map((item) => (<TaCard {...item}/>))}
+	</TaSection>
+	<ContactSection title="Contact me">
+		{contactdata.map((item) => (<ContactCard {...item}/>))}
+	</ContactSection>
+	<CustomFooter />
 </Layout>
 
 <style>
diff --git a/static/cedata.json b/static/_cedata.json
similarity index 100%
rename from static/cedata.json
rename to static/_cedata.json
diff --git a/static/_contactdata.json b/static/_contactdata.json
new file mode 100644
index 0000000..3198dfe
--- /dev/null
+++ b/static/_contactdata.json
@@ -0,0 +1,22 @@
+[
+	{
+		"site": "Youtube: @Firq_",
+		"link": "https://www.youtube.com/@Firq_"
+	},
+	{
+		"site": "Discord: Firq#4242",
+		"link": "https://discord.gg"
+	},
+	{
+		"site": "Twitter: Firq_ow",
+		"link": "https://twitter.com/firq_ow"
+	},
+	{
+		"site": "Reddit: u/Firq_ow",
+		"link": "https://www.reddit.com/user/firq_ow"
+	},
+	{
+		"site": "Support Setup on Rayshift",
+		"link": "https://rayshift.io/na/firq"
+	}
+]
diff --git a/static/servantdata.json b/static/_servantdata.json
similarity index 100%
rename from static/servantdata.json
rename to static/_servantdata.json
diff --git a/static/_tadata.json b/static/_tadata.json
new file mode 100644
index 0000000..35b714d
--- /dev/null
+++ b/static/_tadata.json
@@ -0,0 +1,12 @@
+[
+	{
+		"title": "DB 7T (No Duplicates)",
+		"link": "https://www.youtube.com/watch?v=d1ftVeitR6c",
+		"image": "db"
+	},
+	{
+		"title": "Kingprotea 1T",
+		"link": "https://www.youtube.com/watch?v=m3SATSOfpt4",
+		"image": "kingprotea"
+	}
+]