Alpha version of the app

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.eslintrc.cjs

@@ -10,11 +10,14 @@ module.exports = {
     'prettier',
   ],
   plugins: [],
-  // add your custom rules here
   rules: {
-    'no-console': 'off',
     indent: ['error', 2],
-    'vue/no-multiple-template-root': 'off',
     quotes: [2, 'single', { avoidEscape: true }],
+    'no-console': 'off',
+    'vue/no-multiple-template-root': 'off',
+    'vue/multi-word-component-names': 'off',
+  },
+  settings: {
+    'import/ignore': ['vue-fontawesome'],
   },
 }

app.vue

@@ -1,90 +1,21 @@
-<script>
+<script setup lang="ts"></script>
-// Lazy loading: prepend Lazy to the component name.
-// Imports come from #components (usually it's an auto import though)
-// Auto import from npm package
-/* import { addComponent, defineNuxtModule } from '@nuxt/kit'
-
-export default defineNuxtModule({
-  setup() {
-    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
-    addComponent({
-      name: 'MyAutoImportedComponent',
-      export: 'MyComponent',
-      filePath: 'my-npm-package',
-    })
-  },
-}) */
-// Client components: Component.client.vue
-// .client components are rendered only after being mounted
-// To access the rendered template using onMounted(), add await nextTick() in the callback of the onMounted() hook.
-// <ClientOnly></ClientOnly>
-// Use slot as fallback until clientonly is mounted:
-/* <template>
-  <div>
-    <Sidebar />
-    <!-- This renders the "span" element on the server side -->
-    <ClientOnly fallbackTag="span">
-      <!-- this component will only be rendered on client side -->
-      <Comments />
-      <template #fallback>
-        <!-- this will be rendered on server side -->
-        <p>Loading comments...</p>
-      </template>
-    </ClientOnly>
-  </div>
-</template> */
-// <DevOnly></DevOnly>
-/*  <DevOnly>
-      <!-- this component will only be rendered during development -->
-      <LazyDebugBar />
-
-      <!-- if you ever require to have a replacement during production -->
-      <!-- be sure to test these using `nuxt preview` -->
-      <template #fallback>
-        <div><!-- empty div for flex.justify-between --></div>
-      </template>
-    </DevOnly> */
-// <NuxtClientFallback></NuxtClientFallback> component to render its content on the client if any of its children trigger an error in SSR.
-// You can specify a fallbackTag to make it render a specific tag if it fails to render on the server.
-/* <template>
-  <div>
-    <Sidebar />
-    <!-- this component will be rendered on client-side -->
-    <NuxtClientFallback fallback-tag="span">
-      <Comments />
-      <BrokeInSSR />
-    </NuxtClientFallback>
-  </div>
-</template> */
-// Then in awesome-ui/nuxt.js you can use the components:dirs hook:
-/* import { defineNuxtModule, createResolver } from '@nuxt/kit'
-
-export default defineNuxtModule({
-  hooks: {
-    'components:dirs': (dirs) => {
-      const { resolve } = createResolver(import.meta.url)
-      // Add ./components dir to the list
-      dirs.push({
-        path: resolve('./components'),
-        prefix: 'awesome'
-      })
-    }
-  }
-}) */
-/* export default defineNuxtConfig({
-  modules: ['awesome-ui/nuxt']
-}) */
-// Catch-all route using <ContentDoc> component
-/*
-<template>
-  <main>
-    <ContentDoc :path="$route.path" />
-  </main>
-</template>
- */
-</script>
 
 <template>
-  <main></main>
+  <div
-  <ECMAPortal directory="/images/portal" animate randomize fade />
+    id="ender-layout"
+    class="d-flex flex-column justify-content-center align-items-center h-100"
+  >
+    <Card />
+  </div>
+
+  <Portal
+    layout="#ender-layout"
+    directory="/images/portal"
+    animate
+    randomize
+    fade
+  />
+  <Copyright />
 </template>
+
+<style></style>

assets/styles/main.css

