debugging

This reverts commit d93d0416e5.

.forgejo/workflows/build_preview.yml

@@ -1,41 +1,61 @@
+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
+          build-args: |
+            version=${{ github.ref_name }}
 
-  publish:
-    needs: [build-site]
+  create-release:
+    needs: [ build-site ]
     if: success()
     runs-on: docker
     steps:
@@ -49,22 +69,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

.forgejo/workflows/build_release.yml

@@ -1,41 +1,92 @@
+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
+          build-args: |
+            version=${{ github.ref_name }}
 
-  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:

.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

.forgejo/workflows/unlighthouse.yml

@@ -1,18 +1,38 @@
+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.16.3
+    services:
+      website:
+        image: forgejo.neshweb.net/firq/firq-dev-website:${{ inputs.containertag }}
+        options: >-
+          --hostname website
     steps:
       - name: Checkout repository
-        uses: https://code.forgejo.org/actions/checkout@v3 
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check availability
+        run: |
+          while [ "$(curl -o /dev/null -s -w '%{http_code}' http://website:8081)" -ne 200 ];
+            do
+              echo "Waiting...";
+              echo "$(curl -o /dev/null -s -w '%{http_code}' http://website:8081 || echo '000')"
+            sleep 5;
+          done;
       - name: Run unlighthouse
-        run: unlighthouse-ci --site "https://preview.firq.dev/"
+        run: unlighthouse-ci --site "http://website:8081"
+      - name: Replace URLs
+        run: find ./unlighthouse-reports -type f | xargs sed -i "s|http://website:8081|https://preview.firq.dev|g";
       - name: Prepare artifacts
         run: cp serve.json unlighthouse-reports
       - name: Upload reports
@@ -20,79 +40,67 @@ jobs:
         with:
           name: unlighthouse-reports
           path: unlighthouse-reports/
+      - name: Upload start-script
+        uses: actions/upload-artifact@v3
+        with:
+          name: start
+          path: start.sh
+      - 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 start script
+        uses: actions/download-artifact@v3
+        with:
+          name: start
       - 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
+          build-args: |
+            version=${{ inputs.containertag }}
 
-  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 down firq-dev-unlighthouse
+          dockge update firq-dev-unlighthouse
+          dockge start firq-dev-unlighthouse
+          dockge status firq-dev-unlighthouse

.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

.markdownlint.json

@@ -0,0 +1,5 @@
+{
+    "MD013":false,
+    "MD033": false,
+    "MD036": false
+}

.prettierignore

@@ -3,4 +3,5 @@
 **/.vscode
 **/public
 **/static
-**/scripts
+**/scripts
+**/dist

.vscode/extensions.json

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

.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"
-    }
-  ]
-}

.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": []
-}

Dockerfile

@@ -1,16 +1,23 @@
-FROM node:lts AS build
+FROM forgejo.neshweb.net/ci-docker-images/node-chromium:22 AS build
 WORKDIR /app
-COPY . .
-RUN npm i
-RUN npm run build
+ENV CI=true
 
-FROM forgejo.neshweb.net/ci-docker-images/website-serve:latest AS runtime
+COPY . .
+
+RUN npm i
+RUN npm run astro telemetry disable
+RUN npm run build
+RUN rm ./dist/.original.favicon.ico
+
+FROM forgejo.neshweb.net/ci-docker-images/website-serve:2 AS runtime
+ARG version=0.0.1
+ENV version=${version}
+WORKDIR /
 
 COPY --from=build /app/dist /public
 COPY --from=build /app/serve.json /public/serve.json
-RUN rm -r /public/data/
+COPY --from=build /app/start.sh /
+RUN chmod +x start.sh
 
-ENV PORT 8081
 EXPOSE 8081
-
-CMD [ "serve", "public/", "-p", "8081" ]
+CMD ./start.sh

Dockerfile.reports

@@ -0,0 +1,12 @@
+FROM forgejo.neshweb.net/ci-docker-images/website-serve:2 AS runtime
+
+ARG version=0.0.1
+ENV version=${version}
+
+WORKDIR /
+ADD reports /public
+ADD start.sh /
+RUN chmod +x /start.sh
+
+EXPOSE 8081
+CMD ./start.sh

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                       |
-

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 criticalCss from 'astro-critical-css';
+import astroMetaTags from "astro-meta-tags";
+import { defineConfig } from 'astro/config';
 
 // 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(), criticalCss()],
 });

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.27",
+	"version": "0.2.0-pre.100",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -11,15 +11,21 @@
 		"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.6",
