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

---
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.';
const permalink = Astro?.site?.href ?? '/';
---

<BaseLayout title={title} description={description} permalink={permalink}>
  <div class="home-container">
    <div class="window home-copy" data-title="Welcome" id="welcome">
      <div>
        <h1>Welcome to my little corner of the interwebs</h1>
        <p>Feel free to check out what I got in store!</p>
      </div>
    </div>
    <div class="window-row">
      <div class="window visitor-counter" data-title="Visitors counter" id="visitor-counter" aria-label="Visitors counter">
        <ViewCounter />
      </div>
      <div class="window activity" data-title="Activity" id="activity" aria-label="Activity">
        <ActivityWidget />
      </div>
    </div>
    <div class="window-row">
      <div class="window socials" data-title="Socials" id="socials" aria-label="Socials">
        <SocialsWidget />
      </div>
      <div class="window blog" aria-label="Blog" id="blog" data-title="Blog">
        <a href="/blog">I have a blog btw!</a>
        <a href="/rss.xml" target="_blank">It also has an RSS feed!</a>
      </div>
    </div>
    <div class="window-row">
      <div class="window" data-title="Projects" id="projects" aria-label="Projects">
        <div class="buttons">
          <button popovertarget="projects-info" popovertargetaction="show" aria-label="Projects info">
            <span class="icon">ℹ️</span>
          </button>
        </div>
        <div popover="auto" id="projects-info" class="window">
          <div class="buttons">
            <button popovertarget="projects-info" popovertargetaction="hide" aria-label="Close projects info">
              <span class="icon">❌</span>
            </button>
          </div>
          <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>
        <ProjectsFeature />
      </div>
    </div>


  </div>
</BaseLayout>

<style lang="scss">

  #projects-info {
    position: fixed;
  }

  .visitor-counter {
    padding: 1.5rem 2rem 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: min(15rem, 100%);
    flex: 1;
    width: 100%;
  }

  .socials {
    padding: 2rem 1rem 0 1rem;
    flex: 2;
    min-width: min(25rem, 100%);
  }

  .activity {
    min-width: min(100%, 16rem);
    flex: 2;
  }

  #projects {
    width: 100%;
    display: flex;
    flex: 1;
    padding-top: 1.5rem;
  }

  .blog {
    padding: 2rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: min(25rem, 100%);
    width: 100%;
    flex: 1;
  }

  .window-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
  }

  .home-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2em 0;
    gap: 1.5rem;

    .home-copy {
      flex: 1;
      display: flex;
      width: 100%;
      padding-top: 3rem;
      padding-inline: 0.5rem;

      h1 {
        font-weight: 700;
        margin-bottom: 0.5em;
        line-height: 1.3;
        font-size: 2rem;
        text-align: center;
      }

      p {
        text-align: center;
        font-size: 1.2rem;
      }
    }

  }

  @media (max-width: 1200px) {
    p {
      font-size: 1.2em;
    }
  }

  @media (max-width: 800px) {
    .home-container {
      flex-direction: column;
    }

    .home-copy {
      flex: 0;
      padding-bottom: 2em;
      text-align: center;
    }
  }

</style>