New Files

.gitignore

@@ -0,0 +1,20 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README_astro.md

@@ -0,0 +1,50 @@
+# Welcome to [Astro](https://astro.build)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
+
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                             |
+| :--------------------- | :------------------------------------------------- |
+| `npm install`          | Installs dependencies                              |
+| `npm run dev`          | Starts local dev server at `localhost:3000`        |
+| `npm run build`        | Build your production site to `./dist/`            |
+| `npm run preview`      | Preview your build locally, before deploying       |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
+| `npm run astro --help` | Get help using the Astro CLI                       |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+    outDir: 'public',
+    publicDir: 'static',
+    base: '/firq-ta-on-astro',
+    site: 'https://firq.gitlab.neshweb.net/firq-ta-on-astro/'
+});

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@example/basics",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^1.9.0"
+  }
+}

src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+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/servantCard.astro

@@ -0,0 +1,137 @@
+---
+export interface Props {
+	name: string;
+	level: string;
+    skills: string;
+    np: string;
+    asc: string;
+    ml: string;
+    bond10: string;
+}
+
+const {bond10, ml, asc, np, skills, level, name } = Astro.props;
+
+const servant_img: string = `servant/${name}_${asc}.png`;
+const bondce_img: string = `ce/bond-ce/${name}.png`
+let bondce_css: string = "bond-ce";
+
+if(bond10 === "false") {
+    bondce_css += " unobtained" 
+}
+---
+
+<article>
+    <div class="heading-center">
+        <h1 class="servantname">{name}</h1>
+    </div>
+    <img src={servant_img} alt={name}>
+    <h2 class="subtext">
+        Level {level}<br>
+        {skills}<br>
+        {np}</h2>
+    <div class="expand-on-hover">
+        <img class={bondce_css} src={bondce_img} alt="">
+        <h2 class="subtext">Mana Loading: {ml}</h2>
+    </div>
+</article>
+
+<style>
+    .heading-section {
+        justify-content: center;
+        text-align: center;
+    }
+
+    .heading-center {
+        display: table;
+        width: 100%;
+        height: 4.5rem;
+    }
+
+    .servants-container {
+        row-gap: 1em;
+        column-gap: 1em;
+        justify-content: center;
+        align-self: center;
+    }
+
+    article:hover {
+        transform: scale(var(--hover-scale));
+    }
+
+    article {
+        background-color: rgb(27, 27, 27);
+        border-color: #1e1e1e;
+        padding: 0em 0.75em;
+        width: 40%;
+        height: auto;
+        justify-content: center;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+    }
+
+    article>img {
+        width:120px;
+        height:auto;
+    }
+
+    @media(min-width: 512px) {
+        article {
+            padding: 10px 10px;
+            width: auto;
+            height: auto;
+        }
+
+        .servants-container {
+        row-gap: 1.5em;
+        column-gap: 1.5em;
+        }
+
+        article>img {
+        width: 200px;
+        height: auto;
+        }
+    }
+
+    .subtext {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 5;
+        line-height: 20px;
+    }
+
+    .servantname {
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    .expand-on-hover {
+        z-index: 99;
+        transform: scaleY(0);
+        transform-origin: top;
+        position: absolute;
+        top: 95%;
+        left: 0px;
+        right: 0px;
+    }
+
+    article:hover .expand-on-hover {
+        transform: scaleY(1);
+        transition: transform 200ms ease-in-out;
+        background-color: #242424;
+    }
+
+    .bond-ce {
+        padding-top: 0.75rem;
+        height: 3rem;
+        width: auto;
+    }
+
+    .unobtained {
+        filter: grayscale(1)
+    }
+</style>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/ico" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+    	--hover-scale: 1.05;
+    	--speed: 50%;
+    	--ease: 50%;
+    	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	}
+	body {
+		background: #3e3e3e;
+	}
+</style>

src/pages/index.astro

@@ -0,0 +1,44 @@
+---
+import Layout from '../layouts/Layout.astro';
+import ServantCard from '../components/servantCard.astro';
+---
+
+<Layout title="Firq TA on Astro.">
+	<main>
+		<div class="servant-section">
+			<h1 class="section-title">Servant offering</h1>
+			<div class="servants-container container">
+				<ServantCard 
+					name="Skadi" 
+					level="120" 
+    				skills="10 / 10 / 10"
+    				np="NP4"
+    				asc="03"
+    				ml="10"
+    				bond10="true"
+				/>
+			</div>
+		</div>
+	</main>
+</Layout>
+
+<style>
+	.servants-container {
+    	row-gap: 1em;
+    	column-gap: 1em;
+    	justify-content: center;
+    	align-self: center;
+	}
+	.container {
+    	display: flex;
+    	flex-flow: row wrap;
+    	padding: 1em;
+		position: relative;
+	}
+	.servant-section {
+    	display: flex;
+    	flex-direction: column;
+    	justify-content: center;
+    	text-align: center;
+	}
+</style>

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}