Alpha version of the app

components/Card.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main
+    class="enderesque d-flex flex-column rounded-card gap-2 p-4 animate__animated animate__fadeInDown animate__delay-1s"
+  >
+    <Navigation />
+    <h3>Welcome!</h3>
+    <NuxtPage class="ender-card-body" />
+  </main>
+</template>
+
+<style scoped lang="scss"></style>

components/Copyright.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer
+    class="float user-select-none mb-2 animate__animated animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
+  >
+    <span class="transpaque font-small text-shadow">
+      © 2018-{{ currentYear }}, <a href="https://enderman.ch">Enderman</a>. All
+      rights reserved.
+    </span>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+.float {
+  position: fixed;
+
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  width: fit-content;
+  height: fit-content;
+
+  margin: auto;
+}
+
+.transpaque {
+  color: white;
+
+  opacity: 0.25;
+  transition: ease 0.3s;
+}
+
+.transpaque:hover {
+  opacity: 1;
+}
+
+.line-height-1-5 {
+  line-height: 14px * 1.5;
+}
+
+.text-shadow {
+  text-shadow: black 0 2px 5px;
+}
+</style>

components/LinkButton.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  path: {
+    type: String,
+    required: true,
+  },
+  external: Boolean,
+  name: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: 'Link',
+  },
+})
+</script>
+
+<template>
+  <NuxtLink
+    class="icon link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
+    active-class="icon-active px-3"
+    :to="!props.external ? props.path : undefined"
+    :href="props.external ? props.path : undefined"
+  >
+    <img
+      class="icon-image"
+      draggable="false"
+      :src="props.icon"
+      :alt="props.alt"
+    />
+    <strong>{{ props.name }}</strong>
+  </NuxtLink>
+</template>
+
+<style scoped lang="scss">
+.icon {
+  transition: 0.3s ease;
+
+  &-active {
+    transform: translate(2px, 2px) rotate3d(1, 1, 1, 5deg) scale(1.25);
+  }
+
+  &-image {
+    width: 1.5em;
+    height: 1.5em;
+  }
+}
+</style>

components/Logo.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    default: 'Logo',
+  },
+  width: {
+    type: Number,
+    default: 100,
+  },
+  height: {
+    type: Number,
+    default: 100,
+  },
+  title: {
+    type: String,
+    default: 'Title',
+  },
+  description: {
+    type: String,
+    default: 'Description',
+  },
+})
+</script>
+
+<template>
+  <NuxtLink class="no-decoration user-select-none" to="/">
+    <div
+      class="logo d-flex flex-row align-items-center justify-content-sm-center"
+    >
+      <img
+        class="logo-image"
+        draggable="false"
+        :width="props.width"
+        :height="props.height"
+        :src="props.src"
+        :alt="props.alt"
+      />
+      <div>
+        <h1 class="phat mb-0">{{ props.title }}</h1>
+        <Separator />
+        <p class="mb-0">{{ props.description }}</p>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped lang="scss">
+.phat {
+  font-family: 'Alexandria', sans-serif;
+}
+
+.logo {
+  > img.logo-image {
+    transition: ease 0.3s;
+  }
+
+  &:hover {
+    > img.logo-image {
+      transform: scale(105%);
+    }
+  }
+}
+</style>

components/Navigation.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '~/stores/pages'
+
+import logo from '~/assets/images/logo.gif'
+import aboutIcon from '~/assets/images/icons/info.png'
+import projectIcon from '~/assets/images/icons/defrag.png'
+import socialIcon from '~/assets/images/icons/user.png'
+
+const pageStore = usePageStore()
+const { pages } = storeToRefs(pageStore)
+
+const icons = [aboutIcon, projectIcon, socialIcon]
+</script>
+
+<template>
+  <nav
+    class="d-flex flex-column flex-lg-row justify-content-lg-between gap-sm-2 gap-lg-3"
+  >
+    <Logo
+      :src="logo"
+      alt="Endermanch"
+      title="Enderman"
+      description="official website"
+    />
+    <ul
+      class="navbar-nav flex-sm-row align-items-lg-center justify-content-sm-center gap-sm-3 mx-2"
+    >
+      <li v-for="(page, index) in pages" :key="index" class="nav-item">
+        <LinkButton
+          :path="page.path"
+          :name="page.name"
+          :icon="icons[index]"
+          alt="Info"
+        />
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped lang="scss"></style>

components/Portal.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const props = defineProps({
+  layout: {
+    default: '#ender-app',
+    type: String,
+  },
   directory: {
     default: '/images/portal',
     type: String,
@@ -597,17 +601,24 @@ class Portal {
   }
 }
 
-onMounted(
-  () =>
-    new Portal(
-      props.directory,
-      props.create,
-      props.animate,
-      props.randomize,
-      props.fade,
-      props.speed,
-    ),
-)
+onMounted(() => {
+  const layout = document.querySelector(props.layout)
+  const portal = new Portal(
+    props.directory,
+    props.create,
+    props.animate,
+    props.randomize,
+    props.fade,
+    props.speed,
+  )
+
+  layout!.addEventListener('mousedown', ((e: UIEvent) => {
+    if (e.target === e.currentTarget && e.detail >= 2) {
+      e.preventDefault()
+      portal.click()
+    }
+  }) as EventListener)
+})
 </script>
 
 <template>
@@ -631,5 +642,7 @@ onMounted(
 
   opacity: 0;
   transition: all 0.6942s ease-in;
+
+  z-index: -1;
 }
 </style>

components/Separator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white',
+  },
+  height: {
+    type: Number,
+    default: 1,
+  },
+})
+</script>
+
+<template>
+  <hr
+    class="radial-gradient m-0 border-0 w-100"
+    :style="{ height: props.height + 'px' }"
+  />
+</template>
+
+<style scoped lang="scss"></style>