+		"@astrojs/check": "^0.9.4",
+		"@astrojs/mdx": "^4.2.3",
+		"@astrojs/sitemap": "^3.3.0",
+		"@fontsource-variable/work-sans": "^5.2.5",
+		"astro": "^5.6.1",
+		"astro-critical-css": "^0.0.7",
+		"astro-meta-tags": "^0.3.1",
+		"autoprefixer": "^10.4.21",
+		"iconoir": "^7.10.1",
+		"postcss-preset-env": "^10.1.5",
+		"typescript": "^5.8.3"
+	},
+	"devDependencies": {
+		"unlighthouse": "^0.16.3"
 	},
 	"browserslist": [
 		"last 2 versions",

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

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" : [{

src/assets/custom-svg/bluesky.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#000"/>
+</svg>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

src/components/cards/projectCard.astro

@@ -0,0 +1,78 @@
+---
+export interface Props {
+  url: string
+  description: string,
+  name: string
+}
+
+const { url, description, name } = Astro.props
+const target = url.startsWith("/") ? "" : "_blank" 
+---
+
+<a href={url} rel="noopener noreferrer" target={target}>
+  <h2>{name}</h2>
+  <p>{description}</p>
+</a>
+
+<style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
+  a {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+    
+    height: fit-content;
+    min-height: 100%;
+    width: 100%;
+    min-width: 12em;
+
+    text-align: center;
+    text-decoration: none;
+    align-content: center;
+
+    padding: 10px;
+    margin: 0px 0.5rem;
+
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+  }
+  p {
+    color: var(--c-primary-text);
+    text-align: justify;
+    font-size: 1.1em;
+    margin: 0.5em;
+  }
+  a > h2 {
+    margin: 0.3rem 0.5rem;
+    color: var(--c-accent-1);
+    font-size: 1.5rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  a > h3 {
+    margin: 0.2em 0.5rem;
+    color: var(--c-primary-text);
+    font-size: 1rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  @media (min-width: 420px) {
+    a {
+      min-width: 24em;
+      max-width: 24em;
+    }
+  }
+
+</style>

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>

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>

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>

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>

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>

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>

src/components/links/linkContainer.astro

@@ -0,0 +1,29 @@
+---
+import LinkCard from './linkCard.astro'
+import socialData from '@datafiles/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>

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 bluesky from '@assets/custom-svg/bluesky.svg'
+
+import type { ImageMetadata } from 'astro'
+
+import mastodon from 'iconoir/icons/mastodon.svg'
+import youtube from 'iconoir/icons/youtube.svg'
+
+export const socials: Record<string, ImageMetadata> = {
+  forgejo,
+  rayshift,
+  reddit,
+  twitch,
+  discord,
+  mastodon,
+  bluesky,
+  youtube,
+}

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>

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>

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>

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,17 +39,19 @@ 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;
     text-align: left;
     display: flex;
-    width: 200px;
   }
 
   li > a {
     display: inline-flex;
-    color: white;
+    color: var(--c-primary-text);
     text-decoration: none;
     justify-content: center;
     align-items: center;
@@ -60,25 +62,31 @@ 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;
   }
+
+  @media (min-width: 304px) {
+    li {
+      width: 200px;
+    }
+  }
 </style>

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>

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>

src/components/placeholder.astro

@@ -0,0 +1,16 @@
+---
+export interface Props {
+  height?: string
+}
+const { height } = Astro.props
+const ph_height = height || "5rem"
+---
+<div class="placeholder"></div>
+
+<style define:vars={{ph_height}}>
+  .placeholder {
+    visibility: hidden;
+    width: 100%;
+    height: var(--ph_height);
+  }
+</style>

src/components/titles/smallTitle.astro

@@ -0,0 +1,108 @@
+---
+export interface Props {
+  maintext: string
+  subtext: string
+  fadeout?: boolean
+  baseurl?: string
+  returnbutton?: boolean
+  buttontext?: string
+}
+const { maintext, subtext, fadeout, baseurl, returnbutton, buttontext } = Astro.props
+const displayFadeout = fadeout ? "": "display: none"
+const displayBackButton = returnbutton ? "": "display: none"
+const text = buttontext || baseurl
+---
+
+<div class="wrap">
+  <div class="head">{maintext}</div>
+  <div class="sub">{subtext}</div>
+  <a href=`/${baseurl}` style={displayBackButton}>&lt;&lt; Back to {text}</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>

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>

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;
   }

src/content.config.ts

@@ -0,0 +1,17 @@
+import { z, defineCollection } from 'astro:content'
+import { glob } from 'astro/loaders';
+
+const blogCollection = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/data/blog" }),
+  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,
+}

src/data/blog/astro-usage.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'How Astro powers this site'
 pubDate: 2023-03-09
 description: 'Blog post talking about how Astro provides the basis for this website'
@@ -75,7 +74,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'

src/data/blog/cernunnos-with-requiem.mdx

@@ -1,14 +1,13 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'How to: TA Cernunnos'
 pubDate: 2023-07-14
 description: 'A handful of observations from the cernunnos fight'
 author: 'Requiem & Firq'
 tags: ['fgo', 'lostbelt 6', 'cernunnos']
 ---
-import thumbnail_firq from "../../assets/thumbnails/WrHudtdfivA.jpg"
-import thumbnail_requiem from "../../assets/thumbnails/O1f-go7uJQM.jpg"
-import YoutubeEmbed from "../../components/youtubeEmbed.astro"
+import thumbnail_firq from "@assets/thumbnails/WrHudtdfivA.jpg"
+import thumbnail_requiem from "@assets/thumbnails/O1f-go7uJQM.jpg"
+import YoutubeEmbed from "@components/youtubeEmbed.astro"
 
 ## Foreword
 

src/data/blog/deploying-this-round-2.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'Migrating to Forgejo'
 pubDate: 2023-12-23
 description: 'My short recollection of migrating this site + CI to Forgejo'
