Scrollbar

Unlighthouse rework with docker 6
Unlighthouse rework with docker 5
2024-11-03 20:58:35 +01:00 · 2024-11-01 16:17:38 +01:00 · 2024-11-01 16:09:53 +01:00 · 2024-11-01 16:05:41 +01:00 · 2024-11-01 15:59:40 +01:00 · 2024-11-01 15:55:08 +01:00
93 changed files with 4307 additions and 10093 deletions
--- a/.forgejo/workflows/build_preview.yml
+++ b/.forgejo/workflows/build_preview.yml
@ -1,41 +1,59 @@
+name: Build and deploy preview site
+run-name: Building and deploying preview for version ${{ github.ref_name }}
 on:
  push:
    tags:
-      - '[0-9]+\.[0-9]+\.[0-9]+pre[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+-pre\.[0-9]+'

 jobs:
-  checking:
+  check-tag:
    runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          if test $VERSION != "${{ github.ref_name }}"; then 
+            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
+            exit 1
+          else 
+            echo "Version is: '$VERSION'"; 
+          fi 
+
+  checking:
+    needs: [ check-tag ]
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
    steps:
      - name: Checkout source code
        uses: https://code.forgejo.org/actions/checkout@v3
      - name: Install packages
-        run: npm install
+        run: npm i
      - name: Run astro check (linting +  static analysis)
        run: npm run astro check

  build-site:
-    needs: [checking]
+    needs: [ checking ]
    if: success()
    runs-on: dind
    steps:
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
-      - name: Login to Docker Hub
+      - name: Log into Docker Package Registry
        uses: docker/login-action@v3
        with:
          registry: forgejo.neshweb.net
          username: ${{ secrets.FORGEJO_USERNAME }}
          password: ${{ secrets.FORGEJO_TOKEN }}
-      - name: Push to Package Registry
+      - name: Build and push to Docker Package Registry
        uses: docker/build-push-action@v5
        with:
          push: true
          tags: forgejo.neshweb.net/firq/firq-dev-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/firq-dev-website:preview

-  publish:
-    needs: [build-site]
+  create-release:
+    needs: [ build-site ]
    if: success()
    runs-on: docker
    steps:
@ -49,22 +67,33 @@ jobs:
          tag: ${{  github.ref_name }}
          prerelease: true

-  # doesn't work atm
-  # unlighthouse:
-  #   needs: [publish]
-  #   if: success()
-  #   runs-on: docker
-  #   container: registry.gitlab.com/gitlab-ci-utils/lighthouse:latest
-  #   services:
-  #     website:
-  #       image: forgejo.neshweb.net/firq/firq-dev-website:preview
-  #   steps:
-  #     - name: Install Dependencies
-  #       run: npm install @unlighthouse/cli puppeteer
-  #     - name: Run unlighthouse
-  #       run: node_modules/.bin/unlighthouse-ci
-  #     - name: Upload reports
-  #       uses: actions/upload-artifact@v3
-  #       with:
-  #         name: unlighthouse-reports
-  #         path: unlighthouse-reports/
+  auto-deploy-dockge:
+    needs: [ build-site ]
+    if: success()
+    runs-on: docker
+    container: forgejo.neshweb.net/firq/dockge-cli:0.1.2
+    steps:
+      - name: Configure Dockge CLI
+        run: |
+          dockge host '${{ vars.DOCKGE_HOST }}'
+          dockge login --user '${{ secrets.DOCKGE_USER }}' --password '${{ secrets.DOCKGE_CREDENTIAL }}'
+      - name: Check status and redeploy
+        run: |
+          dockge status firq-dev-preview
+          dockge update firq-dev-preview
+          dockge status firq-dev-preview
+
+  run-unlighthouse:
+    needs: [ build-site ]
+    if: success()
+    runs-on: docker
+    steps:
+      - name: Launch workflow
+        run: |
+          payload="{\"ref\": \"${GITHUB_REF_NAME}\", \"inputs\": { \"containertag\": \"${GITHUB_REF_NAME}\" }}"
+          curl -X "POST" \
+          -H "accept: application/json" \
+          -H "Content-Type: application/json" \
+          -H "Authorization: token ${GITHUB_TOKEN}" \
+          -d "${payload}" \
+          "${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/actions/workflows/unlighthouse.yml/dispatches" -v
--- a/.forgejo/workflows/build_release.yml
+++ b/.forgejo/workflows/build_release.yml
@ -1,41 +1,90 @@
+name: Build and deploy production site
+run-name: Building and deploying release for version ${{ github.ref_name }}
 on:
  push:
    tags:
      - '[0-9]+\.[0-9]+\.[0-9]+'

 jobs:
-  checking:
+  check-tag:
    runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          if test $VERSION != "${{ github.ref_name }}"; then 
+            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
+            exit 1
+          else 
+            echo "Version is: '$VERSION'"; 
+          fi 
+
+  checking:
+    needs: [ check-tag ]
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
    steps:
      - name: Checkout source code
        uses: https://code.forgejo.org/actions/checkout@v3
      - name: Install packages
-        run: npm install
+        run: npm i
      - name: Run astro check (linting +  static analysis)
        run: npm run astro check

  build-site:
-    needs: [checking]
+    needs: [ checking ]
    if: success()
    runs-on: dind
    steps:
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
-      - name: Login to Docker Hub
+      - name: Log into Docker Package Registry
        uses: docker/login-action@v3
        with:
          registry: forgejo.neshweb.net
          username: ${{ secrets.FORGEJO_USERNAME }}
          password: ${{ secrets.FORGEJO_TOKEN }}
-      - name: Push to Package Registry
+      - name: Build and push to Docker Package Registry
        uses: docker/build-push-action@v5
        with:
          push: true
          tags: forgejo.neshweb.net/firq/firq-dev-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/firq-dev-website:latest

-  release:
-    needs: [build-site]
+  auto-deploy-dockge:
+    needs: [ build-site ]
+    if: success()
+    runs-on: docker
+    container: forgejo.neshweb.net/firq/dockge-cli:0.1.2
+    steps:
+      - name: Configure Dockge CLI
+        run: |
+          dockge host '${{ vars.DOCKGE_HOST }}'
+          dockge login --user '${{ secrets.DOCKGE_USER }}' --password '${{ secrets.DOCKGE_CREDENTIAL }}'
+      - name: Check status and redeploy
+        run: |
+          dockge status firq-dev
+          dockge update firq-dev
+          dockge status firq-dev
+  
+  run-unlighthouse:
+    needs: [ build-site ]
+    if: success()
+    runs-on: docker
+    steps:
+      - name: Launch workflow
+        run: |
+          payload="{\"ref\": \"${GITHUB_REF_NAME}\", \"inputs\": { \"containertag\": \"${GITHUB_REF_NAME}\" }}"
+          curl -X "POST" \
+          -H "accept: application/json" \
+          -H "Content-Type: application/json" \
+          -H "Authorization: token ${GITHUB_TOKEN}" \
+          -d "${payload}" \
+          "${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/actions/workflows/unlighthouse.yml/dispatches" -v
+
+  create-release:
+    needs: [ build-site ]
    if: success()
    runs-on: docker
    steps:
--- a/.forgejo/workflows/linting.yml
+++ b/.forgejo/workflows/linting.yml
@ -1,16 +1,27 @@
+name: Linting and checking code
+run-name: Linting and checking code
 on:
  push:
    branches:
-      - "**"
+      - '**'

 jobs:
-  checking:
+  get-version:
    runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Get version from package.json
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          echo "Version is: '$VERSION'"; 
+  astro-check:
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
    steps:
      - name: Checkout source code
        uses: https://code.forgejo.org/actions/checkout@v3
      - name: Install packages
-        run: npm install
+        run: npm i
      - name: Run astro check (linting +  static analysis)
        run: npm run astro check
--- a/.forgejo/workflows/unlighthouse.yml
+++ b/.forgejo/workflows/unlighthouse.yml
@ -1,18 +1,36 @@
+name: Run unlighthouse-tests [Downstream pipeline]
+run-name: Run unlighthouse-tests [Downstream pipeline] for version ${{ inputs.containertag }}
 on:
-  push:
-    tags:
-      - '[0-9]+\.[0-9]+\.[0-9]+unlighthouse[0-9]+'
-      - '[0-9]+\.[0-9]+\.[0-9]+ulh[0-9]+'
+  workflow_dispatch:
+    inputs:
+      containertag:
+        description: "Tag of the container to test"
+        default: "preview"
+        type: "string"

 jobs:
  unlighthouse:
    runs-on: docker
-    container: forgejo.neshweb.net/ci-docker-images/unlighthouse:latest
+    container: 
+      image: forgejo.neshweb.net/ci-docker-images/unlighthouse:0.3.0
+    services:
+      website:
+        image: forgejo.neshweb.net/firq/firq-dev-website:${{ inputs.containertag }}
+        options: >-
+          --workdir /
    steps:
      - name: Checkout repository
        uses: https://code.forgejo.org/actions/checkout@v3 
+      - name: Check availability
+        run: |
+          while [ "$(curl -o /dev/null -s -w '%{http_code}' http://localhost:8081/)" -ne 200 ];
+            do echo "Waiting...";
+            sleep 5;
+          done;
      - name: Run unlighthouse
-        run: unlighthouse-ci --site "https://preview.firq.dev/"
+        run: unlighthouse-ci --site "http://localhost:8081/"
+      - name: Replace URLs
+        run: find ./unlighthouse-reports -type f | xargs sed -i "s|http://localhost:8081|https://preview.firq.dev|g";
      - name: Prepare artifacts
        run: cp serve.json unlighthouse-reports
      - name: Upload reports
@ -20,79 +38,54 @@ jobs:
        with:
          name: unlighthouse-reports
          path: unlighthouse-reports/
+      - name: Upload Dockerfile
+        uses: actions/upload-artifact@v3
+        with:
+          name: dockerfile
+          path: Dockerfile.reports

-  deploy-unlighthouse-files:
+  build-site:
    needs: [ unlighthouse ]
    if: success()
-    runs-on: docker
-    env: 
-      DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
-      DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+    runs-on: dind
    steps:
-      - name: Install and update ssh + rsync
-        run: |
-            which rsync || ( apt update -y && apt install rsync -y)
-            which ssh-agent || ( apt update -y && apt install openssh-client -y)            
+      - name: Downloading static site artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: dockerfile
      - name: Downloading static site artifacts
        uses: actions/download-artifact@v3
        with:
          name: unlighthouse-reports
-          path: public
-      - name: Install SSH Key
-        uses: https://github.com/shimataro/ssh-key-action@v2
+          path: reports
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Log into Docker Package Registry
+        uses: docker/login-action@v3
        with:
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          known_hosts: unnecessary
-      - name: Adding Known Hosts
-        run: ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
-      - name: Stop screen session, delete old files
-        uses: https://github.com/appleboy/ssh-action@master
+          registry: forgejo.neshweb.net
+          username: ${{ secrets.FORGEJO_USERNAME }}
+          password: ${{ secrets.FORGEJO_TOKEN }}
+      - name: Build and push to Docker Package Registry
+        uses: docker/build-push-action@v5
        with:
