youhavetrouble.github.io/src/pages/projects.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import {getCollection} from "astro:content";

const title = 'Projects';
const description = 'Stuff I\'m working on.';
const permalink = `${Astro.site.href}projects`;

const projectsCollection = await getCollection('projects');
projectsCollection.sort((a, b) => a.data.name.localeCompare(b.data.name));
const projects = {}

for (const project of projectsCollection) {
  const category = project.data.category.toLowerCase();
  const projectsInCategory = projects[category];
  if (projectsInCategory) {
    projectsInCategory.push(project);
  } else {
    projects[category] = [project];
  }
}
---

<BaseLayout title={title} description={description} permalink={permalink} current="projects">
  <div class="container">
    <h1>Projects</h1>
    <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">DALL-E mini</a>.
    </p>
    {
      Object.keys(projects).map((category) => {
          return (
              <h2 id={category}><a href={`#${category}`}>{category}</a></h2>
              <hr>
              <div>
                {
                  projects[category].map((project) => {
                    return (
                        <article>
                          <div class="icon">
                            <img src={project.data.image} alt="" aria-hidden="true"/>
                          </div>
                          <div class="description">
                            <h3>{project.data.name}</h3>
                            <p>
                              {project.data.description}
                            </p>
                            <p>
                              {
                                project.data.links.map((link, index) => {
                                  return (
                                    index === 0 ?
                                        <a href={link.url} target="_blank">{link.text}</a>
                                      : <span> | </span><a href={link.url} target="_blank">{link.text}</a>
                                  )
                                })
                              }
                            </p>
                          </div>
                        </article>
                    )
                  })
                }
              </div>
          )
        }
      )
    }
  </div>
</BaseLayout>

<style>
  article {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3.25rem;
  }

  h2 {
    text-transform: capitalize;
  }

  .icon {
    width: 8rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--text-main);
    border-radius: 0.25rem;
    font-weight: 600;
  }

  .description {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: min(100%, 25rem);
  }

  .description > * {
    margin-block: 0.5rem;
  }

  .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
  }
</style>