Conditional rendering, pages updated

app.vue

@@ -1,24 +1,60 @@
 <script setup lang="ts">
+import { useQuasar } from 'quasar'
+
+const quasar = useQuasar()
+
+console.log(quasar.screen)
+
 useHead({
   titleTemplate: (chunk) => {
     return !chunk || chunk === 'Enderman' ? 'Enderman' : `${chunk} – Enderman`
   },
 })
+
+// animate__animated-sm animate__delay-1-5s animate__fadeInDown
 </script>
 
 <template>
+  <NuxtLoadingIndicator color="purple" />
   <div
     id="ender-layout"
-    class="d-flex flex-column align-items-center pt-sm-5 h-100 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
+    class="d-flex flex-column align-items-center pt-sm-5 h-100"
   >
-    <Card
+    <NuxtLayout name="card">
-      id="pogger"
+      <template #footer>
-      class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-4 gap-sm-2 px-4 pt-4 pb-3"
+        <ClientOnly>
-    />
+          <template #fallback> </template>
+          <Transition
+            appear
+            enter-active-class="animate__animated animate__delay-1s animate__fadeIn"
+            leave-active-class="animate__animated animate__fadeOut"
+            mode="out-in"
+          >
+            <Flooter
+              v-if="
+                quasar.screen.width && quasar.screen.height && quasar.screen.xs
+              "
+              opaque
+            />
+          </Transition>
+        </ClientOnly>
+      </template>
+    </NuxtLayout>
   </div>
 
   <Portal layout="#ender-layout" animate randomize fade />
-  <Footer />
+
+  <Transition
+    appear
+    enter-active-class="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
+    leave-active-class="animate__animated animate__fadeOutDown"
+    mode="out-in"
+  >
+    <Flooter
+      v-if="quasar.screen.width && quasar.screen.height && !quasar.screen.xs"
+      class="floaty mb-2 px-2"
+    />
+  </Transition>
 </template>
 
 <style></style>

assets/styles/main.css

@@ -15696,10 +15696,6 @@ body {
   background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
 }
 
-#pogger {
-  transition: min-height 0.5s linear;
-}
-
 .scrollbar {
   min-height: 128px;
   scrollbar-width: thin;
@@ -15747,6 +15743,16 @@ body {
     background: radial-gradient(circle at left, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
   }
 }
+.floaty {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+}
+
 @media (min-width: 601px) {
   #ender-app {
     height: 100%;
@@ -15759,7 +15765,7 @@ body {
     min-height: fit-content;
     max-height: 90%;
   }
-  .fade-mask {
+  .fade-mask-sm {
     mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
   }
   .rounded-1 {

assets/styles/main.scss

@@ -138,10 +138,6 @@ body {
   );
 }
 
-#pogger {
-  transition: min-height 0.5s linear;
-}
-
 .scrollbar {
   min-height: 128px;
 
@@ -176,9 +172,9 @@ body {
     }
 
     &::-webkit-scrollbar-thumb {
-    border-radius: 8px;
+      border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.2);
-  }
+    }
   }
 
   .background {
@@ -209,6 +205,19 @@ body {
   }
 }
 
