Featuring some people, small fixes

src/components/contactCard.astro

@@ -9,7 +9,7 @@ const { image, link, site } = Astro.props
 const icon: string = `background-image: url('/social/${image}.webp')`
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer">
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}>
   <article class="contact do-hover">
     <div style={icon}>
       <h2>{site}</h2>

src/components/taCard.astro

@@ -4,9 +4,10 @@ export interface Props {
   title: string
   link: string
   image: string
+  user?: string
 }
 
-const { date, image, link, title } = Astro.props
+const { user, date, image, link, title } = Astro.props
 
 const options_date: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -16,6 +17,11 @@ const options_date: Intl.DateTimeFormatOptions = {
 
 const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
 const icon: string = `background: url('/ta_icons/${image}.webp')`
+
+let hasuser = ''
+if (user !== undefined) {
+  hasuser = 'hasuser'
+}
 ---
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
@@ -24,12 +30,21 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
       <h2>{title}</h2>
     </div>
     <p>
+      <span class={hasuser}>
+        By {user}<br /> •
+      </span>
       {formatted_date}
     </p>
   </article>
 </a>
 
 <style>
+  span {
+    display: none;
+  }
+  .hasuser {
+    display: flex;
+  }
   a {
     text-decoration: none;
   }
@@ -73,6 +88,7 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
     display: flex;
     text-align: center;
     justify-content: center;
+    align-items: center;
     line-height: 100%;
     text-decoration: none;
     color: white;
@@ -80,5 +96,7 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
     font-weight: bold;
     padding-top: 0.5rem;
     margin: 0.5rem 0px;
+    flex-wrap: wrap;
+    flex-direction: column;
   }
 </style>

src/layouts/aboutSection.astro

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

src/layouts/taSection.astro

@@ -10,7 +10,7 @@ if (abovetext === undefined) {
   h2text =
     'The full list of my completed TAs can be found on my Youtube channel.'
 } else {
-  h2text = ''
+  h2text = abovetext
 }
 ---
 
@@ -34,7 +34,7 @@ if (abovetext === undefined) {
   }
   h1 {
     color: white;
-    margin: 0.5rem 0px 0.5rem 0.5em;
+    margin: 0.5rem 0.5rem 0.5rem 0.75rem;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);

src/pages/about.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import BasicSection from '../layouts/basicSection.astro'
+import AboutSection from '../layouts/aboutSection.astro'
 
 import ContactSection from '../layouts/contactSection.astro'
 import ContactCard from '../components/contactCard.astro'
@@ -36,19 +36,19 @@ const description =
   currentpage="about"
   descriptionOverride={description}
 >
-  <BasicSection title="About">
+  <AboutSection title="About">
     This is a small sideproject that I'm creating. First time doing webdev in
     general, and first project using Typescript.
-  </BasicSection>
+  </AboutSection>
-  <BasicSection title="Technologies used">
+  <AboutSection title="Technologies used">
     {techologydata.map((item) => <TechnologyCard {...item} />)}
-  </BasicSection>
+  </AboutSection>
   <ContactSection title="Contact me">
     {contactdata.map((item) => <ContactCard {...item} />)}
   </ContactSection>
-  <BasicSection title="Disclaimers">
+  <AboutSection title="Disclaimers">
     <CustomFooter />
-  </BasicSection>
+  </AboutSection>
 </Layout>
 
 <style></style>

src/pages/ta-collection.astro

@@ -10,6 +10,7 @@ import Layout from '../layouts/Layout.astro'
 import TaSection from '../layouts/taSection.astro'
 import TaCard from '../components/taCard.astro'
 import tadata from '../../static/_tadata.json'