@@ -1,14 +1,117 @@
+@import '@fontsource/Lato/index.css';
+@import '@fontsource/Alexandria/700.css';
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'animate.css';
+.page-enter-active, .page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from, .page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+
+:root {
+  --animate-delay: 0.75s;
+}
+
+html {
+  height: 100%;
+}
+
 body {
   background-color: rgb(6, 25, 28);
   background-image: url("~/assets/images/sky.png");
   background-attachment: fixed;
-  background-size: cover;
   background-blend-mode: multiply;
-  image-rendering: pixelated;
+  background-size: cover;
   background-repeat: no-repeat;
+  image-rendering: pixelated;
   color: white;
   font-family: "Lato", sans-serif;
   font-size: 18px;
+  height: 100%;
+}
+
+#ender-app {
+  height: 100%;
+  image-rendering: auto;
+}
+
+.no-decoration {
+  text-decoration: none;
+  color: inherit;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.font-small {
+  font-size: 14px;
+}
+
+.enderesque {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.link {
+  color: inherit;
+}
+
+.link:hover {
+  color: cornflowerblue;
+}
+
+.radial-gradient {
+  background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: black;
+  }
+  .enderesque {
+    background-color: rgba(255, 255, 255, 0.75);
+  }
+  .link:hover {
+    color: darkslateblue;
+  }
+  .radial-gradient {
+    background: radial-gradient(circle at left, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+  }
+}
+@media (max-width: 575px) {
+  .enderesque {
+    width: 100%;
+  }
+}
+@media (min-width: 576px) {
+  .enderesque {
+    width: 80%;
+  }
+  .rounded-card {
+    border-radius: 1em;
+  }
+}
+@media (min-width: 768px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+@media (min-width: 992px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+@media (min-width: 1200px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+@media (min-width: 2000px) {
+  .enderesque {
+    width: 40%;
+  }
 }
 
 /*# sourceMappingURL=main.css.map */

assets/styles/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["main.scss","transition.scss"],"names":[],"mappings":"AACQ;AACA;AAGA;AAEA;ACNN;EAEE;;AAGF;EAEE;EACA;;;ADCJ;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EAEA;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAQF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AAUJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE","file":"main.css"}

assets/styles/main.scss

@@ -1,14 +1,144 @@
+// Fonts.
+@import '@fontsource/Lato/index.css';
+@import '@fontsource/Alexandria/700.css';
+
+// Bootstrap & animations.
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'transition.scss';
+@import 'animate.css';
+
+// CSS Variables.
+:root {
+  --animate-delay: 0.75s;
+}
+
+// The HTML page.
+html {
+  height: 100%;
+}
+
+// The body element.
 body {
   background-color: rgb(6, 25, 28);
   background-image: url('~/assets/images/sky.png');
-  background-attachment: fixed;
 
-  background-size: cover;
+  background-attachment: fixed;
   background-blend-mode: multiply;
-  image-rendering: pixelated;
+  background-size: cover;
   background-repeat: no-repeat;
 
+  image-rendering: pixelated;
+
   color: white;
   font-family: 'Lato', sans-serif;
   font-size: 18px;
+
+  height: 100%;
+}
+
+// Entry point (Vue mount).
+#ender-app {
+  height: 100%;
+
+  image-rendering: auto;
+}
+
+// Helper classes that don't exist in Bootstrap.
+.no-decoration {
+  text-decoration: none;
+  color: inherit;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.font-small {
+  font-size: 14px;
+}
+
+// Query-overridable classes.
+.enderesque {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.link {
+  color: inherit;
+}
+
+.link:hover {
+  color: cornflowerblue;
+}
+
+.radial-gradient {
+  background: radial-gradient(
+    circle at left,
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.75),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: black;
+  }
+
+  .enderesque {
+    background-color: rgba(255, 255, 255, 0.75);
+  }
+
+  .link:hover {
+    color: darkslateblue;
+  }
+
+  .radial-gradient {
+    background: radial-gradient(
+      circle at left,
+      rgba(0, 0, 0, 0.95),
+      rgba(0, 0, 0, 0.8),
+      rgba(0, 0, 0, 0)
+    );
+  }
+}
+
+// Dimensions.
+@media (max-width: 575px) {
+  .enderesque {
+    width: 100%;
+  }
+}
+
+@media (min-width: 576px) {
+  .enderesque {
+    width: 80%;
+  }
+
+  .rounded-card {
+    border-radius: 1em;
+  }
+}
+
+@media (min-width: 768px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+
+@media (min-width: 992px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .enderesque {
+    width: 60%;
+  }
+}
+
+@media (min-width: 2000px) {
+  .enderesque {
+    width: 40%;
+  }
 }

assets/styles/transition.css

@@ -0,0 +1,9 @@
+.page-enter-active, .page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from, .page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+
+/*# sourceMappingURL=transition.css.map */

assets/styles/transition.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["transition.scss"],"names":[],"mappings":"AACE;EAEE;;AAGF;EAEE;EACA","file":"transition.css"}

assets/styles/transition.scss

@@ -0,0 +1,12 @@
+.page {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.4s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    filter: blur(1rem);
+  }
+}

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(
+onMounted(() => {
-  () =>
+  const layout = document.querySelector(props.layout)
-    new Portal(
+  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>

nuxt.config.ts

@@ -2,10 +2,17 @@
 export default defineNuxtConfig({
   app: {
     head: {
-      title: "Enderman's Website",
+      titleTemplate: '%s – Enderman',
       htmlAttrs: {
         lang: 'en',
       },
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/favicon.ico',
+        },
+      ],
       meta: [
         {
           charset: 'utf-8',
@@ -20,6 +27,8 @@ export default defineNuxtConfig({
         },
       ],
     },
+    pageTransition: { name: 'page', mode: 'out-in' },
+    rootId: 'ender-app',
   },
   components: {
     dirs: [
@@ -30,9 +39,17 @@ export default defineNuxtConfig({
       },
     ],
   },
-  css: ['~/assets/styles/main.css'],
+  css: [
+    '~/assets/styles/main.css',
+    '@fortawesome/fontawesome-svg-core/styles.css',
+  ],
   plugins: [],
-  modules: ['@nuxt/content', '@nuxtjs/eslint-module', '@pinia/nuxt'],
+  modules: [
+    'nuxt-font-loader',
+    '@nuxt/content',
+    '@nuxtjs/eslint-module',
+    '@pinia/nuxt',
+  ],
   typescript: {
     typeCheck: true,
   },

package-lock.json

@@ -7,6 +7,19 @@
       "name": "index",
       "hasInstallScript": true,
       "dependencies": {
+        "@fontsource/alexandria": "^5.0.8",
+        "@fontsource/jetbrains-mono": "^5.0.17",
+        "@fontsource/lato": "^5.0.17",
+        "@fortawesome/fontawesome": "^1.1.8",
+        "@fortawesome/fontawesome-free": "^6.4.2",
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/vue-fontawesome": "^3.0.5",
+        "animate.css": "^4.1.1",
+        "bootstrap": "^5.3.2",
+        "humps": "^2.0.1",
         "pinia": "^2.1.7"
       },
       "devDependencies": {
@@ -22,9 +35,11 @@
         "eslint-plugin-nuxt": "^4.0.0",
         "eslint-plugin-prettier": "^5.0.1",
         "nuxt": "^3.8.1",
+        "nuxt-font-loader": "^2.3.4",
         "prettier": "^3.0.3",
         "sass": "^1.69.5",
         "typescript": "^5.2.2",
+        "vite-plugin-require": "^0.0.3",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5",
         "vue-tsc": "^1.8.22"
@@ -1189,6 +1204,116 @@
         "node": ">=14"
       }
     },
+    "node_modules/@fontsource/alexandria": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/alexandria/-/alexandria-5.0.8.tgz",
+      "integrity": "sha512-JK3rnP8840yUit1t0jkJUOGxROXTECj6MF2bvlp+ijhYOMJehRlVJeQ/W2wuaWg+77E9w6Q1KU6E0Xz9iYNRVA=="
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.0.17",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.0.17.tgz",
+      "integrity": "sha512-Y/EtdbwKwNQTGpnMrexX8SVW6Jqlh0nX2bNHI9Z9m6FsyjbocZIFNJqwSY9bDUoi7irGtz8nuidAN7FF8wYuJA=="
+    },
+    "node_modules/@fontsource/lato": {
+      "version": "5.0.17",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-5.0.17.tgz",
+      "integrity": "sha512-K9znoLAeUsm4tqp6zYv/oXBxhVDUeYPjRz6Yc7rKyBOKKOS9eXxkEcxD8pT9klnvCky4/pYXKJ9lab01LXYSEA=="
+    },
+    "node_modules/@fortawesome/fontawesome": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
+      "integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
+      "deprecated": "This package is deprecated. See https://git.io/fNCzJ for information about upgrading.",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
+      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
+      "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.5.tgz",
+      "integrity": "sha512-isZZ4+utQH9qg9cWxWYHQ9GwI3r5FeO7GnmzKYV+gbjxcptQhh+F99iZXi1Y9AvFUEgy8kRpAdvDlbb3drWFrw==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -2600,6 +2725,16 @@
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.1.tgz",
@@ -4510,6 +4645,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -4946,6 +5086,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/bplist-parser": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
@@ -8669,6 +8827,11 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -13353,6 +13516,15 @@
         }
       }
     },
+    "node_modules/nuxt-font-loader": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/nuxt-font-loader/-/nuxt-font-loader-2.3.4.tgz",
+      "integrity": "sha512-r0eoVHmSoV1abt1XxvWaK9Wrhc8UM6d6q9SNSpZLIy3qDdzyXYAs80C/Czc4W+1hCnwy3X7JFXvb0fh+seIFdQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ivodolenc"
+      }
+    },
     "node_modules/nuxt/node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -18151,6 +18323,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/vite-plugin-require": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-require/-/vite-plugin-require-0.0.3.tgz",
+      "integrity": "sha512-Twv2/+6xTZic4SNO3laCmwSa8I5aKGqR604r0R0Ah6zRHl877uNOwedXseUqIlBQVjrvt2h7NLwcuhENcHQppw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "@babel/generator": "^7.15.4",
+        "@babel/parser": "^7.15.6",
+        "@babel/traverse": "^7.15.4",
+        "vite": ">2.0.0-0"
+      }
+    },
     "node_modules/vite-plugin-vue-inspector": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-4.0.0.tgz",

package.json

@@ -26,14 +26,29 @@
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "nuxt": "^3.8.1",
+    "nuxt-font-loader": "^2.3.4",
     "prettier": "^3.0.3",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
+    "vite-plugin-require": "^0.0.3",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.22"
   },
   "dependencies": {
+    "@fontsource/alexandria": "^5.0.8",
+    "@fontsource/jetbrains-mono": "^5.0.17",
+    "@fontsource/lato": "^5.0.17",
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "animate.css": "^4.1.1",
+    "bootstrap": "^5.3.2",
+    "humps": "^2.0.1",
     "pinia": "^2.1.7"
   }
 }