+.floaty {
+  position: fixed;
+
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  width: fit-content;
+  height: fit-content;
+
+  margin: auto;
+}
+
 // Dynamic classes.
 @include media-breakpoint-up(sm) {
   #ender-app {
@@ -226,7 +235,7 @@ body {
     max-height: 90%;
   }
 
-  .fade-mask {
+  .fade-mask-sm {
     mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
   }
 

components/Card.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main>
-    <Navigation />
-    <NuxtLoadingIndicator />
-    <NuxtLayout>
-      <NuxtPage
-        class="scrollbar fade-mask overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
-      >
-      </NuxtPage>
-    </NuxtLayout>
-  </main>
-</template>
-
-<style scoped lang="scss"></style>

components/Flooter.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { useRuntimeConfig } from '#imports'
 
+const props = defineProps({
+  opaque: Boolean,
+})
+
 const config = useRuntimeConfig()
 const currentYear = new Date().getFullYear()
 
@@ -12,10 +16,8 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 </script>
 
 <template>
-  <footer
+  <footer class="user-select-none text-align-center line-height-1-5">
-    class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
+    <span class="font-small text-shadow" :class="{ transpaque: !props.opaque }">
-  >
-    <span class="transpaque font-small text-shadow px-2">
       <EMail
         class="link-hi-force-dark"
         address="contact@enderman.ch"
@@ -39,19 +41,6 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 </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;
 

components/Portal.vue

@@ -565,6 +565,10 @@ class Portal {
   resize() {
     if (!this.canvas.full()) this.canvas.fill()
 
+    // Pause the animation if the viewport becomes too small.
+    if (window.innerWidth <= 600) this.pause()
+    else this.continue()
+
     // If we have animation disabled, we still have to re-render the scene once on resize.
     if (!this.animate) requestAnimationFrame(this.render.bind(this))
   }
@@ -611,7 +615,7 @@ onMounted(() => {
   const portal = new Portal(
     props.directory,
     props.create,
-    props.animate && window.innerWidth > 600,
+    props.animate,
     props.randomize,
     props.fade,
     props.speed,

layouts/Card.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main
+    class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
+  >
+    <Navigation />
+    <slot name="header" />
+    <NuxtPage
+      class="scrollbar fade-mask-sm flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
+    />
+    <slot name="footer" />
+  </main>
+</template>
+
+<style scoped lang="scss"></style>

pages/about.vue

@@ -42,10 +42,36 @@ useHead({
 <template>
   <section>
     <h3 class="alex">About me</h3>
+    <hr />
     <p>
-      This page is currently under construction, however, I can tell you I'm
+      <strong>🚧 This page is currently under construction.</strong> Expect a
-      Andrew and I'm {{ age }} years old. The page will be updated as time goes
+      lot more content to be added as time passes.
-      on.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
+    <p>
+      Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
+      Russia. I have been developing software since I was 10 years old, and I
+      have always been interested in technology. I'm a middle-senior C/++
+      developer and a junior full-stack engineer.
+      <sup>1</sup>
+    </p>
+    <p class="font-small">
+      <sup>1</sup>
+      All titles are based on knowledge and confidence, not on official work
+      experience.
+    </p>
+    <p><strong>Here's a little more about myself:</strong></p>
+    <ul>
+      <li>My favorite season is winter.</li>
+      <li>My favorite bands are Black Sabbath, Metallica and Opeth.</li>
+      <li>My favorite field in mathematics is Algebraic Geometry.</li>
+    </ul>
+    <p>
+      I work on all sorts of projects, most of the times simultaneously, which
+      doesn't help with adhering to deadlines at all. However, you can always
+      check them out!
     </p>
   </section>
 </template>

pages/projects.vue

@@ -1,4 +1,34 @@
 <script setup lang="ts">
+// AI-Generated test data.
+const projects = [
+  {
+    name: 'MalwareWatch',
+    description:
+      'A website that tracks malware and ransomware attacks in real time.',
+    url: 'https://malwarewatch.org',
+  },
+  {
+    name: 'You Are an Idiot! (dot cc)',
+    description: 'A recreation of the infamous "You Are an Idiot!" virus.',
+    url: 'https://youareanidiot.cc',
+  },
+  {
+    name: 'HURR-DURR (dot cc)',
+    description: 'A recreation of the infamous "HURR-DURR" virus.',
+    url: 'https://hurr-durr.cc',
+  },
+  {
+    name: 'ClickSword',
+    description: 'A clicker game with a sword theme.',
+    url: 'https://clicksword.org',
+  },
+  {
+    name: 'Windows XP Keygen / UMSKT',
+    description: 'A key generator for Windows XP.',
+    url: 'https://go.enderman.ch/xpkeygen',
+  },
+]
+
 const meta = {
   title: "Enderman's Projects",
   description:
@@ -39,14 +69,26 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Projects</h3>
-    <p>This page is under construction. My current projects are:</p>
+    <hr />
+    <p>
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
+    <p><strong>My current projects are:</strong></p>
     <ul>
-      <li>MalwareWatch</li>
+      <li v-for="(item, index) in projects" :key="index">
-      <li>You Are an Idiot! (dot cc)</li>
+        <a class="link-hi" :href="item.url">
-      <li>HURR-DURR (dot cc)</li>
+          {{ item.name }}
-      <li>ClickSword</li>
+        </a>
-      <li>Windows XP Keygen / UMSKT</li>
+      </li>
     </ul>
+    <p>
+      The list above is not exhaustive and only includes the most recent and the
+      largest projects I remembered while constructing this page.
+    </p>
   </section>
 </template>
 

pages/social.vue

@@ -89,6 +89,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Social media</h3>
+    <hr />
+    <p>
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
     <ul class="list-style-type-none p-0">
       <li v-for="(page, index) in socials" :key="index">
         <div class="d-flex flex-row align-items-center gap-1">

plugins/quasar.client.ts

@@ -0,0 +1,10 @@
+import { Screen } from 'quasar'
+
+export default defineNuxtPlugin(() => {
+  Screen.setSizes({
+    sm: 601,
+    md: 996,
+    lg: 1281,
+    xl: 1921,
+  })
+})