@@ -64,7 +63,6 @@ COPY --from=build /app/dist /public
 COPY --from=build /app/serve.json /public/serve.json
 RUN rm -r /public/assets/data/
 
-ENV PORT 8081
 EXPOSE 8081
 
 CMD [ "serve", "public/", "-p", "8081" ]
@@ -74,7 +72,7 @@ As you can see, I am using a custom container for the runtime stage, which will
 
 ### Custom serve docker - My new goto for static site serving
 
-When starting out with the `Dockerfile`, I first used the standard `node:lts` image for the runtime. This meant I also had to install the `serve` package by `@warren-bank` each time I built the container. Since this takes extra time and resources each run, I decided to create a pre-configured docker container that can be used for this instead. 
+When starting out with the `Dockerfile`, I first used the standard `node:lts` image for the runtime. This meant I also had to install the `serve` package by `@warren-bank` each time I built the container. Since this takes extra time and resources each run, I decided to create a pre-configured docker container that can be used for this instead.
 
 The `Dockerfile` for that one is laughable simple:
 
@@ -89,7 +87,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
@@ -117,7 +115,8 @@ One last hurdle was, ironically, Gitlab. Specifically, it was their `lighthouse`
 
 After some testing, I decided to just make my own version of the `lighthouse` container, without the user but with `unlighthouse` preinstalled (this also helps with processing times, as puppeteer takes a good amount of time to install each run).
 
-The `Dockerfile` can be found below (really simple again):
+<details>
+<summary>`Dockerfile` (really simple again)</summary>
 
 ```dockerfile
 FROM node:20.10.0-bookworm
@@ -132,6 +131,8 @@ RUN apt-get update && apt-get -y install --no-install-recommends chromium=${CHRO
 RUN npm install @unlighthouse/cli puppeteer
 ```
 
+</details>
+
 With this container, the CI step to actually run the tests became a lot easier:
 
 ```yaml
@@ -161,4 +162,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>

src/data/blog/deploying-this.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'How to: Deploy this site'
 pubDate: 2023-03-17
 description: 'A summary of how this site is being deployed by diving into the gitlab-ci.yml'
@@ -61,7 +60,9 @@ deploy-site:
 ```
 
 First installing ssh and readying everything from the CI variables, this was a big change from the Pages configuration. But there was one thing that really bothered me: The ssh call. If you look at it, you can see that I left out the commands that are passed to `ssh`. There is a good reason: These are waaaay too long.
-If displayed as separated shell calls, they would look something like this:
+
+<details>
+<summary>commands formatted as a shell script</summary>
 
 ```shell
 screen -X -S website-firq-npx kill;
@@ -79,9 +80,11 @@ cd ~;
 screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
 ```
 
+</details>
+
 With the following directory structure on the remote host, this can easily be explained:
 
-```
+```plain
 /
 ├─ public/
 │  ├─ site content
@@ -173,7 +176,8 @@ After completing, the new stage begins.
 Since the files are now built on the GitLab server and not in the Proxmox instance, the files need to be moved over during the pipeline. This can be achieved by a great utility known as `rsync`. It can be used for sending data via ssh to any client that supports it, which makes it the ideal tool for my use-case.
 I also recommend looking <a href="https://blog.mitsunee.com/post/copy-steam-games-rsync" target="_blank" rel="noopener noreferrer">at this blog post from Mitsunee</a> detailing how to use `ssh` and `rsync` to sync game libraries to the Steam Deck with ease.
 
-In my case, the resulting `.gitlab-ci.yml` looked like this:
+<details>
+<summary>`.gitlab-ci.yml`</summary>
 
 ```yaml
 deploy-site:
@@ -202,6 +206,8 @@ deploy-site:
     - ssh $DEPLOY_USER@$DEPLOY_HOST "screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
 ```
 
+</details>
+
 First, you have the rsync and ssh setup, which now also creates a new ssh-config for this. This really reduces the amount of arguments that need to be passed to ssh and rsync, making the whole flow less error-prone. My main issue with setting this up was to find out how to structure this, as I needed to setup ssh from the pipeline
 without causing any weird issues. But by using a custom ssh-key and config, it became really easy to get this to run.
 

src/data/blog/fgo-ta.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'FGO TA - How, what, why'
 pubDate: 2023-03-16
 description: 'What FGO TA is, what brought me to it and how you can do it yourself!'

src/data/blog/hello-world.md

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/blogPost.astro
 title: 'Hello World!'
 pubDate: 2023-03-08
 description: 'First blog post, talking a bit about the site, the technologies behind it and the future ideas'

src/data/blog/instant-death.mdx

@@ -1,13 +1,12 @@
 ---
-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']
 ---
-import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
-import YoutubeEmbed from "../../components/youtubeEmbed.astro"
+import thumbnail from "@assets/thumbnails/UwbNp_dB_VU.jpg"
+import YoutubeEmbed from "@components/youtubeEmbed.astro"
 
 > **Disclaimer**<br/>
 > While writing this, Requiem and I faced a bit of a challenge concerning death rate calculations. Case in point is the passive "Item Construction"
