<template>
  <div class="index-page">
    <div class="index-page__background">
      <canvas ref="canvas"/>
      <div class="index-page__background-vignette"></div>
    </div>
    <main class="index-page__content">
      <Logo class="index-page__logo"/>
      <span class="index-page__name">Moritz Ruth</span>
      <div class="index-page__socials">
        <a
          class="index-page__social"
          href="https://instagram.com/moritz_ruth"
          title="Instagram"
        ><InstagramIcon class="index-page__social-icon"/></a>
        <a
          class="index-page__social"
          href="https://twitter.com/moritz_ruth"
          title="Twitter"
        ><TwitterIcon class="index-page__social-icon"/></a>
        <a
          class="index-page__social"
          href="https://npmjs.org/~moritzruth"
          title="NPM"
        ><NPMIcon class="index-page__social-icon"/></a>
        <a
          class="index-page__social"
          href="https://github.com/moritzruth"
          title="GitHub"
        ><GitHubIcon class="index-page__social-icon"/></a>
        <a
          class="index-page__social"
          href="mailto:dev@moritzruth.de"
        ><EmailIcon class="index-page__social-icon"/></a>
      </div>
    </main>
  </div>
</template>

<style lang="scss">
  @use "~@/assets/styles/screenSize";
  @use "~@/assets/styles/colors";

  .index-page {
    background: colors.$background;
    color: colors.$background-c;
    width: 100vw;
  }

  .index-page__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    overflow: hidden;
  }

  .index-page__background-vignette {
    background: radial-gradient(transparent, colors.$background 80%);
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: -100px;
  }

  .index-page__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    height: calc(90vh - var(--navigation-bar-height));
  }

  .index-page__logo {
    height: 400px;
    margin: -120px 0;
    width: 100%;

    position: relative;
    left: 12px;
    pointer-events: none;
  }

  .index-page__name {
    font-size: 2.4rem;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .index-page__socials {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .index-page__social {
    text-decoration: none;
    position: relative;

    display: flex;
    align-items: center;

    margin: 0 8px;

    &:hover, &:focus-within {
      &::before {
        opacity: 1;
      }
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background: linear-gradient(-135deg, colors.$blue, colors.$pink 80%);
      pointer-events: none;
      mix-blend-mode: lighten;

      opacity: 0;
      transition: 200ms opacity ease;
    }
  }

  .index-page__social-icon {
    color: colors.$background-c;
    height: 40px;
  }
</style>

<script>
  import { ShapedCanvas } from "shaped.js"
  import { footerItems } from "assets/js/footer-items"
  import InstagramIcon from "@/assets/icons/instagram.svg"
  import TwitterIcon from "@/assets/icons/twitter.svg"
  import NPMIcon from "@/assets/icons/npm.svg"
  import GitHubIcon from "@/assets/icons/github.svg"
  import EmailIcon from "@/assets/icons/email.svg"
  import Logo from "@/assets/icons/logo.svg"

  export default {
    name: "IndexPage",
    components: { Logo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
    mounted() {
      const shaped = new ShapedCanvas(this.$refs.canvas, {
        useWindowSize: true,
        colors: ["#d21b8d", "#14AAD8"],
        minCount: 8,
        probability: 1 / 30000,
        height: 1,
        length: [80, 150],
        speed: [0.2, 0.5]
      })

      this.$once("hook:beforeDestroy", () => shaped.stop())
    },
    head: () => ({ title: "Moritz Ruth creates things", titleTemplate: "%s" }),
    footerItems
  }
</script>