+import featured_data from '../../static/_featureddata.json'
 
 const important_data = tadata.filter(function (el) {
   return [
@@ -21,6 +22,7 @@ const important_data = tadata.filter(function (el) {
 
 tadata.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
 important_data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
+featured_data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
 
 const description = 'A collection of TAs previously completed be Firq.'
 ---
@@ -36,6 +38,12 @@ const description = 'A collection of TAs previously completed be Firq.'
   <TaSection title="Completed TAs">
     {tadata.map((item) => <TaCard {...item} />)}
   </TaSection>
+  <TaSection
+    title="Featured TAs by other Racers"
+    abovetext="TAs done by my fellow Racers, check them out as well!"
+  >
+    {featured_data.map((item) => <TaCard {...item} />)}
+  </TaSection>
 </Layout>
 
 <style></style>

static/_featureddata.json

@@ -0,0 +1,135 @@
+[
+	{
+		"title": "DB 7T",
+		"link": "https://www.youtube.com/watch?v=nYV4jwgpuR0",
+		"image": "db",
+		"date": "2022-07-14",
+		"user": "KOG"
+	},
+	{
+		"title": "DB 7T",
+		"link": "https://www.youtube.com/watch?v=jKoSw1XM6-c",
+		"image": "db",
+		"date": "2022-07-07",
+		"user": "Requiem"
+	},
+	{
+		"title": "Valentines 2023 CQ 5T SC",
+		"link": "https://www.youtube.com/watch?v=AkDFyJ98GDQ",
+		"image": "orion",
+		"date": "2023-02-23",
+		"user": "Requiem"
+	},
+	{
+		"title": "Ibuki 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=zHGvHC0CUu0",
+		"image": "ibuki",
+		"date": "2022-11-22",
+		"user": "Requiem"
+	},
+	{
+		"title": "Kingprotea 1T",
+		"link": "https://www.youtube.com/watch?v=iAhwqIGWsG4",
+		"image": "kingprotea",
+		"date": "2022-09-13",
+		"user": "Requiem"
+	},
+	{
+		"title": "Golden Caenis 3T (LB5.2)",
+		"link": "https://www.youtube.com/watch?v=_yZYgdr6XA4",
+		"image": "caenis",
+		"date": "2022-04-22",
+		"user": "Requiem"
+	},
+	{
+		"title": "GudaGuda 4 CQ 3T [No DMG CE]",
+		"link": "https://www.youtube.com/watch?v=oCT7ngip82U",
+		"image": "shibata",
+		"date": "2022-04-26",
+		"user": "Requiem"
+	},
+	{
+		"title": "Valentines 2023 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=6WyPFYT8h1c",
+		"image": "orion",
+		"date": "2023-02-25",
+		"user": "KOG"
+	},
+	{
+		"title": "Ooku Rerun CQ 4T",
+		"link": "https://www.youtube.com/watch?v=EU2THj6GnhQ",
+		"image": "kiyohime",
+		"date": "2022-08-12",
+		"user": "KOG"
+	},
+	{
+		"title": "Amazoness 2021 CQ 3T",
+		"link": "https://www.youtube.com/watch?v=l2cmlS9LKSU",
+		"image": "penth",
+		"date": "2022-01-22",
+		"user": "KOG"
+	},
+	{
+		"title": "Christmas 2021 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=PrJvjo3fvVc",
+		"image": "santagale",
+		"date": "2021-12-20",
+		"user": "KOG"
+	},
+	{
+		"title": "GudaGuda 4 CQ 3T",
+		"link": "https://www.youtube.com/watch?v=e9H37cnW160",
+		"image": "shibata",
+		"date": "2021-06-29",
+		"user": "KOG"
+	},
+	{
+		"title": "GudaGuda 5 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=HmrWnxp8Qz0",
+		"image": "nobunaga",
+		"date": "2022-09-24",
+		"user": "Ray"
+	},
+	{
+		"title": "GudaGuda 5 CQ 4T",
+		"link": "https://www.youtube.com/watch?v=pcvhCQq5gFE",
+		"image": "nobunaga",
+		"date": "2022-09-23",
+		"user": "Ray"
+	},
+	{
+		"title": "Ibuki 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=pcvhCQq5gFE",
+		"image": "ibuki",
+		"date": "2022-11-26",
+		"user": "Ray"
+	},
+	{
+		"title": "Douman 3T (Lostbelt 5.5)",
+		"link": "https://www.youtube.com/watch?v=CIoNRC4tDrY",
+		"image": "douman",
+		"date": "2022-11-27",
+		"user": "Ray"
+	},
+	{
+		"title": "Boxing 3T (Xmas 5)",
+		"link": "https://www.youtube.com/watch?v=0ErT8Qbzuw8",
+		"image": "dioscuri",
+		"date": "2022-12-18",
+		"user": "Ray"
+	},
+	{
+		"title": "Slapstick Museum CQ 5T",
+		"link": "https://www.youtube.com/watch?v=QtthHB6rk7k",
+		"image": "moriarty",
+		"date": "2023-03-10",
+		"user": "Ray"
+	},
+	{
+		"title": "Little Big Tengu CQ 4T",
+		"link": "https://www.youtube.com/watch?v=50Adjx4owhg",
+		"image": "taira",
+		"date": "2023-01-29",
+		"user": "Ray"
+	}
+]

static/_othertadata.json

@@ -1,12 +0,0 @@
-{
-	"kog": {
-		"site": "Youtube: @Kog",
-		"link": "https://www.youtube.com/@KOGtxt",
-		"image": "youtube"
-	},
-	"requiem": {
-		"site": "Youtube: @Requiem",
-		"link": "https://www.youtube.com/@requiemTA",
-		"image": "youtube"
-	}
-}