@@ -18,10 +17,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 +52,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.
 

src/data/blog/unlighthouse-ci.md

@@ -0,0 +1,237 @@
+---
+title: 'Unlighthouse - Easy Website Testing'
+pubDate: 2025-04-12
+description: 'How I am automatically testing my site deployments using unlighthouse'
+author: 'Firq'
+tags: [ 'unlighthouse', 'coding' ]
+---
+
+Since one of the first iterations of this site, I was using Google Lighthouse to benchmark my results - and it really paid off at times. Missing ARIA roles, bad color contrast, the fact that the default Youtube embed is actually not that great - all of this was exposed by Lighthouse over time.
+
+How this whole thing evolved and how I am currently using Unlighthouse to make all of this run even smoother will be covered in this article.
+
+## Unlighthouse
+
+First of all, I want to give a big shout-out to <a href="https://harlanzw.com/" target="_blank" rel="noopener noreferrer" >Harlan Wilton (harlan-zw)</a> for making `unlighthouse` - it makes analyzing larges sites so much easier. The package can be installed from `npm` and enables you to easily run Lighthouse for each of your subpages - even from a CI environment. This is a huge improvement given that the best alternative is the `Lighthouse` docker container that is provided by GitLab.
+
+For ease of use, I also build my own version of that GitLab docker container, but with unlighthouse instead. This allows me to easily use it in other CI jobs, with pinned dependencies and resistance against random changes. However, it also requires me to regularly check for updated chromium versions, as this is usually what causes issues when updating the container.
+
+The container is <a href="https://forgejo.neshweb.net/CI-Docker-Images/unlighthouse" target="_blank" rel="noopener noreferrer" >available from here</a> and can be pulled with the following url:
+
+```shell
+docker pull forgejo.neshweb.net/ci-docker-images/unlighthouse:latest
+```
+
+<details>
+<summary>Dockerfile for the unlighthouse container</summary>
+
+```dockerfile
+FROM node:22.14-bookworm
+
+LABEL authorname="firq"
+LABEL description="unlighthouse container for ci-based lighthouse testing"
+WORKDIR /unlighthouse
+
+ENV CHROMIUM_VERSION="135.0.7049.84-1~deb12u1"
+ENV UNLIGHTHOUSE_VERSION="0.16.3"
+ENV NODE_ENV='production'
+
+# Update path so executable can be run globally
+ENV PATH="/unlighthouse/node_modules/.bin:${PATH}"
+
+RUN apt-get update && apt-get -y install --no-install-recommends chromium=${CHROMIUM_VERSION} procps && rm -rf /var/lib/apt/lists/*
+RUN npm install @unlighthouse/cli@${UNLIGHTHOUSE_VERSION} puppeteer
+```
+
+</details>
+
+## Automation with Forgejo
+
+However, running `unlighthouse` manually after each page build is too much of a hassle - so it was time to automate it. For that reason, I created a corresponding actions job that would run the checks each time a preview version of the site was being built.
+
+In the beginning, I would run the test against the actual deployed instance, but with time it became increasingly obvious that this would be inefficient, mainly because I would run this using two different tags (`x.x.x-pre.x` and `x.x.x-ulh.x`) to trigger the corresponding CI runs.
+
+Regarding this, I decided to instead run everything using a service container. This means that the `unlighthouse` job runs in the main job task, while the site is running as a service container in parallel. This allows access to the container using an alias (`website`) instead of a URL or IP address. (Note: The yaml is a bit reduced, meaning lines that only provide visual context in the UI are removed).
+
+```yaml
+jobs:
+  unlighthouse:
+    runs-on: docker
+    container: 
+      image: forgejo.neshweb.net/ci-docker-images/unlighthouse:0.16.3
+    services:
+      website:
+        image: forgejo.neshweb.net/firq/firq-dev-website:${{ inputs.containertag }}
+    steps:
+      - uses: https://code.forgejo.org/actions/checkout@v3
+      - run: |
+          while [ "$(curl -o /dev/null -s -w '%{http_code}' http://website:8081)" -ne 200 ];
+            do echo "Waiting...";
+            sleep 5;
+          done;
+      - run: unlighthouse-ci --site "http://website:8081"
+      - run: find ./unlighthouse-reports -type f | xargs sed -i "s|http://website:8081|https://preview.firq.dev|g";
+```
+
+So what is happening here? The first few lines are just there for configuring the runner and starting up the service-container. The container tag is passed from the upstream pipeline, making this setup a lot more flexible. Afterwards, two things happen: The code in the git repo gets checked out, and the job gets put on hold until the service-container is available. This is necessary, as sometimes the service container takes a few seconds to start up.
+
+Afterwards, `unlighthouse` runs against the given site inside the service-container, using the local config for any other settings. After the run concludes, the artifacts inside the `unlighthouse-reports` folder get search-and-replaced once to change the url from the service-container to the preview site. This is mainly for visual consistency, but also has the benefit of making the "Check with PageSpeedInsights" button work.
+
+To enable this to work more fluently, I decided to run the `unlighthouse` CI as a downstream pipeline, which was triggered by one of the CI jobs after the `build-and-push` step concludes. This also allows me to easily pass the new container name to the downstream pipeline for usage.
+
+```yaml
+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
+```
+
+And with that, the general CI setup concludes. I won't go into too much detail about how the deployment of the reports works, as it is similar to the main site. If you are interested, see <a href="https://forgejo.neshweb.net/Firq/firq-dev-website/src/branch/dev" target="_blank" rel="noopener noreferrer" >the repository linked here</a> for further details.
+
+## Fine-tuning the config
+
+After setting everything up, it took some good time until I managed to fine-tune the configuration that unlighthouse uses. Don't get me wrong, running with the defaults would probably also work, but from my experience the defaults are set so strict that a perfect score is unobtainable - even if for example <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer" >PageSpeedInsights</a> doesn't see any issues.
+
+My strategy for the config was to copy the settings that PageSpeedInsights uses, as this seemed like a good baseline for testing. This means that the Lighthouse settings look like this:
+
+```typescript
+lighthouseOptions: {
+  throttlingMethod: 'devtools',
+  throttling: {
+    cpuSlowdownMultiplier: 4,
+    requestLatencyMs: 150,
+    downloadThroughputKbps: 1638.4,
+    uploadThroughputKbps: 1638.4,
+  },
+  screenEmulation: { width: 412, height: 823, deviceScaleFactor: 1.75 },
+  skipAudits: [ 'is-on-https', 'redirects-http', 'uses-http2' ],
+}
+```
+
+As mentioned previously, as I am using a docker network, I can't easily use HTTPS and HTTP/2. Given that, I decided to disable the corresponding audits, as I know for a fact that this always works for the real deployment.
+
+The other configuration steps are for Puppeteer, which handles the simulation of the site in a CI environment. This is really straightforward:
+
+```typescript
+puppeteerOptions: { 
+  args: [ '--no-sandbox', '--disable-setuid-sandbox' ]
+},
+puppeteerClusterOptions: { 
+  maxConcurrency: 1
+},
+```
+
+`maxConcurrency` ensures that there is only one inspection task running at the time, as having multiple run in parallel results in some weird situations where the report fails to correctly generate.
+
+The rest of the configuration is for `unlighthouse` itself, regarding both the scanner and the ci environment, as well as the configuration of outputs and sites to check
+
+```typescript
+ci: {
+  budget: 50,
+  buildStatic: true,
+},
+scanner: {
+  sitemap: true,
+  dynamicSampling: false,
+  samples: 3,
+},
+outputPath: 'unlighthouse-reports',
+cache: true,
+urls
+```
+
+However, there is one interesting entry there: `urls`. This is a dynamic list of URLs generated from the sitemap, which happens earlier in the config (what a blessing `export default async` config-files are). This is necessary, as scraping the site from the sitemap directly is not working in my environment (the crawler finds `https://preview.firq.dev`, while I need `http://website:8081` for it to run). After some digging, I raised that usecase with Harlan, who proceeded to enable me to do exactly that in no time (thank you again for doing this - <a href="https://github.com/harlan-zw/unlighthouse/issues/248" target="_blank" rel="noopener noreferrer" >see issue 248 here</a>)
+
+This is where the magic snippet comes in, which 1. fetches the sitemap, 2. replaces the URLs and 3. fetches each of the URLs once to warm up the `serve` webserver to ensure that the server-caching correctly works (improves the performance by a lot).
+
+```typescript
+const sitemap = await (await fetch('http://website:8081/sitemap-0.xml')).text();
+
+const urls = sitemap.match(/<loc>(.*?)<\/loc>/g)!.map(
+  (loc) => loc.replace(/<\/?loc>/g, '').replace(/https:\/\/firq.dev/g, 'http://website:8081')
+); 
+
+for (const url of urls) { await fetch(url) };
+```
+
+Afterwards, `urls` can be used in the config to provide `unlighthouse` with a list of urls to check - already replaced and modified to work with the docker network.
+
+<details>
+<summary>View the whole config here</summary>
+
+(It's also really nice that unlighthouse provides type hints for the config, makes figuring out where goes what a lot easier).
+
+```typescript
+import type { UserConfig } from 'unlighthouse'
+
+export default async (): Promise<UserConfig> => {
+  /* fetch sitemap from debug container */
+  const sitemap = await (await fetch('http://website:8081/sitemap-0.xml')).text();
+
+  /* format URLs to work with debug container */
+  const urls = sitemap.match(/<loc>(.*?)<\/loc>/g)!.map(
+    (loc) => loc.replace(/<\/?loc>/g, '').replace(/https:\/\/firq.dev/g, 'http://website:8081')
+  ); 
+
+  /* ensure serve is already "warm", preventing startup lag that reduces performance */
+  for (const url of urls) { await fetch(url) };
+
+  /* actual config */
+  return {
+    lighthouseOptions: {
+      throttlingMethod: 'devtools',
+      throttling: {
+        cpuSlowdownMultiplier: 4,
+        requestLatencyMs: 150,
+        downloadThroughputKbps: 1638.4,
+        uploadThroughputKbps: 1638.4,
+      },
+      screenEmulation: {
+        width: 412,
+        height: 823,
+        deviceScaleFactor: 1.75,
+      },
+      skipAudits: [ 'is-on-https', 'redirects-http', 'uses-http2' ],
+    },
+    puppeteerOptions: {
+      args: [ '--no-sandbox', '--disable-setuid-sandbox' ],
+    },
+    puppeteerClusterOptions: {
+      maxConcurrency: 1
+    },
+    ci: {
+      budget: 50,
+      buildStatic: true,
+    },
+    scanner: {
+      sitemap: true,
+      dynamicSampling: false,
+      samples: 3,
+    },
+    outputPath: 'unlighthouse-reports',
+    cache: true,
+    urls
+  }
+}
+```
+
+</details>
+
+## What's next?
+
+After setting this whole thing up over the course of multiple months, with a variety of issues and shortcomings along the way, I hope that this is now ready for good.
+I will, however, write a Forgejo Action for me to reuse in the future, as this would enable me to easily test other sites with the same concept.
+
+If you want to check out the whole thing in action, check out <a href="https://forgejo.neshweb.net/Firq/firq-dev-website/src/branch/dev" target="_blank" rel="noopener noreferrer" >the website repository here </a>. In addition, you can find the reports that get generated <a href="https://unlighthouse.firq.dev" target="_blank" rel="noopener noreferrer" >here at unlighthouse.firq.dev</a>
+
+Anyway, I wish I gave you an interesting insight in how Unlighthouse ensures good site quality - and how YOU can also profit  from website testing in your CI.

src/data/datafiles/cedata.json

@@ -37,7 +37,7 @@
 	{
 		"name": "Vessel of the Saint",
 		"imageFile": "vessel.png",
-		"mlb": false
+		"mlb": true
 	},
 	{
 		"name": "Devilish Bodhisattva",

src/data/datafiles/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"
     }
 ]

