Moved images to assets, rewrote to use Image component, fixed styling issues

src/pages/404.astro

@@ -1,6 +1,8 @@
 ---
+import { Image } from 'astro:assets'
 import Layout from '../layouts/Layout.astro'
 import BaseSection from '../layouts/baseSection.astro'
+import sadshishou from '../assets/shishousad.webp'
 
 const description = "Error. This shouldn't happen :/"
 ---
@@ -12,7 +14,7 @@ const description = "Error. This shouldn't happen :/"
 >
   <BaseSection title="FirqhundredandFirq - Not Found">
     <div>
-      <img src="/assets/shishousad.webp" alt="Sad Shishou" />
+      <Image src={sadshishou} alt="Sad Shishou" />
       <h2>Well ... you were not supposed to end up here.</h2>
       <a href="/" aria-label="Home" rel="noopener noreferrer">
         <i class="iconoir-fast-arrow-left"></i>Go back home

src/pages/about.astro

@@ -4,11 +4,11 @@ import AboutSection from '../layouts/aboutSection.astro'
 
 import ContactSection from '../layouts/contactSection.astro'
 import ContactCard from '../components/contactCard.astro'
-import contactdata from '../../static/assets/data/_contactdata.json'
+import contactdata from '../../static/data/_contactdata.json'
 
 import CustomFooter from '../layouts/customFooter.astro'
 import TechnologyCard from '../components/technologyCard.astro'
-import technologydata from '../../static/assets/data/_technologydata.json'
+import technologydata from '../../static/data/_technologydata.json'
 
 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."

src/pages/index.astro

@@ -3,7 +3,7 @@ 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/assets/data/_favouritesdata.json'
+import favouritesdata from '../../static/data/_favouritesdata.json'
 
 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'

src/pages/servants.astro

@@ -3,10 +3,10 @@ import Layout from '../layouts/Layout.astro'
 import BaseSection from '../layouts/baseSection.astro'
 
 import ServantCard from '../components/servantCard.astro'
-import servantdata from '../../static/assets/data/_servantdata.json'
+import servantdata from '../../static/data/_servantdata.json'
 
 import CeCard from '../components/ceCard.astro'
-import cedata from '../../static/assets/data/_cedata.json'
+import cedata from '../../static/data/_cedata.json'
 
 const description =
   'A list of all the servants and ces that Firq can offer up on support for TA.'

src/pages/ta-collection.astro

@@ -9,8 +9,8 @@ import Layout from '../layouts/Layout.astro'
 
 import TaSection from '../layouts/taSection.astro'
 import TaCard from '../components/taCard.astro'
-import tadata from '../../static/assets/data/_tadata.json'
-import featured_data from '../../static/assets/data/_featureddata.json'
+import tadata from '../../static/data/_tadata.json'
+import featured_data from '../../static/data/_featureddata.json'
 
 const important_data = tadata.filter(function (el) {
   return [
@@ -36,7 +36,7 @@ const description = 'A collection of TAs previously completed be Firq.'
   currentpage="ta-collection"
   descriptionOverride={description}
 >
-  <TaSection title="Notable TAs" abovetext="">
+  <TaSection title="Notable TAs" abovetext="My most notable TAs">
     {important_data.map((item) => <TaCard {...item} />)}
   </TaSection>
   <TaSection title="Completed TAs">