move project showcase to the main page

src/components/Nav.astro

@@ -76,7 +76,6 @@ const { current = '' } = Astro.props;
 <nav>
   <div class="nav-buttons">
     <a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
-    <a data-astro-prefetch class={current === "projects" ? "selected" : ""} href='/projects'>projects</a>
     <a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
   </div>
 </nav>

src/components/ProjectsFeature.astro

@@ -0,0 +1,131 @@
+---
+import {getCollection} from "astro:content";
+
+const projects = await getCollection('projects');
+projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
+---
+<section id="projects">
+  <h2>Projects</h2>
+  <p>
+    Here are some of the projects I'm working on. Most of them are open source, so feel free to check them out!
+    <br>
+    Projects presented here are what I consider in presentable and/or finished state. They might or might not get
+    updates.
+    <br>
+    Most logos generated using <a href="https://huggingface.co/spaces/dalle-mini/dalle-mini" target="_blank">DALL-E mini</a>.
+  </p>
+  <div class="showcase">
+    {
+      projects.map((project, index) => {
+        return (
+            <article class="project">
+              <div class="icon">
+                <img
+                    src={project.data.image}
+                    alt=""
+                    aria-hidden="true"
+                    loading={index > 4 ? "lazy" : "eager"}
+                    decoding="async"
+                    draggable="false"
+                />
+              </div>
+              <div class="description">
+                <h3>{project.data.name}</h3>
+                <span>{project.data.description}</span>
+              </div>
+              <div class="links">
+                {
+                  project.data.links.map((link) => {
+                    return (
+                        <span>
+                          <a href={link.url} target="_blank">{link.text}</a>
+                      </span>
+                    )
+                  })
+                }
+              </div>
+            </article>
+        )
+      })
+    }
+  </div>
+
+</section>
+
+<style lang="scss" scoped>
+  section {
+    text-align: center;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .showcase {
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
+    max-width: 100%;
+    gap: 0.75rem;
+    scroll-snap-type: x mandatory;
+    padding-block: 0.25rem;
+  }
+
+  .project {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    text-align: start;
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    border-radius: 0.25rem;
+    background-color: #313131;
+    min-width: min(20rem, calc(100% - 1.5rem));
+    max-width: min(20rem, calc(100% - 1.5rem));
+    scroll-snap-align: start;
+
+    .icon {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 0.25rem;
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 0.25rem;
+      }
+    }
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      text-align: center;
+      flex: 1 1;
+      padding-block: 0.5rem;
+    }
+
+    .links {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      line-height: 1;
+      a {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  @media screen and (max-width: 800px) {
+    .showcase {
+      padding-inline: 0;
+    }
+    .project {
+      scroll-margin-inline: 0;
+      scroll-snap-align: center;
+    }
+  }
+</style>

src/pages/about.astro

@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = 'About';
 const description = 'A few words about myself.';
-const permalink = `${Astro.site.href}about`;
+const permalink = `${Astro?.site?.href}about`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="about">

src/pages/index.astro

@@ -3,6 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import ActivityWidget from "../components/ActivityWidget.astro";
 import ViewCounter from "../components/ViewCounter.astro";
 import SocialsWidget from "../components/SocialsWidget.astro";
+import ProjectsFeature from "../components/ProjectsFeature.astro";
 
 const title = 'Home';
 const description = 'My little corner of the internet.';
@@ -22,6 +23,7 @@ const permalink = Astro?.site?.href ?? '/';
       <ViewCounter/>
     </div>
     <SocialsWidget />
+    <ProjectsFeature />
   </div>
 </BaseLayout>
 
@@ -32,6 +34,7 @@ const permalink = Astro?.site?.href ?? '/';
     flex-direction: column;
     justify-content: center;
     margin: 2em 0;
+    gap: 2rem;
 
     .home-copy {
       flex: 1;

src/pages/projects.astro

@@ -4,7 +4,7 @@ import {getCollection} from "astro:content";
 
 const title = 'Projects';
 const description = 'Stuff I\'m working on.';
-const permalink = `${Astro.site.href}projects`;
+const permalink = `${Astro?.site?.href}projects`;
 
 const projectsCollection = await getCollection('projects');
 projectsCollection.sort((a, b) => a.data.name.localeCompare(b.data.name));

src/styles/global.css

@@ -25,6 +25,7 @@ p {
   html {
     overflow-y: auto;
     scrollbar-gutter: stable;
+    scrollbar-color: var(--primary-color) transparent;
   }
 }
 
@@ -52,6 +53,7 @@ h6 {
   font-family: var(--font-family-sans);
   font-weight: 700;
   line-height: 1.2;
+  margin: 0;
 }
 
 h1 {