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>
-  <BasicSection title="Technologies used">
+  </AboutSection>
+  <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>