src/data/datafiles/navdata.json

@@ -5,14 +5,14 @@
         "icon": "home"
 	},
     {
-        "link": "/servants",
-        "text": "Servants",
-        "icon": "servants"
+        "link": "/fgo",
+        "text": "FGO",
+        "icon": "fgo"
 	},
     {
-        "link": "/ta-collection",
-        "text": "TA Collection",
-        "icon": "ta_collection"
+        "link": "/projects",
+        "text": "Projects",
+        "icon": "projects"
 	},
     {
         "link": "/blog",

src/data/datafiles/projectdata.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "skyeweave",
+    "description": "A small sideproject for a Python package to easily generate expressions from spritesheets for FGO. Works using the AtlasAcademy API",
+    "url": "https://forgejo.neshweb.net/Firq/skyeweave"
+  },
+  {
+    "name": "dockge-cli",
+    "description": "A Python CLI script for controlling the docker tool dockge, both by a user and from a CI (uni project about websockets)",
+    "url": "https://forgejo.neshweb.net/Firq/dockge-cli"
+  },
+  {
+    "name": "fgo-ta.com",
+    "description": "A site for archiving and organizing TA runs completed by the FGO commuity. Still WIP, with a preview available @ preview.fgo-ta.com",
+    "url": "https://fgo-ta.com"
+  },
+  {
+    "name": "this website",
+    "description": "My first real webdev project, born from a hand-written HTML page on GitLab Pages - feel free to read the related blog posts",
+    "url": "/"
+  },
+  {
+    "name": "my personal blog",
+    "description": "My own small blog - I'm not posting that much, but trying to share my experience in developing software and playing FGO.",
+    "url": "/blog"
+  }
+]

