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.
104 lines
3.8 KiB
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> |