First about version and rescaling

.forgejo/workflows/build_preview.yml

@@ -1,5 +1,5 @@
 name: Build and deploy preview site
-run-name: Building and deploying pewview for version ${{ github.ref_name }}
+run-name: Building and deploying preview for version ${{ github.ref_name }}
 on:
   push:
     tags:

.forgejo/workflows/unlighthouse.yml

@@ -1,4 +1,5 @@
-name: Run unlighthouse-tests [Downstream pipeline for ${{ inputs.containertag }}]
+name: Run unlighthouse-tests [Downstream pipeline]
+run-name: Run unlighthouse-tests [Downstream pipeline] for version ${{ inputs.containertag }}
 on:
   workflow_dispatch:
     inputs:

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.39",
+	"version": "0.2.0-pre.40",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/aboutText.astro

@@ -0,0 +1,53 @@
+---
+
+---
+
+<div>
+  <p>
+    I'm a 23 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/favouriteCard.astro

@@ -25,7 +25,7 @@ const loadedImage = plsLoadImage(images, imagePath)
   aria-label=`${name} - new window`
 >
   <div class="heading">{name}</div>
-  <Image src={loadedImage} alt={name} loading={'eager'} width={192} height={192} quality={100}/>
+  <Image src={loadedImage} alt={name} loading={'eager'} width={128} height={128} quality={100}/>
   <h2 class="subtext">
     {origin}
   </h2>
@@ -80,7 +80,7 @@ const loadedImage = plsLoadImage(images, imagePath)
       width: auto;
       height: auto;
       img {
-        width: 160px;
+        width: 128px;
       }
     }
   }

src/components/titles/smallTitle.astro

@@ -66,7 +66,6 @@ const displayBackButton = returnbutton ? "": "display: none"
   }
 
   .sub {
-    margin-top: 0.5em;
     font-size: 0.9rem;
     font-weight: 500;
     font-family: 'Work Sans Variable', sans-serif;

src/layouts/baseSection.astro

@@ -47,13 +47,6 @@ const { title } = Astro.props
     }
   }
 
-  @media (min-width: 512px) {
-    div {
-      row-gap: 1.5em;
-      column-gap: 1.5em;
-    }
-  }
-
   @media (min-width: 1000px) {
     .base {
       margin-left: 3rem;

src/pages/index.astro

@@ -4,6 +4,7 @@ import BaseSection from '../layouts/baseSection.astro'
 import FavouriteCard from '../components/cards/favouriteCard.astro'
 import favouritesdata from '../../static/data/_favouritesdata.json'
 import Hi from '../components/titles/title.astro'
+import AboutText from '../components/aboutText.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'
@@ -15,6 +16,9 @@ const description =
   descriptionOverride={description}
 >
   <Hi />
+  <BaseSection title="About me">
+    <AboutText/>
+  </BaseSection>
   <BaseSection title="Favourite Things">
     {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>