site-v2/pages/index.vue

<script setup>
import {ref, onMounted} from 'vue';
onMounted(() => {
  const avatar = document.getElementById('avatar');
  window.onscroll = () => {
    if (window.scrollY > avatar.getBoundingClientRect().top) {
      document.getElementById('bg-gradient').classList.remove('gradient-unscrolled');
      document.getElementById('bg-gradient').classList.add('gradient-scrolled');
      document.getElementById('main-content').classList.remove('blurred');
    } else {
      document.getElementById('bg-gradient').classList.add('gradient-unscrolled');
      document.getElementById('bg-gradient').classList.remove('gradient-scrolled');
      document.getElementById('main-content').classList.add('blurred');
    }
  };
});
</script>

<template>
  <div>
    <div id="index-master" class='overflow-hidden'>
      <div class="relative p0 m0 size-0">
        <div id="bg-gradient" class="absolute z-[-1] min-h-screen min-w-screen w-screen h-screen m0 p0 left-0 pointer-events-none gradient-unscrolled"></div>
        <div id="bg-container" class="p0 m0 z-[-2] absolute min-h-screen min-w-screen w-screen h-screen left-0 top-0 pointer-events-none"></div>
      </div>

      <div id="container" class="mx-0 md:mx-20 lg:mx-32 my-0 p-2">
        <div id="intro" class="px-4 mx-auto min-h-max">
          <h1 class="my-12 font-nun font-extralight shiny title">WubzyGD</h1>
          <div id="avatar-container" class="relative p0 2xl:size-[17vw] xl:size-[23vw] lg:size-[30vw] md:size-[40vw] size-[45vw] mx-auto">
            <img src="@/assets/images/katsu.gif" alt="Wubzy's avatar" id="avatar" class="absolute mx-auto max-w-full size-full inset-0 z-[1] rounded-full">
            <div id="avatar-border" class="absolute inset-[-3px] rounded-full z-0 rotate-0"></div>
          </div>
        </div>
        
        <div id="main-content-container" class="p0 max-w-[100%] mt-28 md:mt-32 xl:mt-48 2xl:mt-64 ease-in-out duration-300">
          <div id="arrow-float-container" class="relative mx-auto p0 mb-20 h-[30px] w-[30px]">
            <div id="arrow-float" class="absolute left-auto right-auto">
              <div class="guide-arrow w-[30px] h-[30px]">
                <a data-scroll href="#main-content">
                  <div class="arrow"></div>
                </a>
              </div>
            </div>
          </div>
          <div id="main-content" class="blurred mx-0 lg:mx-[9vw] xl:mx-[14vw] mb-8 mt-32 xl:mt-64 p-10 md:p-25 lg:p-35 xl:p-45 border-2 rounded">
            <h1 class="font-mont text-5xl font-normal text-w-blue text-center">Hi, I'm Wubzy!</h1>
            <p class="font-nun font-thin text-lg text-w-pink mt-4 text-center">This is my website! And it's also under construction :P</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  html {
    background-color: #171717;
    
    max-width: 100vw;
    padding: 0 0;
    margin: 0 0;
    scroll-behavior: smooth;
    /*overflow-x: hidden;*/
  }
</style>

<style scoped>
  #arrow-float-container {
    margin-top: 50px;
  }

  #arrow-float {
    animation: float-arrow ease-in-out 3s infinite alternate both;
  }

  @keyframes float-arrow {
    0% {top:0%;}
    25% {top:-10%;}
    75% {top:50%;}
    100% {top:40%;}
  }

  #bg-container {
    background: url('@/assets/images/background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #bg-gradient {
    transition: top .75s ease-in-out, opacity .85s ease-in-out;
  }
  .gradient-unscrolled {@apply top-[50px] md:top-[100px] xl:top-[200px] opacity-95;}
  .gradient-scrolled {top: 0;}

  #main-content {
    border-color: var(--theme-purple-invis);
    transition: margin .35s ease-in, border .35s ease-in, background-color .35s ease-in, filter .75s ease-in;
    background-color: var(--theme-black-invis);
  }
  #main-content:hover {
    border-color: var(--theme-purple);
  }
</style>