---
import BaseLayout from "../layouts/BaseLayout.astro";

import { Icon } from "astro-icon/components";
---

<BaseLayout title="Samvid Konchada">
  <div>
    <h1 class="title">Samvid Konchada</h1>
    <p class="subtitle">
      Hi, welcome to my website! I'm high-schooler from Atlanta, GA. I'm
      interested in programming, cybersecurity, open source, Linux, native
      plants, and more! Check out what I'm doing <a href="/now">now</a>.
    </p>
    <p class="subtitle">
      I have experience with fullstack and mobile development with Python,
      Javascript, and more. Check out different <a href="/projects">projects</a>
      I've worked on!
    </p>
    <div class="accts-main">
      <div class="accts-sub" style="">
        <a href="/contact"><Icon name="lucide:mail" size="32" /></a>
        <a href="/contact"><Icon name="simple-icons:signal" size="32" /></a>
        <a href="/contact"><Icon name="simple-icons:matrix" size="32" /></a>
        <p class="icon-label">Contact</p>
      </div>
      <div class="accts-sub">
        <a href="https://hackclub.slack.com/team/U05RFBS4BEW"
          ><Icon name="simple-icons:hackclub" size="32" /></a
        >
        <a href="https://techhub.social/@theamazing0"
          ><Icon name="simple-icons:mastodon" size="32" /></a
        >
        <a href="https://www.linkedin.com/in/samvid-konchada-a4565129a/"
          ><Icon name="simple-icons:linkedin" size="32" /></a
        >
        <p class="icon-label">Social</p>
      </div>
      <div class="accts-sub">
        <a href="https://github.com/theamazing0"
          ><Icon name="simple-icons:github" size="32" /></a
        >
        <a href="https://gitlab.com/theamazing0"
          ><Icon name="simple-icons:gitlab" size="32" /></a
        >
        <a href="https://codeberg.org/theamazing0/"
          ><Icon name="simple-icons:codeberg" size="32" /></a
        >
        <p class="icon-label">Git</p>
      </div>
    </div>
  </div>
</BaseLayout>

<style>
  .title {
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
  }

  [data-icon] {
    margin-right: 0.5rem;
  }

  .icon-label {
    margin-top: 0.25rem;
    color: #9dac93;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .accts-sub {
    margin-top: 1.5rem;
  }

  @media only screen and (min-width: 769px) {
    .subtitle {
      max-width: 65%;
    }

    .accts-main {
      display: flex;
      margin-top: 2rem;
    }

    .accts-sub {
      margin-right: 1.5rem;
      margin-top: 0;
    }
  }
</style>
