Conditional rendering, pages updated
This commit is contained in:
parent
a39ad3b464
commit
0cdee66c1d
46
app.vue
46
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
|
||||
id="pogger"
|
||||
class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-4 gap-sm-2 px-4 pt-4 pb-3"
|
||||
<NuxtLayout name="card">
|
||||
<template #footer>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -138,10 +138,6 @@ body {
|
|||
);
|
||||
}
|
||||
|
||||
#pogger {
|
||||
transition: min-height 0.5s linear;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
min-height: 128px;
|
||||
|
||||
|
|
@ -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));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
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="transpaque font-small text-shadow px-2">
|
||||
<footer class="user-select-none text-align-center line-height-1-5">
|
||||
<span class="font-small text-shadow" :class="{ transpaque: !props.opaque }">
|
||||
<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;
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
Andrew and I'm {{ age }} years old. The page will be updated as time goes
|
||||
on.
|
||||
<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>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>You Are an Idiot! (dot cc)</li>
|
||||
<li>HURR-DURR (dot cc)</li>
|
||||
<li>ClickSword</li>
|
||||
<li>Windows XP Keygen / UMSKT</li>
|
||||
<li v-for="(item, index) in projects" :key="index">
|
||||
<a class="link-hi" :href="item.url">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { Screen } from 'quasar'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
Screen.setSizes({
|
||||
sm: 601,
|
||||
md: 996,
|
||||
lg: 1281,
|
||||
xl: 1921,
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue