<script lang="ts">
  import '../app.scss'
  import { base } from '$app/paths'
  import { socials } from '$lib/socials.json'

  type Social = {
    name: string,
    link: string
  }

  const socialsList: Social[] = socials
</script>

<svelte:head>
  <title>pml68</title>
</svelte:head>

<div class="main">
  <h1>pml68</h1>
  <p>Just your average IT student</p>
  <div class="socials">
    {#each socialsList as {name, link}}
      <a href={link} target="_blank" class="icon" aria-label={name}>
        <svg viewBox="0 0 512 512" class="social-icon">
          <use href={`/${name}.svg#${name}`} />
        </svg>
      </a>
    {/each}
  </div>
  <br>
  <div class="projects">
    Check out my projects <a href={base + '/projects'}><b>here</b></a>
  </div>
</div>