src/data/datafiles/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

src/data/datafiles/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://bsky.app/profile/firq.dev",
+    "icon": "bluesky",
+    "text": "Bluesky"
+  },
+  {
+    "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"
+  }
+]

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -1,14 +1,18 @@
 ---
-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 home from 'iconoir/icons/home.svg'
-import servants from 'iconoir/icons/task-list.svg'
-import ta_collection from 'iconoir/icons/database.svg'
+import Navbar from '@components/navbar/navbar.astro'
+import NavbarEntry from '@components/navbar/navbarEntry.astro'
+import navdata from '@datafiles/navdata.json'
+import embed from '@assets/embed.png'
+import favicon from '@assets/favicon.ico'
+
+import home from 'iconoir/icons/home-simple.svg'
+import fgo from 'iconoir/icons/gamepad.svg'
 import blog from 'iconoir/icons/bookmark-book.svg'
 import about from 'iconoir/icons/mail.svg'
+import projects from 'iconoir/icons/network-right.svg'
 
 export interface Props {
   title: string
@@ -22,8 +26,8 @@ interface IconsLookup {
 
 const icons: IconsLookup = {
   home: home,
-  servants: servants,
-  ta_collection: ta_collection,
+  fgo: fgo,
+  projects: projects,
   blog: blog,
   about: about,
 }
@@ -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>

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>

src/layouts/baseSection.astro

@@ -1,13 +1,15 @@
 ---
 export interface Props {
-  title: string
+  title: string,
+  titleHidden?: boolean
 }
 
-const { title } = Astro.props
+const { title, titleHidden } = Astro.props
+const hidden = titleHidden || false ? "visually-hidden" : ""
 ---
 
 <div class="base">
-  <h1>{title}</h1>
+  <h1 class={hidden}>{title}</h1>
   <div>
     <slot />
   </div>
@@ -27,36 +29,25 @@ const { title } = Astro.props
     align-self: center;
     display: flex;
     flex-flow: row wrap;
-    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;

src/layouts/blogPost.astro

@@ -1,8 +1,9 @@
 ---
+import SmallTitle from '@components/titles/smallTitle.astro'
 import Layout from './Layout.astro'
 const { frontmatter } = Astro.props
 
-const title = `${frontmatter.title} - Firq FGO Site`
+const title = `${frontmatter.title} - firq.dev`
 const description = frontmatter.description
 const options_date: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -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>

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;
+    padding: 1em 0px;
+    color: var(--c-primary-text);
     font-size: 1em;
     position: relative;
   }
@@ -80,21 +104,44 @@ 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;
+    }
+    .wrapper {
+      padding: 1em;
     }
   }
