~repos /website

---
import { Image } from "astro:assets";
import Layout from "@/layouts/BaseLayout.astro";
import { REPOS, TOOLS } from "@/consts";
---

<Layout
  title="pyrossh"
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
>
  <div class="pageContainer">
    <div>
      <h1 class="title">Hello!</h1>
      <p class="description">
        <a
          class="linkUnderline"
          href="https://www.linkedin.com/in/pyrossh"
          target="_blank"
          rel="noopener noreferrer"
        >
          <strong>I’m</strong>
        </a>
        a tech lead based out of Bangalore, India and have worked for startups and
        enterprises that focus on products in the healthcare and finance domains.
        I like to build frameworks and automate common tasks to make it easier to
        develop applications.
      </p>
      <p class="description">
        I enjoy working on open-source projects, and during the last decade,
        I've created a number of projects that are widely used.
      </p>
      <div class="gridContainer">
        <section class="interests">
          <h2>Interests</h2>
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>S3</li>
            <li>SQL</li>
            <li>Bun</li>
            <li>Astro</li>
            <li>Tauri</li>
            <li>Remix</li>
            <li>Zig</li>
            <li>K8s</li>
            <li>Iceberg</li>
          </ul>
        </section>
        <section class="contact">
          <h2>Contact</h2>
          <ul>
            <li>
              <strong>email:</strong>
              <span>pyros2097@gmail.com</span>
            </li>
            <li>
              <strong>crates:</strong>
              <a href="https://crates.io/users/pyrossh">
                https://crates.io/users/pyrossh
              </a>
            </li>
            <li>
              <strong>npm:</strong>
              <a href="https://www.npmjs.com/~pyrossh">
                https://www.npmjs.com/~pyrossh
              </a>
            </li>
            <li>
              <strong>linkedin:</strong>
              <a href="https://www.linkedin.com/in/pyrossh">
                https://www.linkedin.com/in/pyrossh
              </a>
            </li>
          </ul>
        </section>
      </div>
      <section class="tools">
        <h2>Tools</h2>
        <ul>
          {
            TOOLS.map((tool) => (
              <li>
                <a href={tool.link} target="_blank" rel="noopener noreferrer">
                  <div>{tool.name}</div>
                  {tool.image && <Image src={tool.image} alt={tool.name} />}
                </a>
              </li>
            ))
          }
        </ul>
      </section>
      <section>
        <h2>Git</h2>
        <div class="repos">
          {
            REPOS.map((repo) => (
              <div class="repo">
                <h4>
                  <a href={`/repos/${repo.title}`}>{repo.title}</a>
                </h4>
                <p>{repo.description}</p>
                <div class="tags">
                  {repo.tags.map((tag) => (
                    <span class="tag">#{tag}</span>
                  ))}
                </div>
              </div>
            ))
          }
        </div>
      </section>
    </div>
  </div>
</Layout>
<style>
  .description {
    font-size: 1.1rem;
    @media (max-width: 720px) {
      font-size: 1rem;
    }
  }

  h2 {
    font-size: 1.4rem;
    font-weight: 600;
    @media (max-width: 720px) {
      font-size: 1.15rem;
    }
  }

  section {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 1rem;

    @media (max-width: 720px) {
      margin-top: 1.5rem;
      margin-bottom: 0rem;
    }
  }

  .rounded-md {
    border-radius: 0.375rem;
  }

  .repos {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
    margin-top: 0.5rem;

    @media (max-width: 720px) {
      gap: 1rem;
      grid-template-columns: auto;
    }
  }

  .pageContainer {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    /* mb-10 */
  }

  .title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    @media (max-width: 720px) {
      font-size: 1.6rem;
    }
  }

  .firstSection {
    display: flex;
    flex-direction: column;
  }

  .firstPara {
    display: flex;
    flex-direction: row;
  }

  .linkUnderline {
    text-decoration-line: underline;
  }

  .gridContainer {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;

    @media (max-width: 720px) {
      gap: 0rem;
    }
  }

  @media (min-width: 640px) {
    /* sm: */
    .gridContainer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* sm:grid-cols-2 */
      gap: 2rem;
      /* sm:gap-8 */
    }
  }

  .repo {
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5rem;
    background: var(--color-box-bg);
    color: var(--color-text);
    font-size: 0.95rem;

    a {
      color: var(--color-link);
    }

    h4 {
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.2;
      border-bottom: 1px solid #495057;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-bottom: 0;
      padding: 0;
    }

    .tags {
      margin-top: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
    }

    .tag {
      color: var(--color-tag);
      padding: 0.15rem 0.5rem 0.5rem 0rem;
      border-radius: 0.25rem;
      font-size: 0.95rem;
      font-weight: 500;
    }
  }

  .interests {
    ul {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: auto auto auto;
      text-align: center;
      margin-top: 0.5rem;
      font-size: 1.1rem;

      li {
        background-color: var(--color-box-bg);
        padding: 0.25rem;
      }
    }
  }

  .contact {
    ul {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: auto;
      margin-top: 0.5rem;

      li {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding: 0.25rem;
        background-color: var(--color-box-bg);
        font-size: 1.1rem;

        @media (max-width: 720px) {
          font-size: 1rem;
          flex-direction: column;
        }
      }

      a {
        color: var(--color-link);
      }

      strong {
        font-weight: 500;
        margin-left: 0.25rem;
        margin-right: 0.5rem;
      }
    }
  }

  .tools {
    img {
      width: 36px;
      height: 36px;
    }

    ul {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: auto auto auto auto;
      text-align: center;
      margin-top: 0.5rem;

      @media (max-width: 720px) {
        grid-template-columns: auto auto auto;
      }

      li {
        display: flex;
        align-items: center;
        background-color: var(--color-box-bg);
        padding: 0.25rem;
        font-size: 1rem;

        a {
          display: flex;
          flex: 1;
          flex-direction: row;
          align-items: center;
          text-align: left;
          margin-left: 0.25rem;
          margin-right: 0.25rem;

          div {
            flex: 1;
          }
        }
      }
    }
  }
</style>