.prettierignore

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

package.json

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

src/assets/custom-svg/discord.svg

@@ -1 +0,0 @@
-<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/reddit.svg

@@ -1,61 +0,0 @@
-<?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/components/links/linkContainer.astro

@@ -1,29 +1,58 @@
 ---
-import LinkCard from './linkCard.astro'
+import LinkCard from "./linkCard.astro"
-import socialData from '@content/data/socials.json'
+
-import { socials } from './socials'
+import mastodon from 'iconoir/icons/mastodon.svg'
+import youtube from 'iconoir/icons/youtube.svg'
+import forgejo from '@assets/custom-svg/forgejo.svg'
+import rayshift from '@assets/custom-svg/rayshift.svg'
+import twitch from '@assets/custom-svg/twitch.svg'
+
+const links = [
+  {
+    link: "https://www.youtube.com/@Firq_",
+    icon: youtube,
+    text: "Youtube",
+  },
+  {
+    link: "https://mastodon.neshweb.net/@Firq",
+    icon: mastodon,
+    text: "Mastodon",
+  },
+  {
+    link: "https://twitch.tv/Firq",
+    icon: twitch,
+    text: "Twitch",
+  },
+  {
+    link: "https://forgejo.neshweb.net/Firq",
+    icon: forgejo,
+    text: "Forgejo",
+  },
+  {
+    link: "https://rayshift.io/na/firq",
+    icon: rayshift,
+    text: "Rayshift",
+  }
+]
 ---
 
 <div>
   {
-    socialData.map((item) => (
+    links.map(
-      <LinkCard
+      (item) => <LinkCard {...item} />
-        {...{ icon: socials[item.icon], text: item.icon, link: item.link }}
+    )
-      />
-    ))
   }
 </div>
 
 <style>
   div {
-    margin-top: 0.75rem;
+    margin-top: .75rem;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    width: 95%;
+    width: 100%;
     height: auto;
     column-gap: 0.5rem;
-    row-gap: 0.5rem;
   }
-</style>
+</style>

src/components/links/socials.ts

@@ -1,22 +0,0 @@
-import discord from '@assets/custom-svg/discord.svg'
-import forgejo from '@assets/custom-svg/forgejo.svg'
-import rayshift from '@assets/custom-svg/rayshift.svg'
-import reddit from '@assets/custom-svg/reddit.svg'
-import twitch from '@assets/custom-svg/twitch.svg'
-
-import type { ImageMetadata } from 'astro'
-
-import mastodon from 'iconoir/icons/mastodon.svg'
-import twitter from 'iconoir/icons/twitter.svg'
-import youtube from 'iconoir/icons/youtube.svg'
-
-export const socials: Record<string, ImageMetadata> = {
-  forgejo,
-  rayshift,
-  reddit,
-  twitch,
-  discord,
-  mastodon,
-  twitter,
-  youtube,
-}

src/content/data/contactdata.json

@@ -0,0 +1,32 @@
+[
+	{
+		"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"
+	}
+]

src/content/data/socials.json

@@ -1,42 +0,0 @@
-[
-  {
-    "link": "https://www.youtube.com/@Firq_",
-    "icon": "youtube",
-    "text": "Youtube"
-  },
-  {
-    "link": "https://mastodon.neshweb.net/@Firq",
-    "icon": "mastodon",
-    "text": "Mastodon"
-  },
-  {
-    "link": "https://twitter.com/firq_ow",
-    "icon": "twitter",
-    "text": "Twitter"
-  },
-  {
-    "link": "https://twitch.tv/Firq",
-    "icon": "twitch",
-    "text": "Twitch"
-  },
-  {
-    "link": "https://discord.com/users/186014064835690496",
-    "icon": "discord",
-    "text": "Discord"
-  },
-  {
-    "link": "https://www.reddit.com/user/Firq_ow/",
-    "icon": "reddit",
-    "text": "Reddit"
-  },
-  {
-    "link": "https://forgejo.neshweb.net/Firq",
-    "icon": "forgejo",
-    "text": "Forgejo"
-  },
-  {
-    "link": "https://rayshift.io/na/firq",
-    "icon": "rayshift",
-    "text": "Rayshift"
-  }
-]

src/layouts/Layout.astro

@@ -1,12 +1,11 @@
 ---
-import '@fontsource-variable/work-sans'
+import "@fontsource-variable/work-sans";
-import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2'
+import workSans from "@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2"
 
 import Navbar from '@components/navbar/navbar.astro'
 import NavbarEntry from '@components/navbar/navbarEntry.astro'
 import navdata from '@content/data/navdata.json'
 import embed from '@assets/embed.png'
-import favicon from '@assets/favicon.ico'
 
 import home from 'iconoir/icons/home.svg'
 import servants from 'iconoir/icons/task-list.svg'
@@ -73,16 +72,10 @@ const mapped_navdata = navdata.map((item) => ({
       content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE"
     />
     <!-- Disable DarkReader, as site is already in dark mode -->
-    <meta name="darkreader-lock" content="this site only has darkmode" />
+    <meta name="darkreader-lock" content="this site only has darkmode"> 
     <!-- Links -->
-    <link
+    <link rel="preload" as="font" crossorigin="anonymous" href={workSans} type="font/woff2"/>
-      rel="preload"
+    <link rel="icon" type="image/ico" href="/favicon.ico" />
-      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>
@@ -112,7 +105,6 @@ const mapped_navdata = navdata.map((item) => ({
     <slot />
   </body>
 </html>
-
 <style is:global>
   :root {
     /* Animations */

src/pages/about.astro

@@ -2,6 +2,8 @@
 import Layout from '@layouts/Layout.astro'
 
 import ContactSection from '@layouts/contactSection.astro'
+import ContactCard from '@components/cards/contactCard.astro'
+import contactdata from '@content/data/contactdata.json'
 
 import CustomFooter from '@layouts/customFooter.astro'
 import TechnologyCard from '@components/cards/technologyCard.astro'
@@ -19,10 +21,13 @@ const subtext =
   currentpage="about"
   descriptionOverride={description}
 >
-  <SmallTitle maintext="About this site" subtext={subtext} fadeout={true} />
+  <SmallTitle maintext="About" subtext={subtext} fadeout={true} />
-  <ContactSection title="Powered by">
+  <ContactSection title="Technologies used">
     {technologydata.map((item) => <TechnologyCard {...item} />)}
   </ContactSection>
+  <ContactSection title="Contact me">
+    {contactdata.map((item) => <ContactCard {...item} />)}
+  </ContactSection>
   <ContactSection title="Disclaimers">
     <CustomFooter />
   </ContactSection>

src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
-import AboutText from '@components/aboutText.astro'
-import FavouriteCard from '@components/cards/favouriteCard.astro'
-import Hi from '@components/titles/title.astro'
-import favouritesdata from '@content/data/favouritesdata.json'
 import Layout from '@layouts/Layout.astro'
 import BaseSection from '@layouts/baseSection.astro'
+import FavouriteCard from '@components/cards/favouriteCard.astro'
+import favouritesdata from '@content/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'