-  @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>

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 {

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'
@@ -44,9 +44,9 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
       rel="noopener noreferrer">Mitsunee</a
     > for the support when building this site. I could not have done it without
     you 🧡 Check out <a
-      href="https://fgo.mitsunee.com"
+      href="https://mitsunee.com"
       target="_blank"
-      rel="noopener noreferrer">FGO Timers here</a
+      rel="noopener noreferrer">her own website here</a
     >
     <div class="sticky-image-wrapper">
       <Image src={foxcat} alt="Best Foxcat" />
@@ -64,7 +64,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
       >his site here</a
     >
     <div class="sticky-image-wrapper">
-      <Image src={okita} alt="" style="height:60px" />
+      <Image src={okita} alt="" style="height:67px" />
     </div>
   </div>
   <br />
@@ -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>

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>

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;

src/pages/404.astro

@@ -1,18 +1,18 @@
 ---
 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 :/"
 ---
 
 <Layout
-  title="404 - Firq FGO Site"
+  title="404 - firq.dev"
   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>

src/pages/_index.astro.old

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

src/pages/about.astro

@@ -1,37 +1,33 @@
 ---
-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 '@datafiles/technologydata.json'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import Placeholder from '@components/placeholder.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
-  title="About - Firq FGO Site"
+  title="About - firq.dev"
   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>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
 <style></style>

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>

src/pages/blog/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import BlogPost from '@layouts/blogPost.astro'
+import { getCollection, render } from 'astro:content'
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog')
+
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }))
+}
+
+const { entry } = Astro.props
+const { Content } = await render(entry)
+---
+
+<BlogPost frontmatter={entry.data}>
+  <Content />
+</BlogPost>

src/pages/blog/index.astro

@@ -0,0 +1,41 @@
+---
+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 subtext = 
+  'My personal blog. Includes rambling about FGO, coding and other stuff!'
+const blogEntries = await getCollection('blog')
+blogEntries.sort(
+  (a, b) =>
+    (b.data.pubDate.valueOf() - a.data.pubDate.valueOf() )
+)
+---
+
+<Layout
+  title="Blog - firq.dev"
+  currentpage="blog"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="Blog Articles" subtext={subtext} fadeout={true} />
+  <BlogSection title="Blog Articles" displayLine={true} titlehidden={true}>
+    {
+      blogEntries.map((post) => (
+        <BlogCard
+          url="blog"
+          slug={post.id}
+          title={post.data.title}
+          pubdate={post.data.pubDate}
+          description={post.data.description}
+          author={post.data.author}
+        />
+      ))
+    }
+  </BlogSection>
+</Layout>
+
+<style></style>

src/pages/fgo.astro

@@ -0,0 +1,50 @@
+---
+import FavouriteCard from '@components/cards/favouriteCard.astro'
+import ProjectCard from '@components/cards/projectCard.astro'
+import Placeholder from '@components/placeholder.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import favouritesdata from '@datafiles/favouritesdata.json'
+import BaseSection from '@layouts/baseSection.astro'
+import Layout from '@layouts/Layout.astro'
+
+
+const description =
+  "Information about my Fate/Grand Order account. This includes TA runs, my personal TA offering and other interesting stuff."
+const subtext = 
+  "Fate/Grand Order is a game I really love - here are some of my details you might find interesting or useful"
+
+const projects = [
+  {
+    name: "TA Offering",
+    description: "A listing of servants I can offer for your own TA attempts. Feel free to contact me if you need any of them.",
+    url: "/servants"
+  },
+  {
+    name: "TA Collection",
+    description: "A collection of my own TA runs, as well as some community ones. See fgo-ta.com or Youtube for more.",
+    url: "/ta-collection"
+  }
+]
+
+
+const data = structuredClone(favouritesdata);
+data.map((item) => { item.origin = "First 120 on NA" })
+---
+
+<Layout
+  title="FGO - firq.dev"
+  currentpage="fgo"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="FGO Infos" subtext={subtext} fadeout={true} />
+  <BaseSection title="Highlights">
+    {data.map((item) => <FavouriteCard {...item} />)}
+  </BaseSection>
+  <Placeholder height="1.5rem"/>
+  <BaseSection title="Infos" titleHidden={true}>
+    {projects.map((item) => <ProjectCard {...item} />)}
+  </BaseSection>
+  <Placeholder height="1.5rem"/>
+</Layout>
+
+<style></style>