pages/about.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const meta = {
+  title: 'About',
+  description:
+    'A software engineer, a malware enthusiast and, most importantly, a weird tall creature.',
+  image: 'https://enderman.ch/images/logo.png',
+  url: 'https://enderman.ch/',
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'About',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+</script>
+
+<template><p>About page!</p></template>
+
+<style scoped lang="scss"></style>

pages/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const meta = {
+  title: 'Enderman',
+  description:
+    'A software engineer, a malware enthusiast and, most importantly, a weird tall creature.',
+  image: 'https://enderman.ch/images/logo.png',
+  url: 'https://enderman.ch/',
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  titleTemplate: 'Enderman',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+</script>
+
+<template>
+  <p>
+    A software engineer, a malware enthusiast and most importantly, a weird tall
+    creature.
+    <ClientOnly fallback-tag="span" fallback="TikTok">
+      <FontAwesomeIcon icon="fa-brands fa-tiktok" />
+    </ClientOnly>
+  </p>
+</template>
+
+<style scoped lang="scss"></style>

pages/projects.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template><p>Project page!</p></template>
+
+<style scoped lang="scss"></style>

pages/social.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h3>Contact</h3>
+  <p>
+    Fanmail: contact@enderman.ch <br />
+    Manager: manager@enderman.ch<br />
+    Abuse: abuse@enderman.ch
+  </p>
+</template>
+
+<style scoped lang="scss"></style>

plugins/fontawesome.ts

@@ -0,0 +1,17 @@
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+
+import { far } from '@fortawesome/free-regular-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+// Add icon packs.
+library.add(far, fab, fas)
+
+// Let Nuxt manage CSS.
+config.autoAddCss = false
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
+})

stores/pages.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+export const usePageStore = defineStore('page', () => {
+  const title: string = 'Enderman'
+  const description: string = 'official website'
+  const keywords: string =
+    'endermanch, enderman, developer, designer, artist, web, web developer, web designer, web artist, software, software developer, software designer, software artist, software engineer, engineer, software engineer'
+
+  const pages = ref([
+    {
+      name: 'About',
+      path: '/about',
+    },
+    {
+      name: 'Projects',
+      path: '/projects',
+    },
+    {
+      name: 'Socials',
+      path: '/social',
+    },
+  ])
+
+  function autoFetchPages() {
+    while (pages.value.length) pages.value.pop()
+
+    useRouter()
+      .getRoutes()
+      .forEach((route) => {
+        if (route.path !== '/')
+          pages.value.push({
+            name: route.path.slice(1)[0].toUpperCase() + route.path.slice(2),
+            path: route.path,
+          })
+      })
+  }
+
+  return {
+    title,
+    description,
+    keywords,
+    pages,
+  }
+})

tsconfig.json

@@ -1,4 +1,7 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client"]
+  }
 }