Added typescript, added new logo, improved margins

src/components/navbar.astro

@@ -1,5 +1,5 @@
 ---
-import headerimg from "/link_192.png"
+import headerimg from "/logo.svg"
 ---
 
 <header>
@@ -9,7 +9,7 @@ import headerimg from "/link_192.png"
     <ul class="desktop">
         <slot />
     </ul>
-    <button class="mobile">
+    <button class="mobile" aria-label="Navigation Button">
         <ul>
             <slot />
         </ul>

src/components/technologyCard.astro

@@ -26,15 +26,15 @@ article {
     transition: transform var(--speed) var(--ease);
     height: auto;
     width: auto;
-    line-height: 128px;
+    line-height: 100px;
 }
 article:hover {
     transform: scale(var(--hover-scale));
 }
 article > div {
     background-size: contain;
-    width: 128px;
-    height: 128px;
+    width: 100px;
+    height: 100px;
 }
 
 article:hover h2 {
@@ -43,8 +43,8 @@ article:hover h2 {
     font-size: 18px;
     display: inline-block;
     vertical-align: center;
-    line-height: normal;
-    width: 90%;
+    line-height: 150%;
+    width: 95%;
     border-radius: 5px;
     opacity: 90%;
 }

src/layouts/baseSection.astro

@@ -32,7 +32,7 @@ const { title } = Astro.props;
 	}
     div > h1 {
         color: white;
-        margin: 0.5rem 0px;
+        margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
         background-color: #1e1e1e;

src/layouts/basicSection.astro

@@ -16,7 +16,7 @@ const { title } = Astro.props;
 <style>
     h1 {
         color: white;
-        margin: 0.5rem 0px;
+        margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
         background-color: #1e1e1e;

src/layouts/contactSection.astro

@@ -15,7 +15,7 @@ const { title } = Astro.props;
 <style>
 h1 {
     color: white;
-    margin: 0.5rem 0px;
+    margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
     background-color: #1e1e1e;

src/layouts/customFooter.astro

@@ -3,7 +3,7 @@
 ---
 
 <footer>
-    <div>Disclaimer:
+    <div>
         “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
         use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
             official website</a> for

src/layouts/taSection.astro

@@ -25,7 +25,7 @@ const { title } = Astro.props;
     }
     h1 {
         color: white;
-        margin: 0.5rem 0px;
+        margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
         background-color: #1e1e1e;

src/pages/about.astro

@@ -18,12 +18,17 @@ const techologydata = [{
 		"title": "GitLab",
 		"link": "https://gitlab.io",
 		"image": "gitlab"
+	},
+	{
+		"title": "Typescript",
+		"link": "https://www.typescriptlang.org/",
+		"image": "typescript"
 	},]
 ---
 
 <Layout title="About - Firq FGO Site" currentpage="about">
     <BasicSection title="About">
-        This is a small sideproject that I'm creating.
+        This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript.
     </BasicSection>
     <BasicSection title="Technologies used">
         {techologydata.map((item) => (<TechnologyCard {...item}/>))}
@@ -31,7 +36,9 @@ const techologydata = [{
     <ContactSection title="Contact me">
 		{contactdata.map((item) => (<ContactCard {...item}/>))}
 	</ContactSection>
-    <CustomFooter />
+	<BasicSection title="Disclaimers">
+		<CustomFooter />
+	</BasicSection>
 </Layout>
 
 <style>