src/pages/index.astro

@@ -1,23 +1,29 @@
 ---
-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 Placeholder from '@components/placeholder.astro'
+import Hi from '@components/titles/title.astro'
+import favouritesdata from '@datafiles/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'
 ---
 
 <Layout
-  title="Home - Firq FGO Site"
+  title="Home - firq.dev"
   currentpage="home"
   descriptionOverride={description}
 >
-  <Hero />
+  <Hi />
+  <BaseSection title="About me">
+    <AboutText/>
+  </BaseSection>
   <BaseSection title="Favourites">
     {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
+  <Placeholder height="1.5rem"/>
 </Layout>
 
 <style></style>

src/pages/projects.astro

@@ -0,0 +1,28 @@
+---
+import Layout from '@layouts/Layout.astro'
+import ProjectCard from '@components/cards/projectCard.astro'
+import projects from '@datafiles/projectdata.json'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import BaseSection from '@layouts/baseSection.astro'
+import Placeholder from '@components/placeholder.astro'
+
+const description =
+  "My personal projects I am currently working on. Some of them are born from necessity, while others are for uni or similar."
+const subtext = 
+  "Usually born out of necessity, but some were actually developed as uni projects for my masters degree."
+
+---
+
+<Layout
+  title="Projects - firq.dev"
+  currentpage="projects"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="Personal Projects" subtext={subtext} fadeout={true} />
+  <BaseSection title="Projects" titleHidden={true}>
+    {projects.map((item) => <ProjectCard {...item} />)}
+  </BaseSection>
+  <Placeholder height="1.5rem"/>
+</Layout>
+
+<style></style>

src/pages/servants.astro

@@ -1,36 +1,31 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import BaseSection from '../layouts/baseSection.astro'
-
-import ServantCard from '../components/servantCard.astro'
-import servantdata from '../../static/data/_servantdata.json'
-
-import CeCard from '../components/ceCard.astro'
-import cedata from '../../static/data/_cedata.json'
+import CeCard from '@components/cards/ceCard.astro'
+import ServantCard from '@components/cards/servantCard.astro'
+import Placeholder from '@components/placeholder.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import cedata from '@datafiles/cedata.json'
+import servantdata from '@datafiles/servantdata.json'
+import Layout from '@layouts/Layout.astro'
+import ServantSection from '@layouts/servantSection.astro'
 
 const description =
   'A list of all the servants and ces that Firq can offer up on support for TA.'
 ---
 
 <Layout
-  title="Servants - Firq FGO Site"
-  currentpage="servants"
+  title="Servants - firq.dev"
+  currentpage="fgo"
   descriptionOverride={description}
 >
-  <BaseSection title="Servants">
-    {servantdata.map((item) => <ServantCard {...item} />)}
-  </BaseSection>
-  <div class="placeholder"></div>
-  <BaseSection title="CEs">
+  <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true} baseurl='fgo' returnbutton={true} buttontext='FGO'/>
+  <ServantSection title="Servants">
+    {servantdata.map((item, index) => <ServantCard {...item} index={index} />)}
+  </ServantSection>
+  <Placeholder height="2.5rem"/>
+  <ServantSection title="CEs">
     {cedata.map((item) => <CeCard {...item} />)}
-  </BaseSection>
-  <div class="placeholder"></div>
+  </ServantSection>
+  <Placeholder height="2.5rem"/>
 </Layout>
 
-<style>
-  .placeholder {
-    visibility: hidden;
-    width: 100%;
-    height: 2.5rem;
-  }
-</style>
+<style></style>

src/pages/ta-collection.astro

@@ -5,13 +5,15 @@
 // > 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 '@datafiles/tadata.json'
+import featured_data from '@datafiles/featureddata.json'
+import FgotaHero from '@components/fgotaHero.astro'
+import Placeholder from '@components/placeholder.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
 
 const important_data = tadata.filter(function (el) {
   return [
@@ -33,11 +35,12 @@ const description = 'A collection of TAs previously completed be Firq.'
 ---
 
 <Layout
-  title="TA Collection - Firq FGO Site"
-  currentpage="ta-collection"
+  title="TA Collection - firq.dev"
+  currentpage="fgo"
   descriptionOverride={description}
 >
-  <FgotaHero />
+  <SmallTitle maintext='TA Collection' subtext='' baseurl='fgo' returnbutton={true} buttontext='FGO'/>
+  <FgotaHero fadeout={true}/>
   <TaSection title="Notable TAs" abovetext="My most notable TAs">
     {important_data.map((item) => <TaCard {...item} />)}
   </TaSection>
@@ -50,13 +53,7 @@ const description = 'A collection of TAs previously completed be Firq.'
   >
     {featured_data.map((item) => <TaCard {...item} />)}
   </TaSection>
-  <div class="placeholder"></div>
+  <Placeholder height="5rem"/>
 </Layout>
 
-<style>
-  .placeholder {
-    visibility: hidden;
-    width: 100%;
-    height: 5rem;
-  }
-</style>
+<style></style>

start.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd /
+echo "Website version: ${version}"
+echo "powered by @Firq"
+serve --listen 8081 --no-clipboard /public

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"
-	}
-]