nuxt 3; main page

.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+package-lock.json
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+/README.md.old
+
+# Local env files
+.env
+.env.*
+!.env.example
+

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'purple',
+    gray: 'slate',
+  }
+})

app.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage/>
+      <div class="mx-auto px-0 m-0 mt-6 md:mt-8">
+        <p class="text-xs mx-auto italic text-center text-slate-400 font-thin">Copyright WubzyGD 2024</p>
+      </div>
+    </NuxtLayout>
+  </div>
+</template>

assets/css/styles.css

@@ -0,0 +1,74 @@
+:root {
+    --theme-purple: #a172a6;
+    --theme-black: #171717;
+    --theme-blue: #b0f6ff;
+    --theme-purple-invis: #a172a69a;
+    --theme-black-invis: #1717179a;
+    --theme-blue-invis: #b0f6ff9a;
+}
+
+@keyframes shine {
+    to {
+        background-position: 200% center;
+    }
+}
+
+@keyframes dropdown-title {
+    from {transform: translateY(-100vh);}
+    to {transform: translateY(0);}
+}
+
+.shiny {
+    background: linear-gradient(to right, var(--theme-purple) 20%, var(--theme-black) 35%, var(--theme-black) 35%, var(--theme-purple) 50%, var(--theme-purple) 50%, var(--theme-blue) 75%, var(--theme-purple) 90%);
+    background-size: 200% auto;
+    animation: /*dropdown-title 1.5s ease-in-out, */shine 2.5s linear infinite;
+    @apply overflow-hidden bg-clip-text max-w-min text-transparent;
+}
+
+.title {
+    @apply md:text-7xl lg:text-8xl text-6xl h-fit max-h-fit mx-auto m-0 p-0 text-center;
+}
+
+#avatar-border {
+    --angle: 0deg;
+    animation: rotate 5s cubic-bezier(.13,.82,.87,.18) infinite;
+    background-image: linear-gradient(var(--angle), #a172a6 20%, #d0faeb 60%, #a172a6 100%);
+
+}
+#bg-gradient {
+    background: linear-gradient(to bottom, #00000000 0%, #00000000 5%, #171717cc 35%, #171717ea 55%, #171717ff 85%);
+}
+
+
+
+.arrow {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    border-style: solid;
+    border-color: white;
+    border-width: 0px 1px 1px 0px;
+    transform: rotate(45deg);
+    transition: border-width 150ms ease-in-out; 
+}
+
+.arrow:hover {
+    border-bottom-width: 4px;
+    border-right-width: 4px; 
+}
+
+.blurred {
+    filter: blur(10px);
+}
+
+
+@keyframes rotate {
+    to {
+        --angle: 360deg;
+    }
+}
+@property --angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+}

nuxt.config.ts

@@ -0,0 +1,23 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ["@nuxt/ui", '@formkit/auto-animate', '@nuxt/image'],
+
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en'
+      },
+      meta: [
+        {charset: 'utf-8'},
+        {name: 'viewport', content: 'width=device-width, initial-scale=1'}
+      ],
+      link: [
+        {rel: 'icon', type: 'image/x-icon', href: 'https://cdn.wubzy.xyz/katsu-icon.gif'},
+        {rel: 'stylesheet', href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@200..700&display=swap"},
+        {rel: 'stylesheet', href: "https://fonts.googleapis.com/css2?family=Nunito:wght@200..700&display=swap"},
+        {rel: 'stylesheet', href: '_nuxt/assets/css/styles.css'}
+      ]
+    }
+  }
+});

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@formkit/auto-animate": "^0.8.2",
+    "@nuxt/devtools": "latest",
+    "@nuxt/image": "^1.5.0",
+    "@nuxt/ui": "^2.13.0",
+    "nuxt": "^3.10.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,104 @@
+<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>

pages/util/theme.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  corePlugins: {
+    //preflight: false
+  },
+  content: [],
+  theme: {
+    extend: {
+      fontFamily: {
+        mont: 'Montserrat, sans-serif',
+        nun: 'Nunito, sans-serif'
+      },
+      colors: {
+        'w-blue': '#b0f6ff',
+        'w-purple': '#a172a6',
+        'w-pink': '#f3b5d3'
+      }
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}