-          host: ${{ env.DEPLOY_HOST }}
-          username: ${{ env.DEPLOY_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            screen -X -S firq_dev-unlighthouse kill
-            rm -r -f firq_dev/unlighthouse/*            
-      - name: Copy files using rsync
-        run: rsync -az --stats public/* ${{ env.DEPLOY_USER }}@${{ env.DEPLOY_HOST }}:~/firq_dev/unlighthouse
-      - name: Check files on deploy target
-        uses: https://github.com/appleboy/ssh-action@master
-        with:
-          host: ${{ env.DEPLOY_HOST }}
-          username: ${{ env.DEPLOY_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            cd firq_dev
-            find unlighthouse -maxdepth 1 -printf "%p\n"            
+          context: .
+          file: Dockerfile.reports
+          push: true
+          tags: forgejo.neshweb.net/firq/firq-dev-website-unlighthouse:latest

-  deploy-unlighthouse-site:
-    needs: [ deploy-unlighthouse-files ]
+  auto-deploy-dockge:
+    needs: [ build-site ]
    if: success()
    runs-on: docker
-    env: 
-      DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
-      DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
+    container: forgejo.neshweb.net/firq/dockge-cli:0.1.2
    steps:
-      - name: Install and update ssh + rsync
+      - name: Configure Dockge CLI
        run: |
-            which rsync || ( apt update -y && apt install rsync -y)
-            which ssh-agent || ( apt update -y && apt install openssh-client -y)            
-      - name: Install SSH Key
-        uses: https://github.com/shimataro/ssh-key-action@v2
-        with:
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          known_hosts: unnecessary
-      - name: Adding Known Hosts
-        run: ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
-      - name: Start new screen session
-        uses: https://github.com/appleboy/ssh-action@master
-        with:
-          host: ${{ env.DEPLOY_HOST }}
-          username: ${{ env.DEPLOY_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            PATH="$HOME/.local/bin:$PATH"
-            screen -ls | grep 'firq_dev-unlighthouse' | awk '{print $1}' | xargs -I % -t screen -X -S % quit
-            cd firq_dev
-            screen -S firq_dev-unlighthouse -dm serve unlighthouse/ -p ${{ secrets.UNLIGHTHOUSE_DEPLOY_PORT }}   
+          dockge host '${{ vars.DOCKGE_HOST }}'
+          dockge login --user '${{ secrets.DOCKGE_USER }}' --password '${{ secrets.DOCKGE_CREDENTIAL }}'
+      - name: Check status and redeploy
+        run: |
+          dockge status firq-dev-unlighthouse
+          dockge update firq-dev-unlighthouse
+          dockge status firq-dev-unlighthouse
--- a/.gitignore
+++ b/.gitignore
@ -1,9 +1,14 @@
 # build output
 dist/
 .output/
-public/
 maintenance/

+# astro stuff
+.astro/
+
+# config stuff
+.vscode/
+
 # Temp Scripts
 scripts/

@ -23,10 +28,3 @@ pnpm-debug.log*

 # macOS-specific files
 .DS_Store
-
-# exclude default png images
-static/**/*.png
-!static/assets/embed.png
-!static/assets/lurker.png
-!static/assets/padoru.png
-!static/assets/fedora.png
--- a/.markdownlint.json
+++ b/.markdownlint.json
@ -0,0 +1,5 @@
+{
+    "MD013":false,
+    "MD033": false,
+    "MD036": false
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -4,3 +4,4 @@
 **/public
 **/static
 **/scripts
+**/dist
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,12 +0,0 @@
-{
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/Thumbs.db": true,
-        "**/__pycache__": true
-    },
-    "hide-files.files": []
-}
--- a/11
+++ b/11
@ -1,16 +1,15 @@
-FROM node:lts AS build
+FROM node:22-alpine AS build
 WORKDIR /app
 COPY . .
 RUN npm i
+RUN npm run astro telemetry disable
 RUN npm run build

-FROM forgejo.neshweb.net/ci-docker-images/website-serve:latest AS runtime
+FROM forgejo.neshweb.net/ci-docker-images/website-serve:2 AS runtime

 COPY --from=build /app/dist /public
 COPY --from=build /app/serve.json /public/serve.json
-RUN rm -r /public/data/
+RUN rm /public/.original.favicon.ico

-ENV PORT 8081
 EXPOSE 8081
-
-CMD [ "serve", "public/", "-p", "8081" ]
+CMD serve public/ -p 8081
--- a/Dockerfile.reports
+++ b/Dockerfile.reports
@ -0,0 +1,6 @@
+FROM forgejo.neshweb.net/ci-docker-images/website-serve:2 AS runtime
+
+ADD reports /public
+
+EXPOSE 8081
+CMD serve public/ -p 8081
--- a/README.md
+++ b/README.md
@ -2,43 +2,6 @@

 This is build using [Astro](https://astro.build)

-
-## 🚀 Project Structure
-
-```
-/
-├── static/
-│   ├── favicon.svg
-│   └── other files ...
-│
-├── src/
-│   ├── components/
-│   │   ├── servantCard.astro
-│   │   ├── ceCard.astro
-│   │   ├── contactCard.astro
-│   │   └── taCard.astro
-│   │
-│   ├── layouts/
-│   │   ├── customFooter.astro
-│   │   ├── baseSection.astro
-│   │   ├── taSection.astro
-│   │   ├── contactSection.astro
-│   │   └── Layout.astro
-│   │
-│   └── pages/
-│       └── index.astro
-│
-├── .gitlab-ci.yml
-├── astro.config.mjs
-└── 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.
-
-More routes will follow soon
-
-Any static assets, like images, can be placed in the `static/` directory.
-
 ## 🧞 Astro-Specific Commands

 All commands are run from the root of the project, from a terminal:
@ -51,4 +14,3 @@ All commands are run from the root of the project, from a terminal:
 | `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                       |
-
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,14 +1,15 @@
 import { defineConfig } from 'astro/config';

-import sitemap from "@astrojs/sitemap";
 import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+import astroMetaTags from "astro-meta-tags";

 // https://astro.build/config
 export default defineConfig({
  sitemap: true,
  base: '/',
  outDir: 'dist',
-  publicDir: 'static',
+  publicDir: 'public',
  site: 'https://firq.dev/',
-  integrations: [sitemap(), mdx()]
+  integrations: [sitemap(), mdx(), astroMetaTags()]
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.27",
+	"version": "0.2.0-pre.59",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@ -11,15 +11,17 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astro-community/astro-embed-youtube": "^0.4.3",
-		"@astrojs/check": "^0.3.3",
-		"@astrojs/mdx": "^2.0.3",
-		"@astrojs/sitemap": "^3.0.3",
-		"astro": "^4.2.1",
-		"autoprefixer": "^10.4.16",
-		"iconoir": "^7.2.0",
-		"postcss-preset-env": "^9.3.0",
-		"typescript": "^5.3.3"
+		"@astro-community/astro-embed-youtube": "^0.5.2",
+		"@astrojs/check": "^0.9.4",
+		"@astrojs/mdx": "^3.1.8",
+		"@astrojs/sitemap": "^3.2.1",
+		"@fontsource-variable/work-sans": "^5.1.0",
+		"astro": "^4.16.6",
+		"astro-meta-tags": "^0.3.1",
+		"autoprefixer": "^10.4.19",
+		"iconoir": "^7.7.0",
+		"postcss-preset-env": "^9.6.0",
+		"typescript": "^5.5.3"
 	},
 	"browserslist": [
 		"last 2 versions",
--- a/public/.original.favicon.ico
+++ b/public/.original.favicon.ico
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,8 @@
+User-agent: *
+Disallow: /assets/data/
+
+User-agent: GPTBot
+User-agent: Bytespider
+Disallow: /
+
+Sitemap: https://firq.dev/sitemap-index.xml
--- a/serve.json
+++ b/serve.json
@ -17,6 +17,15 @@
        "value" : "max-age=31536000"
      }]
    },
+    {
+      "source": "**/*.woff2",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value" : "max-age=31536000"
+        }
+      ]
+    },
    {
      "source" : "**/*.@(jpg|jpeg|gif|png|webp|svg)",
      "headers" : [{
--- a/src/assets/ce/bond-ce/summerskadi.png
+++ b/src/assets/ce/bond-ce/summerskadi.png
--- a/src/assets/custom-svg/discord.svg
+++ b/src/assets/custom-svg/discord.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
--- a/src/assets/custom-svg/forgejo.svg
+++ b/src/assets/custom-svg/forgejo.svg
@ -0,0 +1,37 @@
+<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
+  <metadata
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+  >
+    <rdf:RDF>
+      <cc:Work rdf:about="https://codeberg.org/forgejo/governance/src/branch/main/branding#logo">
+        <dc:title>Forgejo logo</dc:title>
+        <cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <style type="text/css">
+    :root, svg {
+      color-scheme: dark light;
+    }
+    circle {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 15;
+    }
+    path {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 25;
+    }
+  </style>
+  <g transform="translate(6,6)">
+    <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
+    <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
+    <circle cx="142" cy="20" r="18" />
+    <circle cx="142" cy="88" r="18" />
+    <circle cx="58" cy="180" r="18" />
+  </g>
+</svg>
--- a/src/assets/custom-svg/rayshift.svg
+++ b/src/assets/custom-svg/rayshift.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="124.48" height="203.92" version="1.1" viewBox="0 0 124.48 203.92" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x=".0051316" y="-.0039062" width="124.49" height="204" fill="none"/>
+ <path transform="translate(-58.01 -18.484)" d="m119.56 18.484-61.354 74.137 23.795 27.727-23.992 27.334 62.535 74.725 61.943-75.119-24.582-27.332 17.699-19.666-20.451-24.58-1.377-1.7695-0.01-2.3594 1.1894-4.3262 3.3438-4.3262-2.9512-2.5566-23.006 28.709-12.389-15.141-28.908 35.199-15.141-16.715 43.457-52.111 15.732 19.271 2.7539-3.5391-5.1133-5.5078-3.5391-5.7012-2.5566-5.3105 0.19532-4.5215 3.1465-4.918zm22.811 67.646 2.3613 0.19727 13.223 13.273-8.1113 9.7344-14.748-17.699zm-22.416 9.2422 21.236 24.975-20.844 24.385-21.041-24.777zm-29.105 35.789 29.105 35.594 29.889-35.396 14.158 16.322-43.852 52.896-43.852-52.109z" stroke="#000" stroke-width=".40441"/>
+</svg>
--- a/src/assets/custom-svg/reddit.svg
+++ b/src/assets/custom-svg/reddit.svg
@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 204.89999 204.89999"
+   version="1.1"
+   sodipodi:docname="Reddit_Icon_2Color.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   width="204.89999"
+   height="204.89999"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.3837233"
+     inkscape:cx="42.999958"
+     inkscape:cy="93.131617"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #ff4500;
+      }
+    </style>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Layer 1"
+     style="fill:none;fill-opacity:1;stroke:none;stroke-opacity:1"
+     transform="translate(-25.54,-34.12)" />
+  <path
+     class="cls-1"
+     d="m 128.5,39.079997 c 2.22,9.41 10.67,16.42 20.76,16.42 11.78,0 21.33,-9.55 21.33,-21.33 0,-11.78 -9.55,-21.33 -21.33,-21.33 -10.3,0 -18.89,7.3 -20.89,17.01 -17.25,1.85 -30.720003,16.48 -30.720003,34.21 0,0.04 0,0.07 0,0.11 -18.76,0.79 -35.89,6.13 -49.49,14.56 -5.05,-3.91 -11.39,-6.24 -18.27,-6.24 -16.51,0 -29.8900000517578,13.38 -29.8900000517578,29.890003 0,11.98 7.0399999517578,22.3 17.2100000517578,27.07 0.99,34.7 38.8,62.61 85.310003,62.61 46.51,0 84.37,-27.94 85.31,-62.67 10.09,-4.8 17.07,-15.09 17.07,-27 0,-16.510003 -13.38,-29.890003 -29.89,-29.890003 -6.85,0 -13.16,2.31 -18.2,6.19 -13.72,-8.49 -31.04,-13.83 -49.99,-14.54 0,-0.03 0,-0.05 0,-0.08 0,-12.7 9.44,-23.24 21.68,-24.97 z M 46.959997,121.35 c 0.5,-10.84 7.7,-19.16 16.07,-19.16 8.37,0 14.77,8.79 14.27,19.63 -0.5,10.84 -6.75,14.78 -15.13,14.78 -8.38,0 -15.71,-4.41 -15.21,-15.25 z M 142.02,102.19 c 8.38,0 15.58,8.32 16.07,19.16 0.5,10.84 -6.84,15.25 -15.21,15.25 -8.37,0 -14.63,-3.93 -15.13,-14.78 -0.5,-10.84 5.89,-19.63 14.27,-19.63 z m -9.96,44.24 c 1.57,0.16 2.57,1.79 1.96,3.25 -5.15,12.31 -17.31,20.96 -31.5,20.96 -14.190003,0 -26.340003,-8.65 -31.500003,-20.96 -0.61,-1.46 0.39,-3.09 1.96,-3.25 9.2,-0.93 19.15,-1.44 29.540003,-1.44 10.39,0 20.33,0.51 29.54,1.44 z"
+     id="path8" />
+</svg>
--- a/src/assets/custom-svg/twitch.svg
+++ b/src/assets/custom-svg/twitch.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/favourites/scathach.png
+++ b/src/assets/favourites/scathach.png
--- a/src/assets/favourites/skadi.png
+++ b/src/assets/favourites/skadi.png
--- a/src/assets/favourites/summerskadi.png
+++ b/src/assets/favourites/summerskadi.png
--- a/src/assets/servant/koyanlight_02.png
+++ b/src/assets/servant/koyanlight_02.png
--- a/src/assets/servant/liz_02.png
+++ b/src/assets/servant/liz_02.png
--- a/src/assets/servant/summerskadi_02.png
+++ b/src/assets/servant/summerskadi_02.png
--- a/src/assets/servant/summerskadi_03.png
+++ b/src/assets/servant/summerskadi_03.png
--- a/src/components/aboutText.astro
+++ b/src/components/aboutText.astro
@ -0,0 +1,53 @@
+---
+
+---
+
+<div>
+  <p>
+    I'm a 24 year old software developer from Germany. Even if my roots are with Electrical Engineering,
+    I am currently pursuing a Masters Degree in Computer Science after starting to code more during my studies.
+    I am mostly programming in Python, but I'm also confident in writing Javascript.
+  </p>
+  <p>
+    I enjoy biking and hiking, as well as visiting different anime conventions.
+    I am a huge fan of the Fate franchise, specifically Fate/Grand Order, which I am playing since the end of 2019.
+    I also enjoy other games, mainly Honkai: Star Rail and theHunter: Call of the Wild.
+  </p>
+</div>
+
+<style>
+  div {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    font-family: 'Work Sans Variable', sans-serif;
+    max-width: min(87.5%, 360px);
+    background-color: var(--c-primary-background);
+    color: var(--c-primary-text);
+    border-radius: 1rem;
+    padding: 1rem 1rem;
+    margin-top: -0.75rem;
+    text-align: left;
+  }
+
+  div > p:first-of-type {
+    margin-top: 0px;
+  }
+
+  div > p:last-of-type {
+    margin-bottom: 0px;
+  }
+
+  @media (min-width: 512px) {
+    div {
+      max-width: 75%;
+      text-align: justify;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    div {
+      max-width: 65%;
+    }
+  }
+</style>
--- a/src/components/cards/blogCard.astro
+++ b/src/components/cards/blogCard.astro
@ -1,8 +1,9 @@
 ---
 export interface Props {
-  url: string | undefined
+  url: string
+  slug: string
  title: string
-  pubdate: string
+  pubdate: Date
  description: string
  author: string
 }
@ -12,11 +13,11 @@ const options_date: Intl.DateTimeFormatOptions = {
  month: 'long',
  day: '2-digit',
 }
-const { author, description, pubdate, url, title } = Astro.props
+const { author, description, pubdate, url, title, slug } = Astro.props
 const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 ---

-<a href={url} rel="noopener noreferrer">
+<a href={`${url}/${slug}`} rel="noopener noreferrer">
  <div class="circle"></div>
  <article>
    <h2>{title}</h2>
@ -26,59 +27,38 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 </a>

 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
  .circle {
    display: none;
  }
-  @media (min-width: 900px) {
-    .circle {
-      margin: 1rem 1rem 1rem 0rem;
-      position: relative;
-      display: flex;
-      visibility: visible;
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 40%;
-      background-color: var(--c-darkpurple);
-      transition: transform var(--speed) var(--ease);
-    }
-
-    a:hover > .circle {
-      height: 1.75rem;
-      width: 1.75rem;
-      translate: -0.125rem;
-      margin-right: 0.825rem;
-    }
-
-    article {
-      margin-left: 0.5rem;
-    }
-  }

  a {
    align-items: center;
    justify-content: center;
    display: flex;
    text-decoration: none;
-    height: auto;
-    margin: 0.5rem;
+    height: fit-content;
+    margin: 0px 0.5rem;
    width: 100%;
  }
  p {
-    color: white;
+    color: var(--c-primary-text);
    text-align: left;
    font-size: 1.1em;
    margin: 0.5em;
  }
  article > h2 {
    margin: 0.3rem 0.5rem;
-    color: var(--c-darkpurple);
+    color: var(--c-accent-1);
    font-size: 1.5rem;
    line-height: normal;
    text-decoration: none;
  }
  article > h3 {
    margin: 0.2em 0.5rem;
-    color: white;
+    color: var(--c-primary-text);
    font-size: 1rem;
    line-height: normal;
    text-decoration: none;
@ -88,17 +68,49 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
    flex: 1;
    flex-wrap: wrap;
    flex-direction: column;
-    align-items: flex-start;
-    align-content: flex-start;
+    align-items: center;
+    align-content: center;
    justify-content: center;
-    background-color: var(--c-darkergray);
+    background-color: var(--c-primary-background);
    padding: 10px;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
    min-height: 100%;
+    border: 2px solid var(--c-primary-background);
    border-radius: 1.25rem;
  }
-  a:hover > article {
-    transform: scaleY(102.5%) scaleX(101%);
+
+  a:hover article {
+    border-color: var(--c-accent-1);
+  }
+
+  @media (min-width: 900px) {
+    .circle {
+      margin: 1rem 0.5rem 1rem 0.5rem;
+      position: relative;
+      display: flex;
+      visibility: visible;
+      height: 1rem;
+      width: 1rem;
+      background-color: var(--c-accent-1);
+      border-style: solid;
+      border-width: 0.25rem;
+      border-color: var(--c-secondary-background);
+      border-radius: 40%;
+      transition: all var(--a-time-short) var(--a-animation-1);
+    }
+
+    a:hover > .circle {
+      height: 1.25rem;
+      width: 1.25rem;
+      translate: -0.125rem;
+      margin-right: 4px;
+    }
+
+    article {
+      border: 2px solid var(--c-primary-background);
+      align-items: flex-start;
+      align-content: flex-start;
+      margin-left: 0.5rem;
+    }
  }
 </style>
--- a/src/components/cards/ceCard.astro
+++ b/src/components/cards/ceCard.astro
@ -1,8 +1,8 @@
 ---
 import { Image } from 'astro:assets'
-import mlb_ce from '../assets/ce/mlb.webp'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import mlb_ce from '@assets/ce/mlb.webp'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  name: string
@ -28,6 +28,10 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
 </article>

 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
  .hidemlb {
    display: none;
    height: 1em;
@ -35,14 +39,12 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'

  article {
    border-radius: 1.25rem;
-    background-color: var(--c-darkergray);
-    padding: 20px;
-    padding-top: 5px;
+    border: 2px var(--c-primary-background) solid;
+    background-color: var(--c-primary-background);
    width: 35%;
    height: auto;
    justify-content: center;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
    margin: 0px;
    display: grid;
    grid-template-columns: 100%;
@ -55,11 +57,11 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
  }

  article:hover {
-    transform: scale(var(--hover-scale));
+    border: 2px var(--c-accent-1) solid;
  }

  article div {
-    margin: 0.5em auto;
+    margin: auto;
  }

  img {
@ -70,27 +72,17 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
    margin-right: auto;
  }

-  .heading-center {
-    display: flex;
-    height: 4rem;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.25em;
-    color: white;
-    font-weight: bold;
-  }
-
  .ce-crop {
-    width: 6em;
-    height: 6em;
+    width: min(85%, 85px);
+    height: auto;
  }

  .mlb {
-    width: 5.5rem;
+    width: min(85%, 85px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
+    margin-top: 0px;
  }

  .mlbalign {
@ -101,18 +93,18 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'

  @media (min-width: 512px) {
    .ce-crop {
-      width: 7.5em;
-      height: 7.5em;
+      width: 100px;
+      height: 100px;
    }
    article {
-      width: 10em;
+      width: 128px;
    }
    .mlbalign {
-      width: 7.5em;
+      width: 85px;
    }

    .mlb {
-      width: 7rem;
+      width: 85px;
    }
  }
 </style>
--- a/src/components/cards/contactCard.astro
+++ b/src/components/cards/contactCard.astro
@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  site: string
@ -10,7 +10,6 @@ export interface Props {
 }

 const { imageFile, link, site } = Astro.props
-const logoAltText = `${site} Logo`
 const imagePath = `/src/assets/social/${imageFile}`
 const images_logos = import.meta.glob<GlobImage>(
  '/src/assets/social/*.{png,webp}'
@ -25,74 +24,67 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
  aria-label=`${site} - new window`
 >
  <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt={logoAltText} />
+    <Image src={loadedLogoImage} alt="" loading={'eager'} width={128} height={128} quality={100}/>
    <div>
      <h2>{site}</h2>
    </div>
  </article>
-  <span class="visually-hidden">{logoAltText}</span>
+  <span class="visually-hidden">{site}</span>
 </a>

 <style>
  a {
    text-decoration: none;
+    --s-image: 80px;
  }

  article {
-    --size-value: 6.25rem;
-    border-radius: 1.25rem;
    display: flex;
-    justify-content: center;
+    position: relative;
    align-items: center;
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
-    padding: 10px;
+    justify-content: center;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+    padding: 6px;
    height: auto;
    width: auto;
-    position: relative;
  }

  article img {
    border-radius: 1.25rem;
-    width: var(--size-value);
-    height: var(--size-value);
-  }
-
-  article:hover div {
-    border-radius: 1.25rem;
-    padding: 0 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: var(--c-darkgray);
-    height: calc(var(--size-value));
-    width: calc(var(--size-value) - 1rem);
-    opacity: 90%;
-    z-index: 100;
-    position: absolute;
-  }
-
-  article:hover h2 {
-    margin: 0;
-    display: inline-flex;
-    font-weight: bold;
-    color: white;
-    font-size: 18px;
-  }
-
-  article h2 {
-    position: absolute;
-    display: none;
+    width: var(--s-image);
+    height: auto;
  }

  article div {
    display: none;
  }

-  a:hover {
-    transform: scale(var(--hover-scale));
+  article:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  article:hover div {
+    display: flex;
+    position: absolute;
+    margin: unset;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--c-primary-background);
+    border-radius: 1.25rem;
+    width: var(--s-image);
+    height: var(--s-image);
+    opacity: 90%;
+    z-index: 100;
+  }
+
+  article:hover h2 {
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--c-primary-text);
  }
 </style>
--- a/src/components/cards/favouriteCard.astro
+++ b/src/components/cards/favouriteCard.astro
@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  name: string
@ -25,21 +25,27 @@ const loadedImage = plsLoadImage(images, imagePath)
  aria-label=`${name} - new window`
 >
  <div class="heading">{name}</div>
-  <Image src={loadedImage} alt={name} />
+  <Image src={loadedImage} alt={name} loading={'eager'} width={128} height={128} quality={100}/>
  <h2 class="subtext">
    {origin}
  </h2>
 </a>

 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
  .heading {
    display: flex;
-    height: 4rem;
+    height: fit-content;
+    min-height: 2.5rem;
+    line-height: 1.75rem;
    font-size: 24px;
-    color: white;
+    color: var(--c-primary-text);
    max-width: 200px;
    padding-bottom: 0.3rem;
-    font-weight: bold;
+    font-weight: 500;
    margin: 0px;
    justify-content: center;
    align-items: center;
@ -50,25 +56,25 @@ const loadedImage = plsLoadImage(images, imagePath)
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
-    padding: 0em 0.75em;
-    width: 40%;
+    background-color: var(--c-primary-background);
+    padding: 0em 0.25em;
+    width: max(40%, 128px);
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
    text-decoration: none;
+    border: 2px var(--c-primary-background) solid;

    &:hover {
-      transform: scale(var(--hover-scale));
+      border: 2px var(--c-accent-1) solid;
    }

    img {
-      padding: 0px 0.25em;
-      width: 90%;
+      width: min(90%, 100px);
+      margin: 0px 0.5rem;
      height: auto;
+      border-radius: 1rem;
    }
  }

@ -78,17 +84,16 @@ const loadedImage = plsLoadImage(images, imagePath)
      width: auto;
      height: auto;
      img {
-        padding: 0px 1.5em;
-        width: 200px;
+        width: 128px;
      }
    }
  }

  .subtext {
-    color: white;
+    color: var(--c-primary-text);
    font-size: 16px;
-    font-weight: 600;
-    margin: 5;
+    font-weight: 400;
+    margin: 0.5rem;
    line-height: 20px;
  }
 </style>
--- a/src/components/cards/servantCard.astro
+++ b/src/components/cards/servantCard.astro
@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets';
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  name: string
@ -12,9 +12,10 @@ export interface Props {
  bondceImageFile: string
  ml: string
  bond10: boolean
+  index: number
 }

-const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
+const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name, index } = Astro.props
 const servantImagePath = `/src/assets/servant/${servantImageFile}`
 const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
 const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{png,webp}')
@ -27,10 +28,12 @@ let bondce_css: string = 'bond-ce'
 if (bond10 === false) {
  bondce_css += ' unobtained'
 }
+
+let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 ---

 <article>
-  <Image src={loadedServantImage} alt={name} />
+  <Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} loading={loading}/>
  <h2 class="subtext">
    Level {level}<br />
    {skills}<br />
@ -43,54 +46,35 @@ if (bond10 === false) {
 </article>

 <style>
-  .heading {
-    display: flex;
-    height: 4rem;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    color: white;
-    max-width: 200px;
-    padding-bottom: 0.3rem;
-    font-weight: bold;
-  }
-
-  .servants-container {
-    row-gap: 1em;
-    column-gap: 1em;
-    justify-content: center;
-    align-self: center;
-  }
-
  article:hover {
-    transform: scale(var(--hover-scale));
+    transition: all var(--a-time-default) var(--a-animation-1);
+    transform: scale(1);
+    border-color: var(--c-accent-1);
  }

  article {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
-    padding: 0em 0.75em 0.5rem 0.75em;
-    width: 40%;
+    background-color: var(--c-primary-background);
+    border: 2px var(--c-primary-background) solid;
+    padding: 10px;
+    width: max(30%, 100px);
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
    border-radius: 1.25rem;
  }

  article > img {
-    width: 7.5rem;
-    height: 7.5rem;
+    width: 90%;
+    height: auto;
    border-radius: 2.5rem;
    margin-top: 0.75rem;
  }
  .subtext {
-    color: white;
+    color: var(--c-primary-text);
    font-size: 16px;
    font-weight: 600;
    margin: 5;
@ -98,25 +82,26 @@ if (bond10 === false) {
  }

  .expand-on-hover {
-    background-color: var(--c-duskgray);
+    background-color: var(--c-primary-background);
+    border: 2px var(--c-primary-background) solid;
+    border-top: 0px;
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: 92.5%;
-    left: 0px;
-    right: 0px;
    border-radius: 0px 0px 1.25rem 1.25rem;
+    width: 100%;
  }

  article:hover .expand-on-hover {
    transform: scaleY(1);
-    transition: transform 200ms ease-in-out;
-    background-color: var(--c-duskgray);
+    border-color: var(--c-accent-1);
+    transition: all var(--a-time-default) var(--a-animation-1);
  }

  .bond-ce {
-    padding-top: 0.75rem;
+    padding-top: 0.25rem;
    width: auto;
    height: 3rem;
  }
@ -133,16 +118,12 @@ if (bond10 === false) {
    }

    article > img {
-      width: 200px;
-      height: 200px;
+      width: 128px;
+      height: 128px;
    }

    .bond-ce {
-      height: 3.5rem;
-    }
-
-    .expand-on-hover {
-      top: 95%;
+      height: 3rem;
    }
  }
 </style>
--- a/src/components/cards/taCard.astro
+++ b/src/components/cards/taCard.astro
@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  date: string
@ -36,153 +36,131 @@ const servant_images = import.meta.glob<GlobImage>(
 const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
 const loadedTargetImage = plsLoadImage(target_images, targetImagePath)

-let hasuser = ''
-if (user !== undefined) {
-  hasuser = 'hasuser'
-}
+const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 ---

 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
-  <article>
-    <Image src={loadedTargetImage} alt={title} class="icon" />
+  <div class="imagecontainer">
+    <Image src={loadedTargetImage} alt={title} />
    <div class="title">
      <h2>{title}</h2>
    </div>
-    <p>
-      <span class={hasuser}>
-        By {user}<br /> •
-      </span>
-      {formatted_date}
-    </p>
-    <div class="expand-on-hover">
-      <Image src={loadedServantImage} alt="" />
-      <h2>{turns}</h2>
-    </div>
-  </article>
+  </div>
+  <p>
+    <span style={hasuser}>By {user}<br />•</span>
+    {formatted_date}
+  </p>
+  <div class="expand-on-hover">
+    <Image src={loadedServantImage} alt="" />
+    <h2>{turns}</h2>
+  </div>
 </a>

 <style>
-  div {
-    display: none;
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
  }
-
-  span {
-    display: none;
-  }
-
-  .hasuser {
-    display: flex;
-  }
-
  a {
    text-decoration: none;
-  }
-
-  article {
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    background-color: var(--c-primary-background);
+    border: 2px var(--c-primary-background) solid;
    padding: 10px;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
+    width: max(30%, 100px);
    height: auto;
-    width: auto;
-    max-width: 8rem;
    border-radius: 1.25rem;
-    padding-bottom: 1.5rem;
-    --size-value: 7rem;
-    display: flex;
    justify-content: center;
    align-items: center;
-    flex-direction: column;
+    z-index: 1;
  }

-  article:hover {
-    transform: scale(var(--hover-scale));
+  a:hover {
+    transform: scale(1);
+    border-color: var(--c-accent-1);
+    z-index: 10;
  }

-  article > .icon {
+  .imagecontainer {
+    display: flex;
+    width: 90%;
+    height: auto;
+    position: relative;
+  }
+  .imagecontainer > img {
+    width: 100%;
+    height: auto;
    border-radius: 1.25rem;
-    width: var(--size-value);
-    height: var(--size-value);
-    margin: 0.5rem;
  }

-  article:hover .title {
+  a:hover .title {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
-    background-color: var(--c-darkgray);
-    height: calc(var(--size-value) + 0.1rem);
-    width: calc(var(--size-value) + 0.1rem);
+    background-color: var(--c-primary-background);
+    width: 100%;
+    height: 100%;
    opacity: 90%;
+    box-shadow: 0px 0px 0px 1px var(--c-primary-background);
    border-radius: 1.25rem;
-    top: 1.1em;
  }

-  article:hover .title h2 {
-    margin: 0;
+  a:hover .title h2 {
+    margin: 4px;
    display: inline-flex;
-    font-weight: bold;
-    color: white;
-    font-size: 18px;
+    font-weight: 500;
+    color: var(--c-primary-text);
+    font-size: 1rem;
    line-height: 150%;
-    padding: 0.5rem;
  }

-  article .title h2 {
+  a .title {
    display: none;
  }

-  article .title {
-    display: none;
-  }
-
-  .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
  p {
    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    text-decoration: none;
-    color: white;
+    color: var(--c-primary-text);
    font-size: 1rem;
-    font-weight: bold;
-    padding-top: 0.5rem;
-    margin: 0.5rem 0px;
-    flex-wrap: wrap;
-    flex-direction: column;
+    font-weight: 400;
+    margin: 0.5rem 0px 0.625rem 0px;
  }

  .expand-on-hover {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
-    align-items: center;
+    align-items: top;
    justify-content: space-evenly;
-    background-color: var(--c-duskgray);
+    background-color: var(--c-primary-background);
+    border: 2px var(--c-primary-background) solid;
+    border-top: 0px;
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
-    top: 90%;
-    left: 0px;
-    right: 0px;
-    color: white;
+    top: 87.5%;
+    padding-top: 0.5rem;
+    margin-top: 0.2rem;
+    color: var(--c-primary-text);
    border-radius: 0px 0px 1.25rem 1.25rem;
+    width: 100%;
  }

  .expand-on-hover img {
-    width: 3rem;
-    height: 3rem;
-    margin-top: 0.5rem;
+    width: 2.5rem;
+    height: auto;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }
@ -191,9 +169,23 @@ if (user !== undefined) {
    margin: 0.5rem;
  }

-  article:hover .expand-on-hover {
+  a:hover .expand-on-hover {
    transform: scaleY(1);
-    transition: transform 200ms ease-in-out;
-    background-color: var(--c-duskgray);
+    transition: all var(--a-time-default) var(--a-animation-1);
+    background-color: var(--c-primary-background);
+    border-color: var(--c-accent-1);
+  }
+
+  @media (min-width: 512px) {
+    a {
+      padding: 10px;
+      width: auto;
+      height: auto;
+    }
+
+    a > .imagecontainer {
+      width: 112px;
+      height: 112px;
+    }
  }
 </style>
--- a/src/components/cards/technologyCard.astro
+++ b/src/components/cards/technologyCard.astro
@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'

 export interface Props {
  title: string
@ -10,7 +10,6 @@ export interface Props {
 }

 const { imageFile, link, title } = Astro.props
-const logoAltText = `${title} Logo`
 const imagePath = `/src/assets/technologies/${imageFile}`
 const images_logos = import.meta.glob<GlobImage>(
  '/src/assets/technologies/*.{png,webp}'
@ -20,73 +19,70 @@ const loadedImage = plsLoadImage(images_logos, imagePath)

 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
  <article>
-    <Image src={loadedImage} alt={logoAltText} />
+    <Image src={loadedImage} alt="" loading={'eager'} width={150} height={150} quality={100}/>
    <div>
      <h2>{title}</h2>
    </div>
  </article>
-  <span class="visually-hidden">{logoAltText}</span>
+  <span class="visually-hidden">{title}</span>
 </a>

 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
  a {
    text-decoration: none;
  }
+
  article {
-    --size-value: 6.25rem;
-    background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
-    padding: 10px;
    display: flex;
-    justify-content: center;
+    position: relative;
    align-items: center;
+    justify-content: center;
    text-align: center;
-    transition: transform var(--speed) var(--ease);
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+    padding: 6px;
    height: auto;
    width: auto;
-    line-height: 100px;
-    border-radius: 1.25rem;
-    position: relative;
-  }
-  article:hover {
-    transform: scale(var(--hover-scale));
-  }
-  article > img {
-    border-radius: 1.25rem;
-    width: var(--size-value);
-    height: var(--size-value);
  }

-  article:hover div {
+  article img {
    border-radius: 1.25rem;
-    padding: 0 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: var(--c-darkgray);
-    height: calc(var(--size-value));
-    width: calc(var(--size-value) - 1rem);
-    opacity: 90%;
-    z-index: 100;
-    position: absolute;
-  }
-
-  article:hover h2 {
-    margin: 0;
-    position: absolute;
-    display: inline-flex;
-    font-weight: bold;
-    color: white;
-    font-size: 18px;
-    line-height: 150%;
-  }
-
-  article h2 {
-    display: none;
+    width: 80px;
+    height: auto;
  }

  article div {
    display: none;
  }
+
+  article:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  article:hover div {
+    display: flex;
+    position: absolute;
+    margin: unset;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--c-primary-background);
+    border-radius: 1.25rem;
+    width: 80px;
+    height: 80px;
+    opacity: 90%;
+    z-index: 100;
+  }
+
+  article:hover h2 {
+    display: inline-flex;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--c-primary-text);
+  }
 </style>
--- a/src/components/fgotaHero.astro
+++ b/src/components/fgotaHero.astro
@ -1,27 +1,74 @@
 ---
+export interface Props {
+  fadeout?: boolean
+}
+const { fadeout } = Astro.props
+const display = fadeout ? "": "display: none"
 ---

 <div>
  <span>
-    I am currently working on a site to catalogue past and future TAs.<br/>
-    Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
+    I am currently creating a site to catalogue past and future TAs for the whole community.
  </span>
+  <a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
+  <div class="fade" style={display}></div>
 </div>

 <style>
  div {
    display: flex;
    width: 100%;
-    height: 5em;
-    background-color: var(--c-gray);
+    flex-wrap: nowrap;
+    flex-flow: column;
+    background-color: var(--c-primary-background);
    text-align: center;
    align-items: center;
    justify-content: center;
-    color: white;
+    color: var(--c-primary-text);
    font-size: 1.5em;
+    padding: 2rem 0rem 0rem 0rem;
+    font-weight: 400;
+    font-size: 1.3rem;
  }
+
  a {
-    color: var(--c-darkpurple);
+    font-weight: 500;
+    font-family: 'Work Sans Variable', sans-serif;
+    color: var(--c-primary-text);
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
    text-decoration: none;
+    background: var(--c-primary-background);
+    border-radius: 10px;
+    border: 2px var(--c-accent-1) solid;
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1-alt);
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
+  .fade {
+    margin-top: 3rem;
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  span {
+    margin: 0 .5rem;
+  }
+
+  .fancy {
+    color: var(--c-accent-1);
+  }
+
+  @supports (background-clip: text) {
+    a:hover .fancy {
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
+      background-clip: text;
+      color: transparent;
+    }
  }
 </style>
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@ -12,11 +12,11 @@
    display: flex;
    width: 100%;
    height: 5em;
-    background-color: var(--c-gray);
+    background-color: var(--c-secondary-background);
    text-align: center;
    align-items: center;
    justify-content: center;
-    color: white;
+    color: var(--c-primary-text);
    font-size: 1.5em;
  }
 </style>
--- a/src/components/links/linkCard.astro
+++ b/src/components/links/linkCard.astro
@ -0,0 +1,50 @@
+---
+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 }}>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25em;
+    height: 2.25em;
+    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: 1.5em;
+    width: 1.5em;
+  }
+</style>
--- a/src/components/links/linkContainer.astro
+++ b/src/components/links/linkContainer.astro
@ -0,0 +1,29 @@
+---
+import LinkCard from './linkCard.astro'
+import socialData from '@content/data/socials.json'
+import { socials } from './socials'
+---
+
+<div>
+  {
+    socialData.map((item) => (
+      <LinkCard
+        {...{ icon: socials[item.icon], text: item.icon, link: item.link }}
+      />
+    ))
+  }
+</div>
+
+<style>
+  div {
+    margin-top: 0.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 95%;
+    height: auto;
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+  }
+</style>
--- a/src/components/links/socials.ts
+++ b/src/components/links/socials.ts
@ -0,0 +1,22 @@
+import discord from '@assets/custom-svg/discord.svg'
+import forgejo from '@assets/custom-svg/forgejo.svg'
+import rayshift from '@assets/custom-svg/rayshift.svg'
+import reddit from '@assets/custom-svg/reddit.svg'
+import twitch from '@assets/custom-svg/twitch.svg'
+
+import type { ImageMetadata } from 'astro'
+
+import mastodon from 'iconoir/icons/mastodon.svg'
+import twitter from 'iconoir/icons/twitter.svg'
+import youtube from 'iconoir/icons/youtube.svg'
+
+export const socials: Record<string, ImageMetadata> = {
+  forgejo,
+  rayshift,
+  reddit,
+  twitch,
+  discord,
+  mastodon,
+  twitter,
+  youtube,
+}
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@ -1,137 +0,0 @@
---
-import { Image } from 'astro:assets';
-import logo from '../assets/logo.svg'
-import hamburger from 'iconoir/icons/menu.svg'
-const hamburger_src_url = `url("${hamburger.src}")`;
---
-
-<header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
-    <Image src={logo} alt="Firq Website Logo"/>
-    <span class="visually-hidden">Firq Website Logo</span>
-  </a>
-  <ul class="desktop">
-    <slot name="desktop"/>
-  </ul>
-  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()" role="navigation">
-    <ul>
-      <slot name="mobile"/>
-    </ul>
-    <div class="placeholder"></div>
-    <div class="hamburger-menu" role="navigation"></div>
-  </button>
-</header>
-
-<style define:vars={{ hamburger_src_url }}>
-  header {
-    z-index: 1000;
-    position: sticky;
-    top: 0px;
-    background-color: var(--c-darkgray);
-    display: flex;
-    height: auto;
-    width: 100%;
-    align-items: flex-start;
-    line-height: 1.5em;
-  }
-  header > a {
-    margin-left: 16px;
-    padding-top: 8px;
-    display: block;
-    height: 48px;
-    width: 48px;
-  }
-  a > img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
-  .desktop {
-    align-items: center;
-    justify-content: space-around;
-    display: none;
-    flex-wrap: wrap;
-    flex-direction: row;
-    height: 64px;
-    width: 100%;
-    list-style-type: none;
-    row-gap: 0.5em;
-    column-gap: 0.5ch;
-    margin: 0px;
-    line-height: 1.5em;
-  }
-  .mobile > ul {
-    background-color: var(--c-darkgray);
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: column;
-    display: flex;
-    width: 100%;
-    list-style-type: none;
-    line-height: 3em;
-  }
-
-  .placeholder {
-    display: flex;
-    width: 100%;
-  }
-
-  .mobile {
-    display: flex;
-    background-color: var(--c-darkgray);
-    border: 0px;
-    width: 100%;
-    height: 64px;
-  }
-
-  .mobile > ul {
-    display: none;
-    padding: 0px;
-  }
-
-  .mobile:focus-within > ul {
-    display: flex;
-  }
-
-  .mobile:focus-within > .placeholder {
-    display: none;
-  }
-
-  .mobile:focus-within {
-    justify-content: top;
-    height: auto;
-  }
-  header:focus-within > a {
-    display: flex;
-    justify-self: top;
-  }
-
-  .hamburger-menu {
-    mask: var(--hamburger_src_url) no-repeat center;
-    background-color: white;
-    width: 2rem;
-    height: 2rem;
-    position: static;
-    align-self: flex-start;
-    margin-right: 1rem;
-    margin-top: 1rem;
-  }
-
-  @media (min-width: 1140px) {
-    .mobile {
-      display: none;
-    }
-    .desktop {
-      display: flex;
-    }
-
-    header {
-      height: 64px;
-      align-items: center;
-    }
-
-    header > a {
-      padding-top: 0px;
-    }
-  }
-</style>
--- a/src/components/navbar/navbar.astro
+++ b/src/components/navbar/navbar.astro
@ -0,0 +1,37 @@
+---
+import NavbarDesktop from './navbarDesktop.astro'
+import NavbarLogo from './navbarLogo.astro'
+import NavbarMobile from './navbarMobile.astro'
+---
+
+<header>
+  <NavbarLogo/>
+  <NavbarDesktop>
+    <slot name="desktop" />
+  </NavbarDesktop>
+  <NavbarMobile>
+    <slot name="mobile" />
+  </NavbarMobile>
+</header>
+
+<style>
+  header {
+    z-index: 1000;
+    position: sticky;
+    top: 0px;
+    background-color: var(--c-primary-background);
+    display: flex;
+    height: auto;
+    width: 100%;
+    align-items: flex-start;
+    line-height: 1.5em;
+    border-bottom: 2px solid var(--c-accent-1) ;
+  }
+
+  @media (min-width: 1140px) {
+    header {
+      height: 64px;
+      align-items: center;
+    }
+  }
+</style>
--- a/src/components/navbar/navbarDesktop.astro
+++ b/src/components/navbar/navbarDesktop.astro
@ -0,0 +1,29 @@
+---
+
+---
+
+<ul>
+  <slot />
+</ul>
+
+<style>
+  ul {
+    align-items: center;
+    justify-content: space-around;
+    display: none;
+    flex-wrap: wrap;
+    flex-direction: row;
+    height: 64px;
+    width: 100%;
+    list-style-type: none;
+    row-gap: 0.5em;
+    column-gap: 0.5ch;
+    margin: 0px;
+    line-height: 1.5em;
+  }
+  @media (min-width: 1140px) {
+    ul {
+      display: flex;
+    }
+  }
+</style>
--- a/src/components/navbar/navbarEntry.astro
+++ b/src/components/navbar/navbarEntry.astro
@ -1,7 +1,7 @@
 ---
 export interface Props {
  currentPage?: string
-  navtype: "mobile" | "desktop"
+  navtype: 'mobile' | 'desktop'
  link: string
  text: string
  icon: ImageMetadata
@ -18,10 +18,10 @@ if (currentPage === slug) {
  currPage = 'current'
 }

-const icon_src_url = `url("${icon.src}")`;
+const icon_src_url = `url("${icon.src}")`
 const fulllink = `/${slug}`

-let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
+let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
 ---

 <li>
@ -30,7 +30,7 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
    rel="noopener noreferrer"
    aria-label={text}
    class={currPage}
-    role="navigation"
+    role="button"
    {...extraattributes}
  >
    <div class="icon"></div>
@ -39,6 +39,9 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
 </li>

 <style define:vars={{ icon_src_url }}>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
  li {
    align-items: center;
    justify-content: center;
@ -49,7 +52,7 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}

  li > a {
    display: inline-flex;
-    color: white;
+    color: var(--c-primary-text);
    text-decoration: none;
    justify-content: center;
    align-items: center;
@ -60,24 +63,24 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
  }

  li > a:hover {
-    color: var(--c-purplepink);
+    color: var(--c-accent-1-alt) !important;
  }

  li > a:hover > .icon {
-    background-color: var(--c-purplepink);
+    background-color: var(--c-accent-1-alt) !important;
  }

  .current {
-    color: var(--c-darkpurple) !important;
+    color: var(--c-accent-1) !important;
  }

  .current > .icon {
-    background-color: var(--c-darkpurple) !important;
+    background-color: var(--c-accent-1) !important;
  }

  .icon {
    mask: var(--icon_src_url) no-repeat center;
-    background-color: white;
+    background-color: var(--c-primary-text);
    width: 1.4em;
    height: 1.4em;
  }
--- a/src/components/navbar/navbarLogo.astro
+++ b/src/components/navbar/navbarLogo.astro
@ -0,0 +1,32 @@
+---
+import { Image } from 'astro:assets'
+import logo from '@assets/logo.svg'
+---
+
+<a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
+  <Image src={logo} alt="" loading="eager" />
+  <span class="visually-hidden">Logo</span>
+</a>
+
+<style>
+  a {
+    margin-left: 16px;
+    padding-top: 8px;
+    height: 48px;
+    width: 48px;
+    display: flex;
+    justify-self: top;
+    align-items: center;
+  }
+
+    a > img {
+    height: 42px;
+    width: 42px;
+    object-fit: contain;
+  }
+  @media (min-width: 1140px) {
+    a {
+      padding-top: 0px;
+    }
+  }
+</style>
--- a/src/components/navbar/navbarMobile.astro
+++ b/src/components/navbar/navbarMobile.astro
@ -0,0 +1,85 @@
+---
+import hamburger from 'iconoir/icons/menu.svg'
+const hamburger_src_url = `url("${hamburger.src}")`
+---
+
+<div class="dropdown">
+  <input type="checkbox" id="dropdown" />
+  <ul class="dropdown-content">
+    <slot />
+  </ul>
+  <label for="dropdown" class="dropdown-btn" aria-label="Menu Toggle">
+    <div class="hamburger-menu" role="navigation"></div>
+  </label>
+</div>
+
+<script>
+  const dropdownBtn = document.querySelector(".dropdown-btn")!;
+  const dropdownContent = document.querySelector(".dropdown-content")!;
+
+  dropdownBtn.addEventListener("click", () => {
+    dropdownContent.classList.toggle("menu-open");
+  });
+</script>
+
+<style define:vars={{ hamburger_src_url }}>
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+    touch-action: manipulation;
+  }
+
+  .dropdown-content.menu-open {
+    display: flex;
+    height: auto;
+    transform: translateY(0);
+    transition: transform var(--a-time-default) var(--a-animation-1);
+  }
+
+  .dropdown-content {
+    display: none;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--c-primary-background);
+    width: 100%;
+    list-style-type: none;
+    line-height: 3em;
+    margin: 0.5rem 0px 0px;
+    padding: 0;
+    transform: translateY(-1em);
+    transition: transform var(--a-time-default) var(--a-animation-1);
+  }
+
+  .dropdown-btn {
+    height: 64px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: manipulation;
+  }
+
+  .dropdown {
+    display: flex;
+    justify-content: flex-end;
+    background-color: var(--c-primary-background);
+    border: 0px;
+    width: 100%;
+  }
+
+  .hamburger-menu {
+    mask: var(--hamburger_src_url) no-repeat center;
+    mask-size: cover;
+    background-color: var(--c-primary-text);
+    width: 2.25rem;
+    height: 2.25rem;
+    margin-right: 10px;
+  }
+
+  @media (min-width: 1140px) {
+    .dropdown {
+      display: none;
+    }
+  }
+</style>
--- a/src/components/titles/smallTitle.astro
+++ b/src/components/titles/smallTitle.astro
@ -0,0 +1,106 @@
+---
+export interface Props {
+  maintext: string
+  subtext: string
+  fadeout?: boolean
+  baseurl?: string
+  returnbutton?: boolean
+}
+const { maintext, subtext, fadeout, baseurl, returnbutton } = Astro.props
+const displayFadeout = fadeout ? "": "display: none"
+const displayBackButton = returnbutton ? "": "display: none"
+---
+
+<div class="wrap">
+  <div class="head">{maintext}</div>
+  <div class="sub">{subtext}</div>
+  <a href=`/${baseurl}` style={displayBackButton}>&lt;&lt; Back to {baseurl}</a>
+  <div class="fade" style={displayFadeout}></div>
+</div>
+
+<style>
+  a {
+    font-weight: 500;
+    font-family: 'Work Sans Variable', sans-serif;
+    color: var(--c-primary-text);
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    background-color: var(--c-secondary-background);
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--c-secondary-background);
+    text-transform: capitalize;
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+    color: var(--c-primary-text);
+    background-color: var(--c-primary-background);
+  }
+
+  .fade {
+    margin-top: 2rem;
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  .head {
+    margin: 0 .5rem;
+    hyphens: auto;
+    padding-top: 2rem;
+    font-size: 3.25rem;
+    font-weight: 700;
+    font-family: 'Work Sans Variable', sans-serif;
+  }
+
+  .sub {
+    margin: 0 .5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    font-family: 'Work Sans Variable', sans-serif;
+  }
+
+  .head {
+    color: var(--c-accent-1);
+  }
+
+  @supports (background-clip: text) {
+    .head {
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .head {
+      hyphens: none;
+      font-size: 3.75rem;
+    }
+    .sub {
+      font-size: 1rem;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .head {
+      font-size: 4rem;
+    }
+    .sub {
+      font-size: 1.2rem;
+    }
+  }
+</style>
--- a/src/components/titles/title.astro
+++ b/src/components/titles/title.astro
@ -0,0 +1,76 @@
+---
+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>
+
+<style>
+  .wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+    color: var(--c-primary-text);
+    background-color: var(--c-primary-background);
+  }
+
+  .fade {
+    margin-top: 1.5rem;
+    background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  .head {
+    padding-top: 2rem;
+    font-size: 3rem;
+    font-weight: 700;
+    font-family: 'Work Sans Variable', sans-serif;
+  }
+
+  .sub {
+    font-size: 1rem;
+    font-weight: 400;
+    font-family: 'Work Sans Variable', sans-serif;
+    width: 97.5%;
+  }
+
+  .fancy {
+    color: var(--c-accent-1);
+  }
+
+  @supports (background-clip: text) {
+    .fancy {
+      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .head {
+      font-size: 3rem;
+    }
+    .sub {
+      font-size: 1rem;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .head {
+      font-size: 4rem;
+    }
+    .sub {
+      font-size: 1.25rem;
+    }
+  }
+</style>
--- a/src/components/youtubeEmbed.astro
+++ b/src/components/youtubeEmbed.astro
@ -44,7 +44,7 @@ const { id, thumbnail } = Astro.props
  .warningtext {
    display: flex;
    justify-content: center;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
    width: 640px;
    height: 360px;
  }
--- a/src/content/blog/astro-usage.md
+++ b/src/content/blog/astro-usage.md
@ -75,7 +75,7 @@ allPosts.sort(
 The `frontmatter` interface is a kind of header for the markdown files which provides astro with metadata like title, author and such.
 It is structured like this:

-```
+```yaml
 ---
 layout: ../../layouts/blogPost.astro
 title: 'How Astro powers this site'
--- a/src/content/blog/cernunnos-with-requiem.mdx
+++ b/src/content/blog/cernunnos-with-requiem.mdx
--- a/src/content/blog/deploying-this-round-2.md
+++ b/src/content/blog/deploying-this-round-2.md
@ -89,7 +89,7 @@ The container is also published to the docker registry that the Forgejo instance

 Since my website is now using a docker container instead of the previous `rsync` + `screen` approach, a new deployment solution was needed.

-In the end, Neshura proposed to use <a href="https://github.com/louislam/dockge" target="_blank" rel="noopener noreferrer" style="font-style: unset">Dockge</a>, a new, simple container management tool build by the developer of the beloved uptime-kuma. With that set up, getting the website only was really really easy:
+In the end, Neshura proposed to use <a href="https://github.com/louislam/dockge" target="_blank" rel="noopener noreferrer" >Dockge</a>, a new, simple container management tool build by the developer of the beloved uptime-kuma. With that set up, getting the website only was really really easy:

 1. Create a new stack
 2. Add a container entry
@ -161,4 +161,4 @@ In the end, I must say migrating was a lot more painless than expected. Sure, Fo

 I also updated my about page to now reflect the migration, as the old technologies weren't up-to-date anymore.

-If you want to check out the repository by yourself, feel free to do so. <a href="https://forgejo.neshweb.net/Firq/firq-dev-website" target="_blank" rel="noopener noreferrer" style="font-style: unset">It is available on Neshuras Forgejo instance</a>
+If you want to check out the repository by yourself, feel free to do so. <a href="https://forgejo.neshweb.net/Firq/firq-dev-website" target="_blank" rel="noopener noreferrer" >It is available on Neshuras Forgejo instance</a>
--- a/src/content/blog/deploying-this.md
+++ b/src/content/blog/deploying-this.md
@ -81,7 +81,7 @@ screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"

 With the following directory structure on the remote host, this can easily be explained:

-```
+```plain
 /
 ├─ public/
 │  ├─ site content
--- a/src/content/blog/fgo-ta.md
+++ b/src/content/blog/fgo-ta.md
--- a/src/content/blog/hello-world.md
+++ b/src/content/blog/hello-world.md
--- a/src/content/blog/instant-death.mdx
+++ b/src/content/blog/instant-death.mdx
@ -2,7 +2,7 @@
 layout: ../../layouts/blogPost.astro
 title: 'FGO Mechanics: Instant Death'
 pubDate: 2023-08-19
-description: 'Blog post talking about instant death in FGO, how you can take advantage of it and what its limits are.'
+description: 'Blog post talking about instant death in FGO and how you can take advantage.'
 author: 'Firq'
 tags: ['fgo', 'games']
 ---
@ -18,10 +18,10 @@ it doesn't interact with the hitrate, but if you have proof that this is differe

 Instant Kill & Instant Death: One of the most rejected systems to exist in FGO. Most players know of it, but discard it because of its unreliability and uselessness against stronger enemies. In this article, I want to dive a bit into the workings of Instant Kill and help you understand how you can, in specific scenarios, use it to your advantage.

-There are a multitude of servants that have access to instant-kill, but I will only highlight a few here (You can view the full list on <a href="https://gamepress.gg/grandorder/instant-death" target="_blank" rel="noopener noreferrer" style="font-style: unset">Gamepress</a>)
+There are a multitude of servants that have access to instant-kill, but I will only highlight a few here (You can view the full list on <a href="https://gamepress.gg/grandorder/instant-death" target="_blank" rel="noopener noreferrer" >Gamepress</a>)

 - **Nitocris (Caster)**: The most prominent figure, as she has easy access to her instant-killing NP and a skill that increases her death hit rate
- **Void Shiki (Saber)**: Another Example of an AOE Instant-Kill servant who also has access to Death Resist debuffs. One quest in her release event even specifically used the Instant Kill mechanic (<a href="https://apps.atlasacademy.io/db/NA/quest/94021308/1" target="_blank" rel="noopener noreferrer" style="font-style: unset">Quest Link here</a>)
+- **Void Shiki (Saber)**: Another Example of an AOE Instant-Kill servant who also has access to Death Resist debuffs. One quest in her release event even specifically used the Instant Kill mechanic (<a href="https://apps.atlasacademy.io/db/NA/quest/94021308/1" target="_blank" rel="noopener noreferrer" >Quest Link here</a>)
 - **King Hassan (Assassin)**: The only servant that can afflict enemies with instant death on normal attacks (Note: David can do this as well, but only if he has his Bond CE equipped)

 But since Instant Kill is based on probability, most players are relucatant to use it in their farming compositions. This thems from the different death rates enemies have:
@ -53,10 +53,10 @@ The parameters here are the following:

 ## Example

-The main reason this came up was because of a farming comp used in <a href="https://apps.atlasacademy.io/db/NA/quest/94061820/1" target="_blank" rel="noopener noreferrer" style="font-style: unset">Hunting Quest XI - Day 5 - Pride+</a>. The node is structured
+The main reason this came up was because of a farming comp used in <a href="https://apps.atlasacademy.io/db/NA/quest/94061820/1" target="_blank" rel="noopener noreferrer" >Hunting Quest XI - Day 5 - Pride+</a>. The node is structured
 into a 2 - 1 - 1 Layout, meaning using a dual-DPS setup would be the way to go.

-Looking at the stats for the first wave, it made sense to use Nitocris: Both Ghouls have a 100% Death Rate <a href="https://apps.atlasacademy.io/db/NA/enemy/9940700" target="_blank" rel="noopener noreferrer" style="font-style: unset">according to Atlas Academy</a>.
+Looking at the stats for the first wave, it made sense to use Nitocris: Both Ghouls have a 100% Death Rate <a href="https://apps.atlasacademy.io/db/NA/enemy/9940700" target="_blank" rel="noopener noreferrer" >according to Atlas Academy</a>.

 I went with using Nitocris, since she has a 100% NP charge and a skill that increases her Instant Death rate by 100%. Not needing any additional charge meant that no other buffs or AOE charges needed to be used on turn 1.

--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -0,0 +1,16 @@
+import { z, defineCollection } from 'astro:content'
+
+const blogCollection = defineCollection({
+  type: 'content', // v2.5.0 and later
+  schema: z.object({
+    title: z.string(),
+    tags: z.array(z.string()),
+    pubDate: z.date(),
+    description: z.string(),
+    author: z.string(),
+  }),
+})
+
+export const collections = {
+  blog: blogCollection,
+}
--- a/src/content/data/cedata.json
+++ b/src/content/data/cedata.json
@ -37,7 +37,7 @@
 	{
 		"name": "Vessel of the Saint",
 		"imageFile": "vessel.png",
-		"mlb": false
+		"mlb": true
 	},
 	{
 		"name": "Devilish Bodhisattva",
--- a/src/content/data/favouritesdata.json
+++ b/src/content/data/favouritesdata.json
@ -10,5 +10,11 @@
        "origin": "Fate/Grand Order",
        "imageFile": "skadi.png",
        "link": "https://twitter.com/firq_ow/status/1544321985995489280"
+    },
+    {
+        "name": "Summer Skadi",
+        "origin": "Fate/Grand Order",
+        "imageFile": "summerskadi.png",
+        "link": "https://twitter.com/firq_ow/status/1816355501216596073"
    }
 ]
--- a/src/content/data/featureddata.json
+++ b/src/content/data/featureddata.json
--- a/src/content/data/navdata.json
+++ b/src/content/data/navdata.json
--- a/src/content/data/servantdata.json
+++ b/src/content/data/servantdata.json
@ -9,6 +9,16 @@
 		"bondceImageFile": "scathach.png",
 		"bond10": true
 	},
+	{
+		"name": "Summer Skadi",
+		"level": "120",
+		"np": "5",
+		"skills": "10 / 10 / 10",
+		"ml": "10",
+		"servantImageFile": "summerskadi_03.png",
+		"bondceImageFile": "summerskadi.png",
+		"bond10": true
+	},
 	{
 		"name": "Skadi",
 		"level": "120",
@ -19,6 +29,16 @@
 		"bondceImageFile": "skadi.png",
 		"bond10": true
 	},
+	{
+		"name": "Summer Skadi",
+		"level": "70",
+		"np": "1",
+		"skills": "10 / 10 / 10",
+		"ml": "1",
+		"servantImageFile": "summerskadi_02.png",
+		"bondceImageFile": "summerskadi.png",
+		"bond10": true
+	},
 	{
 		"name": "Skadi",
 		"level": "70",
@ -49,6 +69,16 @@
 		"bondceImageFile": "koyanlight.png",
 		"bond10": true
 	},
+	{
+		"name": "Koyanskaya of Light",
+		"level": "70",
+		"np": "1",
+		"skills": "10 / 10 / 10",
+		"ml": "Not Unlocked",
+		"servantImageFile": "koyanlight_02.png",
+		"bondceImageFile": "koyanlight.png",
+		"bond10": true
+	},
 	{
 		"name": "Castoria",
 		"level": "90",
@ -157,7 +187,7 @@
 		"ml": "10",
 		"servantImageFile": "douman_01.png",
 		"bondceImageFile": "douman.png",
-		"bond10": false
+		"bond10": true
 	},
 	{
 		"name": "Himiko",
@ -190,7 +220,7 @@
 		"bond10": false
 	},
 	{
-		"name": "Taigon Wang",
+		"name": "Taigong Wang",
 		"level": "70",
 		"np": "1",
 		"skills": "10 / 9 / 10",
@ -225,6 +255,16 @@
 		"np": "1",
 		"skills": "9 / 9 / X",
 		"ml": "Not Unlocked",
+		"servantImageFile": "liz_02.png",
+		"bondceImageFile": "liz.png",
+		"bond10": false
+	},
+	{
+		"name": "Elisabeth Báthory",
+		"level": "1",
+		"np": "1",
+		"skills": "9 / X / X",
+		"ml": "Not Unlocked",
 		"servantImageFile": "liz_01.png",
 		"bondceImageFile": "liz.png",
 		"bond10": false
--- a/src/content/data/socials.json
+++ b/src/content/data/socials.json
@ -0,0 +1,42 @@
+[
+  {
+    "link": "https://www.youtube.com/@Firq_",
+    "icon": "youtube",
+    "text": "Youtube"
+  },
+  {
+    "link": "https://mastodon.neshweb.net/@Firq",
+    "icon": "mastodon",
+    "text": "Mastodon"
+  },
+  {
+    "link": "https://twitter.com/firq_ow",
+    "icon": "twitter",
+    "text": "Twitter"
+  },
+  {
+    "link": "https://twitch.tv/Firq",
+    "icon": "twitch",
+    "text": "Twitch"
+  },
+  {
+    "link": "https://discord.com/users/186014064835690496",
+    "icon": "discord",
+    "text": "Discord"
+  },
+  {
+    "link": "https://www.reddit.com/user/Firq_ow/",
+    "icon": "reddit",
+    "text": "Reddit"
+  },
+  {
+    "link": "https://forgejo.neshweb.net/Firq",
+    "icon": "forgejo",
+    "text": "Forgejo"
+  },
+  {
+    "link": "https://rayshift.io/na/firq",
+    "icon": "rayshift",
+    "text": "Rayshift"
+  }
+]
--- a/src/content/data/tadata.json
+++ b/src/content/data/tadata.json
--- a/src/content/data/technologydata.json
+++ b/src/content/data/technologydata.json
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,8 +1,12 @@
 ---
-import Navbar from '../components/navbar.astro'
-import NavbarEntry from '../components/navbarEntry.astro'
-import navdata from '../../static/data/_navdata.json'
-import embed from '../assets/embed.png'
+import '@fontsource-variable/work-sans'
+import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2'
+
+import Navbar from '@components/navbar/navbar.astro'
+import NavbarEntry from '@components/navbar/navbarEntry.astro'
+import navdata from '@content/data/navdata.json'
+import embed from '@assets/embed.png'
+import favicon from '@assets/favicon.ico'

 import home from 'iconoir/icons/home.svg'
 import servants from 'iconoir/icons/task-list.svg'
@ -68,8 +72,17 @@ const mapped_navdata = navdata.map((item) => ({
      name="google-site-verification"
      content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE"
    />
+    <!-- Disable DarkReader, as site is already in dark mode -->
+    <meta name="darkreader-lock" content="this site only has darkmode" />
    <!-- Links -->
-    <link rel="icon" type="image/ico" href="/favicon.ico" />
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href={workSans}
+      type="font/woff2"
+    />
+    <link rel="icon" type="image/ico" href={favicon} />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link href="https://mastodon.neshweb.net/@Firq" rel="me" />
  </head>
@ -77,34 +90,64 @@ const mapped_navdata = navdata.map((item) => ({
    <Navbar>
      {
        mapped_navdata.map((item) => (
-          <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
+          <NavbarEntry
+            currentPage={currentpage}
+            navtype="desktop"
+            {...item}
+            slot="desktop"
+          />
        ))
      }
      {
        mapped_navdata.map((item) => (
-          <NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
+          <NavbarEntry
+            currentPage={currentpage}
+            navtype="mobile"
+            {...item}
+            slot="mobile"
+          />
        ))
      }
    </Navbar>
    <slot />
  </body>
 </html>
+
 <style is:global>
  :root {
-    --hover-scale: 1.05;
-    --speed: 50%;
-    --ease: 50%;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    --c-darkgray: #1e1e1e;
-    --c-duskgray: #242424;
-    --c-gray: #2e2e2e;
-    --c-lightgray: #3e3e3e;
-    --c-darkpurple: #b86cff;
-    --c-purplepink: #c105ff;
-    --c-darkergray: #1b1b1b;
+    /* Animations */
+    --a-time-default: 200ms;
+    --a-time-short: 100ms;
+    --a-time-slow: 1000ms;
+    --a-animation-1: ease-in-out;
+
+    /* Fonts */
+    --f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    --f-title: 'Work Sans Variable', sans-serif;
+
+    font-family: var(--f-default);
+
+    /* Colors */
+    --c-primary-background: #1b1b1b;
+    --c-secondary-background: #333;
+    --c-primary-text: #eee;
+    --c-accent-1: #b86cff;
+    --c-accent-1-alt: #c105ff;
+    --c-accent-2: #ff0077;
+
+    --c-rgb-primary-background: 27, 27, 27;
+    --c-rgb-secondary-background: 51, 51, 51;
+    --c-rgb-primary-text: 238, 238, 238;
+    --c-rgb-accent-1: 184, 108, 255;
+    --c-rgb-accent-1-alt: 193, 5, 255;
+    --c-rgb-accent-2: 255, 0, 119;
+
+    /* Scrollbar */
+    scrollbar-color: var(--c-secondary-background) var(--c-primary-background);
  }
+
  body {
-    background: var(--c-lightgray);
+    background: var(--c-secondary-background);
    margin: 0px;
  }

@ -117,5 +160,5 @@ const mapped_navdata = navdata.map((item) => ({
    padding: 0;
    position: absolute;
    width: 1px;
-}
+  }
 </style>
--- a/src/layouts/aboutSection.astro
+++ b/src/layouts/aboutSection.astro
@ -1,74 +0,0 @@
---
-export interface Props {
-  title: string
-}
-
-const { title } = Astro.props
---
-
-<section class="base">
-  <h1>{title}</h1>
-  <div>
-    <slot />
-  </div>
-</section>
-
-<style>
-  h1 {
-    font-size: 40px;
-    line-height: 48px;
-    letter-spacing: -1px;
-    color: white;
-    font-size: 2.25rem;
-    margin-top: 1rem;
-    margin-bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0.25rem 0.75rem;
-    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1.5rem;
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  div {
-    row-gap: 1em;
-    column-gap: 1em;
-    justify-content: center;
-    align-self: center;
-    display: flex;
-    flex-flow: row wrap;
-    padding: 1em;
-    color: white;
-    font-size: 1em;
-  }
-
-  .base {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
-  @media (min-width: 400px) {
-    .base {
-      margin-left: 3rem;
-      margin-right: 3rem;
-    }
-  }
-  @media (min-width: 1500px) {
-    .base {
-      margin-left: 10%;
-      margin-right: 10%;
-    }
-  }
-  @media (min-width: 512px) {
-    div {
-      justify-content: left;
-    }
-  }
-
-  @media (min-width: 520px) {
-    h1 {
-      margin: 0.5rem 0.75rem 0.5rem 0.75rem;
-    }
-  }
-</style>
--- a/src/layouts/baseSection.astro
+++ b/src/layouts/baseSection.astro
@ -30,33 +30,23 @@ const { title } = Astro.props
    padding: 1em;
    position: relative;
  }
-  div h1 {
+  h1 {
    font-size: 40px;
-    line-height: 48px;
    letter-spacing: -1px;
-    color: white;
-    margin-top: 2rem;
-    margin-bottom: 0px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0.25rem 1.5rem;
-    border-radius: 0.5rem;
+    color: var(--c-primary-text);
+    margin: 0 auto 0px;
+    padding: 0.25rem 1.5rem 0.5rem;
    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding-bottom: 0.5rem;
-  }
-  @media (min-width: 512px) {
-    div {
-      row-gap: 1.5em;
-      column-gap: 1.5em;
+    &:after {
+      content:' ';
+      display: block;
+      width: 65%;
+      height: 3px;
+      margin: auto;
+      background-color: var(--c-accent-1);
    }
  }

-  .base {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
  @media (min-width: 1000px) {
    .base {
      margin-left: 3rem;
--- a/src/layouts/blogPost.astro
+++ b/src/layouts/blogPost.astro
@ -1,4 +1,5 @@
 ---
+import SmallTitle from '@components/titles/smallTitle.astro'
 import Layout from './Layout.astro'
 const { frontmatter } = Astro.props

@ -13,108 +14,90 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
  'en-GB',
  options_date
 )
+const subtext = `Written by ${frontmatter.author} • Published on ${date}`
 ---

 <Layout title={title} currentpage="blog" descriptionOverride={description}>
-  <a href="/blog"><i class="iconoir-fast-arrow-left"></i>Back to all posts</a>
-  <div>
-    <h1>
-      {frontmatter.title}
-    </h1>
-    <p>by {frontmatter.author} • Published on {date}</p>
-    <article>
-      <slot />
-    </article>
-  </div>
+  <SmallTitle maintext={frontmatter.title} subtext={subtext} fadeout={true} returnbutton={true} baseurl='blog'/>
+  <article>
+    <slot />
+  </article>
 </Layout>

 <style>
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    text-align: center;
-    color: white;
-    background-color: var(--c-gray);
-    padding: 0.5rem 0px;
-    margin-bottom: 2rem;
-    text-decoration: none;
-  }
-  h1 {
-    font-size: 34px;
-    line-height: 40px;
-    letter-spacing: -1px;
-    color: white;
+  article {
+    color: var(--c-primary-text);
    margin: 0.5rem 3rem 0.5rem 3rem;
-    padding: 0.25rem 0.75rem;
-    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  p {
-    color: white;
-    margin: 0.5rem 3rem 0.5rem 3rem;
-    padding: 0.25rem 0.75rem;
-    max-width: max-content;
-    background-color: var(--c-gray);
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
+    font-size: 1.1em;
+    text-align: justify;
+    padding-bottom: 5rem;
  }
+
  article :global(h2) {
-    margin-right: 3rem;
+    font-size: 32px;
    word-wrap: normal;
-    color: white;
-    padding: 0.25rem 0.75rem;
+    color: var(--c-primary-text);
    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
-    border-radius: 0.5rem;
    padding-bottom: 0.5rem;
+    text-align: left;
+    line-height: 32px;
+    &:after {
+      content:' ';
+      display: block;
+      width: 75%;
+      margin-top: 2px;
+      border: 1px solid var(--c-accent-1);
+      box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
+    }
  }

  article :global(h3) {
-    margin-bottom: 0.5rem;
-    margin-right: 3rem;
+    font-size: 24px;
    word-wrap: normal;
-    color: white;
-    padding: 0.25rem 0.75rem;
+    color: var(--c-primary-text);
    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
-    border-radius: 0.5rem;
    padding-bottom: 0.5rem;
+    text-align: left;
+    line-height: 32px;
+    &:after {
+      content:' ';
+      display: block;
+      width: 75%;
+      margin-top: 2px;
+      border: 1px solid var(--c-accent-1);
+      box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
+    }
  }

  article :global(h4) {
-    margin-bottom: 0.5rem;
-    margin-right: 3rem;
+    font-size: 18px;
    word-wrap: normal;
-    color: white;
-    padding: 0.25rem 0.75rem;
+    color: var(--c-primary-text);
    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
+    margin-bottom: 0px;
+    text-align: left;
+    line-height: 32px;
+    &:after {
+      content:' ';
+      display: block;
+      width: 75%;
+      margin-top: 1px;
+      border: 1px solid var(--c-accent-1);
+      box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
+    }
  }
+
  article :global(a) {
    color: #dcb7ff;
    text-decoration: none;
    font-style: italic;
  }
-  article {
-    color: white;
-    margin: 0.5rem 3rem 0.5rem 3rem;
-    font-size: 1.1em;
-    padding-bottom: 5rem;
-  }
+
  article :global(.astro-code) {
    width: auto;
    padding: 1rem 1rem 1rem 2rem;
  }
+
  article :global(code) {
    font-weight: bold;
    color: orange;
@ -122,31 +105,16 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(

  @media (min-width: 1000px) {
    article {
-      margin-left: 10rem;
-      margin-right: 10rem;
+      margin-left: 22.5%;
+      margin-right: 22.5%;
    }
    h1 {
-      margin-left: 10rem;
-      margin-right: 10rem;
+      margin-left: 20%;
+      margin-right: 20%;
    }
    p {
-      margin-left: 10rem;
-      margin-right: 10rem;
-    }
-  }
-
-  @media (min-width: 1500px) {
-    article {
-      margin-left: 20rem;
-      margin-right: 20rem;
-    }
-    h1 {
-      margin-left: 20rem;
-      margin-right: 20rem;
-    }
-    p {
-      margin-left: 20rem;
-      margin-right: 20rem;
+      margin-left: 20%;
+      margin-right: 20%;
    }
  }
 </style>
--- a/src/layouts/blogSection.astro
+++ b/src/layouts/blogSection.astro
@ -1,36 +1,59 @@
 ---
 export interface Props {
  title: string
+  titlehidden?: boolean
+  displayLine?: boolean
 }
-
-const { title } = Astro.props
+const { title, titlehidden, displayLine } = Astro.props
+const display = titlehidden ? "display: none" : ""
+const line = displayLine ? "flex" : "none"
 ---

 <section>
-  <h1>{title}</h1>
+  <h1 style={display}>{title}</h1>
  <div class="wrapper">
+    <div class="start hightlighter"></div>
    <div class="line"></div>
    <slot />
-    <div class="drop"></div>
+    <div class="drop hightlighter"></div>
  </div>
 </section>

-<style>
-  .drop {
+<style define:vars={{ line }}>
+  section {
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+    padding-bottom: 5rem;
+  }
+
+  .hightlighter {
+    left: 0;
+    right: 0;
    display: flex;
    position: absolute;
    visibility: visible;
-    left: 0;
-    right: 0;
-    bottom: -5rem;
    margin-left: auto;
    margin-right: auto;
    height: 1.5rem;
    width: 1.5rem;
+  }
+
+  .drop {
+    bottom: -5rem;
    border-radius: 0% 50% 50% 50%;
    transform: rotate(45deg);
-    background-color: var(--c-darkpurple);
+    background-color: var(--c-accent-1);
  }
+
+  .start {
+    top: -2rem;
+    border-radius: 40%;
+    border-style: solid;
+    border-width: 0.25rem;
+    border-color: var(--c-secondary-background);
+    background-color: var(--c-accent-1);
+  }
+
  .line {
    display: flex;
    position: absolute;
@ -39,40 +62,41 @@ const { title } = Astro.props
    right: 0;
    margin-left: auto;
    margin-right: auto;
-    background-color: var(--c-darkpurple);
+    background-color: var(--c-accent-1);
    height: calc(100% + 5rem);
    translate: 0% 2rem;
    width: 0.25rem;
    z-index: -1;
  }
  h1 {
-    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1px;
-    color: white;
-    font-size: 2.25rem;
+    color: var(--c-primary-text);
+    font-size: 1.6rem;
    margin-top: 1rem;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
-    padding: 0.25rem 0.75rem;
    max-width: max-content;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-primary-background);
    padding: 0.25rem 1.5rem;
    border-radius: 0.5rem;
    padding-bottom: 0.5rem;
+    justify-self: center;
+    text-align: center;
  }
  .wrapper {
-    margin: 2rem 3rem 0.5rem 3rem;
+    margin: 2rem 2rem 0.5rem 2rem;
    display: flex;
    flex-flow: column wrap;
    row-gap: 1em;
    column-gap: 1em;
    align-self: center;
    align-items: stretch;
+    align-content: center;
    justify-content: space-around;
    padding: 1em;
-    color: white;
+    color: var(--c-primary-text);
    font-size: 1em;
    position: relative;
  }
@ -80,21 +104,41 @@ const { title } = Astro.props
    .drop {
      margin-left: 1.5rem;
    }
+    .start {
+      margin-left: 1.25rem;
+    }
    .line {
      margin-left: 2.1rem;
    }
    h1 {
      margin-left: 3rem;
+      font-size: 1.85rem;
    }
  }
-  @media (min-width: 1500px) {
+  @media (min-width: 1100px) {
    .wrapper {
-      margin-left: 20rem;
-      margin-right: 20rem;
+      margin-left: 20%;
+      margin-right: 20%;
+      flex-direction: row;
+    }
+    section {
+      padding-bottom: unset;
+    }
+    .drop, .start, .line {
+      display: var(--line);
+      margin-left: 2rem;
+    }
+    .start {
+      margin-left: 1.75rem;
+    }
+    .line {
+      margin-left: 2.6rem;
+      height: calc(100% + 6rem);
+      translate: 0px -2rem;
    }
    h1 {
-      margin-left: 20rem;
-      margin-right: 20rem;
+      margin-left: 15rem;
+      margin-right: 15rem;
    }
  }
 </style>
--- a/src/layouts/contactSection.astro
+++ b/src/layouts/contactSection.astro
@ -15,18 +15,23 @@ const { title } = Astro.props

 <style>
  h1 {
-    color: white;
-    font-size: 26px;
+    color: var(--c-primary-text);
+    font-size: 24px;
+    font-weight: 700;
    line-height: 32px;
-    letter-spacing: -1px;
-    margin: 0.5rem 0px 0.5rem 0.5em;
-    padding: 0.25rem 0.75rem;
+    font-family: 'Work Sans Adaptive', sans-serif;
    width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1rem;
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
+    margin: 0 auto 0.5rem;
+    &:after {
+      content:' ';
+      display: block;
+      width: 75%;
+      height: 2px;
+      margin: -1px auto auto;
+      background-color: var(--c-accent-1);
+    }
  }
+
  div {
    row-gap: 1em;
    column-gap: 1em;
@ -51,6 +56,14 @@ const { title } = Astro.props
      margin-left: 3rem;
      margin-right: 3rem;
    }
+
+    h1 {
+      margin-left: 0;
+      margin-right: 0;
+      &:after {
+        margin: -2px 0 0;
+      }
+    }
  }
  @media (min-width: 1500px) {
    .base {
--- a/src/layouts/customFooter.astro
+++ b/src/layouts/customFooter.astro
@ -1,8 +1,8 @@
 ---
-import okita from '../assets/okita.png'
-import atlas from '../assets/atlas.png'
-import foxcat from '../assets/lurker.png'
-import padoru from '../assets/padoru.png'
+import okita from '@assets/okita.png'
+import atlas from '@assets/atlas.png'
+import foxcat from '@assets/lurker.png'
+import padoru from '@assets/padoru.png'
 import { Image } from 'astro:assets'

 import packagejson from '../../package.json'
@ -75,7 +75,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
      rel="noopener noreferrer">AnthonyJ</a
    > for providing me with the custom Shishou favicon.
    <div class="sticky-image-wrapper">
-      <Image src={padoru} alt="Hashire sori yo ..." />
+      <Image src={padoru} alt="Hashire sori yo ..." width={64} height={64} quality={100}/>
    </div>
  </div>
  <br />
@ -88,11 +88,11 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/

 <style>
  footer {
-    color: white;
+    color: var(--c-primary-text);
    bottom: 0;
  }
  footer > div > a {
-    color: white;
+    color: var(--c-primary-text);
  }
  .sticky-image-wrapper {
    position: fixed;
@ -108,7 +108,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
    bottom: -100px;
    height: 64px;
    width: 64px;
-    transition: transform 1s ease-in-out;
+    transition: transform var(--a-time-slow) var(--a-animation-1);
    transform: translateX(-50%);
  }
 </style>
--- a/src/layouts/servantSection.astro
+++ b/src/layouts/servantSection.astro
@ -0,0 +1,65 @@
+---
+export interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<div class="base">
+  <h1>{title}</h1>
+  <div>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .base {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .base div {
+    display: flex;
+    position: relative;
+    flex-flow: row wrap;
+    row-gap: 1em;
+    column-gap: 1em;
+    justify-content: center;
+    align-self: center;
+    padding: 1em;
+  }
+
+  .base h1 {
+    font-size: 40px;
+    letter-spacing: -1px;
+    color: var(--c-primary-text);
+    margin: 0 auto 0px;
+    padding: 0.25rem 1.5rem 0.5rem;
+    max-width: max-content;
+    &:after {
+      content:' ';
+      display: block;
+      width: 65%;
+      height: 3px;
+      margin: auto;
+      background-color: var(--c-accent-1);
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .base div {
+      margin-left: 3rem;
+      margin-right: 3rem;
+    }
+  }
+
+  @media (min-width: 1500px) {
+    .base div {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
+</style>
--- a/src/layouts/taSection.astro
+++ b/src/layouts/taSection.astro
@ -24,34 +24,36 @@ if (abovetext === undefined) {

 <style>
  div > div {
-    row-gap: 1.5em;
-    column-gap: 1.5em;
+    display: flex;
+    position: relative;
+    flex-flow: row wrap;
+    row-gap: 1em;
+    column-gap: 1em;
    justify-content: center;
    align-self: center;
-    display: flex;
-    flex-flow: row wrap;
    padding: 1em;
  }
  h1 {
    font-size: 40px;
-    line-height: 48px;
    letter-spacing: -1px;
-    color: white;
-    margin-top: 2rem;
-    margin-bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0.25rem 0.75rem;
+    color: var(--c-primary-text);
+    margin: 0 auto 0px;
+    padding: 0.25rem 1.5rem 0.5rem;
    max-width: max-content;
-    background-color: var(--c-darkgray);
-    padding: 0.25rem 1.5rem;
-    border-radius: 0.5rem;
-    padding-bottom: 0.5rem;
+    &:after {
+      content:' ';
+      display: block;
+      width: 65%;
+      height: 3px;
+      margin: auto;
+      background-color: var(--c-accent-1);
+    }
  }
+
  h2 {
-    color: white;
+    color: var(--c-primary-text);
    font-size: 16px;
-    font-weight: 600;
+    font-weight: 400;
    margin: 5;
    line-height: 20px;
    text-align: center;
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -1,8 +1,8 @@
 ---
 import { Image } from 'astro:assets'
-import Layout from '../layouts/Layout.astro'
-import BaseSection from '../layouts/baseSection.astro'
-import sadshishou from '../assets/shishousad.webp'
+import Layout from '@layouts/Layout.astro'
+import sadshishou from '@assets/shishousad.webp'
+import SmallTitle from '@components/titles/smallTitle.astro'

 const description = "Error. This shouldn't happen :/"
 ---
@ -12,7 +12,7 @@ const description = "Error. This shouldn't happen :/"
  currentpage="404"
  descriptionOverride={description}
 >
-  <BaseSection title="FirqhundredandFirq - Not Found">
+  <SmallTitle maintext='Error' subtext='FirqhundredandFirq - Not Found' fadeout={true}/>
    <div>
      <Image src={sadshishou} alt="Sad Shishou" />
      <h2>Well ... you were not supposed to end up here.</h2>
@ -20,44 +20,51 @@ const description = "Error. This shouldn't happen :/"
        &lt;&lt; Go back home
      </a>
    </div>
-  </BaseSection>
 </Layout>

 <style>
  div {
+    padding: 0px 2rem;
    display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
  h2 {
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
+    font-family: 'Work Sans Variable', sans-serif;
+    font-weight: 500;
+    color: var(--c-primary-text);
+    font-size: 1.25rem;
    margin-top: 1rem;
    max-width: max-content;
-  }
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 75%;
    text-align: center;
-    color: white;
-    background-color: var(--c-gray);
-    padding: 0.5rem 0px;
-    margin-bottom: 2rem;
-    text-decoration: none;
-    font-size: 1.5rem;
-    font-weight: bold;
+    font-style: italic;
+  }

-    &:hover {
-      color: var(--c-darkpurple);
-    }
+  a {
+    text-align: center;
+    width: fit-content;
+    font-weight: 500;
+    font-family: 'Work Sans Variable', sans-serif;
+    color: var(--c-primary-text);
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    background-color: var(--c-primary-background);
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--c-primary-background);
+    text-transform: capitalize;
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
  }

  img {
-    width: 256px;
-    height: 256px;
+    width: 200px;
+    height: auto;
+    border-radius: 10%;
  }
 </style>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@ -1,17 +1,17 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import AboutSection from '../layouts/aboutSection.astro'
+import Layout from '@layouts/Layout.astro'

-import ContactSection from '../layouts/contactSection.astro'
-import ContactCard from '../components/contactCard.astro'
-import contactdata from '../../static/data/_contactdata.json'
+import ContactSection from '@layouts/contactSection.astro'

-import CustomFooter from '../layouts/customFooter.astro'
-import TechnologyCard from '../components/technologyCard.astro'
-import technologydata from '../../static/data/_technologydata.json'
+import CustomFooter from '@layouts/customFooter.astro'
+import TechnologyCard from '@components/cards/technologyCard.astro'
+import technologydata from '@content/data/technologydata.json'
+import SmallTitle from '@components/titles/smallTitle.astro'

 const description =
  "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
+const subtext = 
+  "This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript."
 ---

 <Layout
@ -19,16 +19,10 @@ const description =
  currentpage="about"
  descriptionOverride={description}
 >
-  <AboutSection title="About">
-    This is a small sideproject that I'm creating. First time doing webdev in
-    general, and first project using Typescript.
-  </AboutSection>
-  <ContactSection title="Technologies used">
+  <SmallTitle maintext="About this site" subtext={subtext} fadeout={true} />
+  <ContactSection title="Powered by">
    {technologydata.map((item) => <TechnologyCard {...item} />)}
  </ContactSection>
-  <ContactSection title="Contact me">
-    {contactdata.map((item) => <ContactCard {...item} />)}
-  </ContactSection>
  <ContactSection title="Disclaimers">
    <CustomFooter />
  </ContactSection>
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@ -1,35 +0,0 @@
---
-import Layout from '../layouts/Layout.astro'
-import BlogCard from '../components/blogCard.astro'
-import BlogSection from '../layouts/blogSection.astro'
-
-const description =
-  'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
-const allPosts = await Astro.glob('../pages/blog/*.{md,mdx}')
-allPosts.sort(
-  (a, b) =>
-    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
-)
---
-
-<Layout
-  title="Blog - Firq FGO Site"
-  currentpage="blog"
-  descriptionOverride={description}
->
-  <BlogSection title="Blog Articles">
-    {
-      allPosts.map((post) => (
-        <BlogCard
-          url={post.url}
-          title={post.frontmatter.title}
-          pubdate={post.frontmatter.pubDate}
-          description={post.frontmatter.description}
-          author={post.frontmatter.author}
-        />
-      ))
-    }
-  </BlogSection>
-</Layout>
-
-<style></style>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@ -0,0 +1,17 @@
+---
+import { getCollection } from 'astro:content'
+
+export async function getStaticPaths() {
+    const blogEntries = await getCollection('blog')
+
+    return blogEntries.map((entry) => ({
+        params: { slug: entry.slug },
+        props: { entry },
+    }))
+}
+
+const { entry } = Astro.props
+const { Content } = await entry.render()
+---
+
+<Content />
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@ -0,0 +1,39 @@
+---
+import Layout from '@layouts/Layout.astro'
+import BlogCard from '@components/cards/blogCard.astro'
+import BlogSection from '@layouts/blogSection.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import { getCollection } from 'astro:content'
+
+const description =
+  'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
+const blogEntries = await getCollection('blog')
+blogEntries.sort(
+  (a, b) =>
+    (b.data.pubDate.valueOf() - a.data.pubDate.valueOf() )
+)
+---
+
+<Layout
+  title="Blog - Firq FGO Site"
+  currentpage="blog"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="Blog Articles" subtext="" fadeout={true} />
+  <BlogSection title="Blog Articles" displayLine={true} titlehidden={true}>
+    {
+      blogEntries.map((post) => (
+        <BlogCard
+          url="blog"
+          slug={post.slug}
+          title={post.data.title}
+          pubdate={post.data.pubDate}
+          description={post.data.description}
+          author={post.data.author}
+        />
+      ))
+    }
+  </BlogSection>
+</Layout>
+
+<style></style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,9 +1,10 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import Hero from '../components/hero.astro'
-import BaseSection from '../layouts/baseSection.astro'
-import FavouriteCard from '../components/favouriteCard.astro'
-import favouritesdata from '../../static/data/_favouritesdata.json'
+import AboutText from '@components/aboutText.astro'
+import FavouriteCard from '@components/cards/favouriteCard.astro'
+import Hi from '@components/titles/title.astro'
+import favouritesdata from '@content/data/favouritesdata.json'
+import Layout from '@layouts/Layout.astro'
+import BaseSection from '@layouts/baseSection.astro'

 const description =
  'The very own page of Firq for providing informating about TA servants, listing past TA achievements and hosting a blog for talking about FGO, Programming and other stuff'
@ -14,8 +15,11 @@ const description =
  currentpage="home"
  descriptionOverride={description}
 >
-  <Hero />
-  <BaseSection title="Favourites">
+  <Hi />
+  <BaseSection title="About me">
+    <AboutText/>
+  </BaseSection>
+  <BaseSection title="Favourite Things">
    {favouritesdata.map((item) => <FavouriteCard {...item} />)}
  </BaseSection>
 </Layout>
--- a/src/pages/servants.astro
+++ b/src/pages/servants.astro
@ -1,12 +1,13 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import BaseSection from '../layouts/baseSection.astro'
+import Layout from '@layouts/Layout.astro'
+import ServantSection from '@layouts/servantSection.astro'

-import ServantCard from '../components/servantCard.astro'
-import servantdata from '../../static/data/_servantdata.json'
+import ServantCard from '@components/cards/servantCard.astro'
+import servantdata from '@content/data/servantdata.json'

-import CeCard from '../components/ceCard.astro'
-import cedata from '../../static/data/_cedata.json'
+import CeCard from '@components/cards/ceCard.astro'
+import cedata from '@content/data/cedata.json'
+import SmallTitle from '@components/titles/smallTitle.astro'

 const description =
  'A list of all the servants and ces that Firq can offer up on support for TA.'
@ -17,13 +18,14 @@ const description =
  currentpage="servants"
  descriptionOverride={description}
 >
-  <BaseSection title="Servants">
-    {servantdata.map((item) => <ServantCard {...item} />)}
-  </BaseSection>
+  <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
+  <ServantSection title="Servants">
+    {servantdata.map((item, index) => <ServantCard {...item} index={index} />)}
+  </ServantSection>
  <div class="placeholder"></div>
-  <BaseSection title="CEs">
+  <ServantSection title="CEs">
    {cedata.map((item) => <CeCard {...item} />)}
-  </BaseSection>
+  </ServantSection>
  <div class="placeholder"></div>
 </Layout>

--- a/src/pages/ta-collection.astro
+++ b/src/pages/ta-collection.astro
@ -5,13 +5,14 @@
 // > You could have the notable ones like you do now, but at the bottom, there could be a drop-down or "expand" or "more" or
 // > some other section like that which you could click and show the rest

-import Layout from '../layouts/Layout.astro'
+import Layout from '@layouts/Layout.astro'

-import TaSection from '../layouts/taSection.astro'
-import TaCard from '../components/taCard.astro'
-import tadata from '../../static/data/_tadata.json'
-import featured_data from '../../static/data/_featureddata.json'
-import FgotaHero from '../components/fgotaHero.astro'
+import TaSection from '@layouts/taSection.astro'
+import TaCard from '@components/cards/taCard.astro'
+import tadata from '@content/data/tadata.json'
+import featured_data from '@content/data/featureddata.json'
+import FgotaHero from '@components/fgotaHero.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'

 const important_data = tadata.filter(function (el) {
  return [
@ -37,7 +38,8 @@ const description = 'A collection of TAs previously completed be Firq.'
  currentpage="ta-collection"
  descriptionOverride={description}
 >
-  <FgotaHero />
+  <SmallTitle maintext='TA Collection' subtext=''/>
+  <FgotaHero fadeout={true}/>
  <TaSection title="Notable TAs" abovetext="My most notable TAs">
    {important_data.map((item) => <TaCard {...item} />)}
  </TaSection>
--- a/static/data/_contactdata.json
+++ b/static/data/_contactdata.json
@ -1,32 +0,0 @@
-[
-	{
-		"site": "Youtube: @Firq_",
-		"link": "https://www.youtube.com/@Firq_",
-		"imageFile": "youtube.webp"
-	},
-	{
-		"site": "Twitch: Firq",
-		"link": "https://www.twitch.tv/firq",
-		"imageFile": "twitch.webp"
-	},
-	{
-		"site": "Discord: firq",
-		"link": "https://discord.com/users/186014064835690496",
-		"imageFile": "discord.webp"
-	},
-	{
-		"site": "Twitter: Firq_ow",
-		"link": "https://twitter.com/firq_ow",
-		"imageFile": "twitter.webp"
-	},
-	{
-		"site": "Reddit: u/Firq_ow",
-		"link": "https://www.reddit.com/user/firq_ow",
-		"imageFile": "reddit.webp"
-	},
-	{
-		"site": "Support Setup on Rayshift",
-		"link": "https://rayshift.io/na/firq",
-		"imageFile": "custom-fgo.webp"
-	}
-]
--- a/static/robots.txt
+++ b/static/robots.txt
@ -1,7 +0,0 @@
-user-agent:*
-Disallow: /assets/data/
-
-User-agent: GPTBot
-Disallow: /
-
-Sitemap: https://firq.dev/sitemap-index.xml
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,12 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@assets/*": [ "src/assets/*" ],
+      "@components/*": [ "src/components/*" ],
+      "@content/*": [ "src/content/*" ],
+      "@layouts/*": [ "src/layouts/*" ]
+    }
+  }
 }
--- a/unlighthouse.config.ts
+++ b/unlighthouse.config.ts
@ -1,10 +1,32 @@
 export default {
+    lighthouseOptions: {
+        throttlingMethod: "devtools",
+        throttling: {
+            cpuSlowdownMultiplier: 4,
+            requestLatencyMs: 150,
+            downloadThroughputKbps: 1638.4,
+            uploadThroughputKbps: 1638.4,
+        },
+        screenEmulation: {
+            width: 412,
+            height: 823,
+            deviceScaleFactor: 1.75,
+        }
+    },
    puppeteerOptions: {
-        args: ["--no-sandbox", "--disable-setuid-sandbox"],
+        args: [ 
+            "--no-sandbox",
+            "--disable-setuid-sandbox"
+        ],
    },
    ci: {
        budget: 50,
-        buildStatic: true
+        buildStatic: true,
+    },
+    scanner: {
+        sitemap: true,
+        dynamicSampling: false,
+        samples: 3,
    },
    outputPath: "unlighthouse-reports",
 }
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z" fill-rule="evenodd" clip-rule="evenodd"/></svg>`