The Nuxt 3 rework of my website! https://wubzy.xyz
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
site-v2/pages/index.vue

104 lines
3.8 KiB

<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>