.browserslistrc

@@ -1,5 +1,4 @@
 > 1%
-last 5 major versions
+last 2 versions
 not dead
-not ie <= 11
-not op_mini all
+not ie 11

.stylelintcache

@@ -1 +0,0 @@
-[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\list-types.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Logo.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\LinkButton.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Navigation.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Separator.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\Portal.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"15"},{"size":389,"mtime":1700689887460,"hashOfConfig":"16"},{"size":165,"mtime":1700688268778,"hashOfConfig":"16"},{"size":1113,"mtime":1700251498711,"hashOfConfig":"16"},{"size":986,"mtime":1700324714794,"hashOfConfig":"16"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"16"},{"size":2315,"mtime":1700689012136,"hashOfConfig":"16"},{"size":804,"mtime":1700688952880,"hashOfConfig":"16"},{"size":1183,"mtime":1700689030040,"hashOfConfig":"16"},{"size":300,"mtime":1700689033070,"hashOfConfig":"16"},{"size":1853,"mtime":1700508715727,"hashOfConfig":"16"},{"size":16880,"mtime":1700502035614,"hashOfConfig":"16"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"16"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"16"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"16"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"16"},"5tgxr3"]

.stylelintignore

@@ -1,2 +0,0 @@
-node_modules/
-assets/styles/**/*.css

.stylelintrc.cjs

@@ -1,11 +0,0 @@
-module.exports = {
-  defaultSeverity: 'warning',
-  extends: [
-    'stylelint-config-standard-scss',
-    'stylelint-config-recommended-vue',
-  ],
-  plugins: [],
-  rules: {
-    'declaration-empty-line-before': null,
-  },
-}

app.vue

@@ -17,7 +17,6 @@ useHead({
     class="d-flex flex-column align-items-center pt-sm-5 h-100 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
   >
     <NuxtLayout name="card">
-      <template #header> </template>
       <template #footer>
         <ClientOnly>
           <template #fallback> </template>
@@ -53,3 +52,5 @@ useHead({
     />
   </Transition>
 </template>
+
+<style></style>

assets/styles/main.css

@@ -15570,6 +15570,16 @@ textarea.form-control-lg {
   filter: blur(1em);
 }
 
+.expand-enter-active,
+.expand-leave-active {
+  transition-property: opacity, height;
+}
+
+.expand-enter,
+.expand-leave-to {
+  opacity: 0;
+}
+
 @counter-style do {
   system: fixed;
   symbols: "💻" "📌" "👻" "📷";
@@ -15613,7 +15623,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: white;
-  font-family: Lato, sans-serif;
+  font-family: "Lato", sans-serif;
   font-size: 18px;
   height: 100%;
 }
@@ -15645,7 +15655,7 @@ body {
 }
 
 .alex {
-  font-family: Alexandria, sans-serif;
+  font-family: "Alexandria", sans-serif;
 }
 
 .smooth-glide {
@@ -15766,6 +15776,7 @@ body {
   }
   .animate__animated-sm {
     animation-duration: var(--animate-duration);
+    -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
   .animate__delay-1-5s {

assets/styles/main.scss

@@ -33,18 +33,24 @@ html {
 body {
   display: flex;
   flex-direction: column;
-  background-color: rgb(6 25 28);
+
+  background-color: rgb(6, 25, 28);
   background-image: url('~/assets/images/sky.png');
+
   background-attachment: fixed;
   background-blend-mode: multiply;
   background-size: cover;
   background-repeat: no-repeat;
+
   image-rendering: pixelated;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
   color: white;
-  font-family: Lato, sans-serif;
+  font-family: 'Lato', sans-serif;
+
   font-size: 18px;
+
   height: 100%;
 }
 
@@ -77,7 +83,7 @@ body {
 }
 
 .alex {
-  font-family: Alexandria, sans-serif;
+  font-family: 'Alexandria', sans-serif;
 }
 
 .smooth-glide {
@@ -86,7 +92,7 @@ body {
 
 // Query-overridable classes.
 .background {
-  background-color: rgb(0 0 0 / 50%);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .dimensions {
@@ -105,7 +111,6 @@ body {
 
   &-hi {
     @extend .link;
-
     color: cornflowerblue;
 
     &:hover {
@@ -127,16 +132,17 @@ body {
 .radial-gradient {
   background: radial-gradient(
     circle at left,
-    rgb(255 255 255 / 80%),
-    rgb(255 255 255 / 75%),
-    rgb(255 255 255 / 0%)
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.75),
+    rgba(255, 255, 255, 0)
   );
 }
 
 .scrollbar {
   min-height: 128px;
+
   scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
 
   &::-webkit-scrollbar {
     width: 8px;
@@ -144,12 +150,12 @@ body {
 
   &::-webkit-scrollbar-track {
     border-radius: 8px;
-    background-color: rgb(0 0 0 / 20%);
+    background-color: rgba(0, 0, 0, 0.2);
   }
 
   &::-webkit-scrollbar-thumb {
     border-radius: 8px;
-    background-color: rgb(255 255 255 / 15%);
+    background-color: rgba(255, 255, 255, 0.15);
   }
 }
 
@@ -159,20 +165,20 @@ body {
   }
 
   .scrollbar {
-    scrollbar-color: rgb(0 0 0 / 20%) rgb(255 255 255 / 20%);
+    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
 
     &::-webkit-scrollbar-track {
-      background-color: rgb(255 255 255 / 20%);
+      background-color: rgba(255, 255, 255, 0.2);
     }
 
     &::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      background-color: rgb(0 0 0 / 20%);
+      background-color: rgba(0, 0, 0, 0.2);
     }
   }
 
   .background {
-    background-color: rgb(255 255 255 / 80%);
+    background-color: rgba(255, 255, 255, 0.8);
   }
 
   .link {
@@ -192,20 +198,23 @@ body {
   .radial-gradient {
     background: radial-gradient(
       circle at left,
-      rgb(0 0 0 / 95%),
-      rgb(0 0 0 / 80%),
-      rgb(0 0 0 / 0%)
+      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;
 }
 
@@ -222,11 +231,12 @@ body {
   .dimensions {
     width: 80%;
     min-height: fit-content;
+
     max-height: 90%;
   }
 
   .fade-mask-sm {
-    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
+    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));
   }
 
   .rounded-1 {
@@ -239,6 +249,7 @@ body {
 
   .animate__animated-sm {
     animation-duration: var(--animate-duration);
+    -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
 

assets/styles/scrollbar.css

@@ -0,0 +1,14 @@
+body::-webkit-scrollbar {
+  width: 1em;
+}
+
+body::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
+
+/*# sourceMappingURL=scrollbar.css.map */

assets/styles/scrollbar.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scrollbar.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;;;AAGJ;EACE;EACA","file":"scrollbar.css"}

assets/styles/transitions.scss

@@ -10,3 +10,13 @@
     filter: blur(1em);
   }
 }
+
+.expand-enter-active,
+.expand-leave-active {
+  transition-property: opacity, height;
+}
+
+.expand-enter,
+.expand-leave-to {
+  opacity: 0;
+}

components/EMail.vue

@@ -39,3 +39,5 @@ const href =
     </slot>
   </a>
 </template>
+
+<style scoped lang="scss"></style>

components/Flooter.vue

@@ -17,10 +17,7 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
 
 <template>
   <footer class="user-select-none text-align-center line-height-1-5">
-    <span
-      class="font-small"
-      :class="{ transpaque: !props.opaque, 'text-shadow': !props.opaque }"
-    >
+    <span class="font-small text-shadow" :class="{ transpaque: !props.opaque }">
       <EMail
         class="link-hi-force-dark"
         address="contact@enderman.ch"

components/Navigation.vue

@@ -10,7 +10,6 @@ import socialIcon from '~/assets/images/icons/user.png'
 const pageStore = usePageStore()
 const { pages } = storeToRefs(pageStore)
 
-const links = toRaw(pages.value).filter((page) => page.path !== '/')
 const icons = [aboutIcon, projectIcon, socialIcon]
 </script>
 
@@ -27,7 +26,7 @@ const icons = [aboutIcon, projectIcon, socialIcon]
     <ul
       class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
     >
-      <li v-for="(page, index) in links" :key="index" class="nav-item">
+      <li v-for="(page, index) in pages" :key="index" class="nav-item">
         <LinkButton
           :path="page.path"
           :name="page.name"
@@ -38,3 +37,5 @@ const icons = [aboutIcon, projectIcon, socialIcon]
     </ul>
   </nav>
 </template>
+
+<style scoped lang="scss"></style>

components/Separator.vue

@@ -17,3 +17,5 @@ const props = defineProps({
     :style="{ height: props.height + 'px' }"
   />
 </template>
+
+<style scoped lang="scss"></style>

layouts/Card.vue

@@ -1,53 +1,7 @@
-<script setup lang="ts">
-import type { UseSwipeDirection } from '@vueuse/core'
-import { useSwipe } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { usePageStore } from '~/stores/pages'
-
-const router = useRouter()
-const route = useRoute()
-const card = ref<HTMLElement | null>(null)
-
-const pageStore = usePageStore()
-const { pages } = storeToRefs(pageStore)
-
-const swipe = useSwipe(card, {
-  passive: true,
-  onSwipe: (touch: TouchEvent) => {
-    console.log(card.value?.offsetWidth, swipe.lengthX.value)
-  },
-  onSwipeEnd: (touch: TouchEvent, direction: UseSwipeDirection) => {
-    const currentPage = pages.value.find(
-      (page) => page.path === route.fullPath,
-    )!
-
-    const currentIndex = pages.value.indexOf(currentPage)
-
-    if (
-      card.value?.offsetWidth &&
-      Math.abs(swipe.lengthX.value) / card.value?.offsetWidth >= 0.5
-    ) {
-      if (swipe.lengthX.value > 0) {
-        router.push(
-          toRaw(pages.value)[
-            currentIndex - 1 < 0
-              ? pages.value.length - (currentIndex + 1)
-              : currentIndex - 1
-          ].path,
-        )
-      } else {
-        router.push(
-          toRaw(pages.value)[(currentIndex + 1) % pages.value.length].path,
-        )
-      }
-    }
-  },
-})
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <main
-    ref="card"
     class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
   >
     <Navigation />
@@ -58,3 +12,5 @@ const swipe = useSwipe(card, {
     <slot name="footer" />
   </main>
 </template>
+
+<style scoped lang="scss"></style>

nuxt.config.ts

@@ -41,7 +41,7 @@ export default defineNuxtConfig({
     ],
   },
   css: [
-    '~/assets/styles/main.min.css',
+    '~/assets/styles/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css',
   ],
   plugins: [],
@@ -51,7 +51,6 @@ export default defineNuxtConfig({
     '@nuxtjs/eslint-module',
     '@pinia/nuxt',
     'nuxt-quasar-ui',
-    '@nuxtjs/stylelint-module',
   ],
   quasar: {
     lang: 'en-US',

package.json

@@ -19,10 +19,8 @@
     "@nuxt/types": "^2.17.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/eslint-module": "^4.1.0",
-    "@nuxtjs/stylelint-module": "^5.1.0",
     "@pinia/nuxt": "^0.5.1",
     "@typescript-eslint/parser": "^6.10.0",
-    "csso": "^5.0.5",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-nuxt": "^4.0.0",
@@ -32,9 +30,6 @@
     "nuxt-quasar-ui": "^2.0.6",
     "prettier": "^3.0.3",
     "sass": "^1.69.5",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^11.1.0",
     "typescript": "^5.2.2",
     "vite-plugin-require": "^0.0.3",
     "vue": "^3.3.8",
@@ -55,10 +50,9 @@
     "@quasar/extras": "^1.16.8",
     "animate.css": "^4.1.1",
     "bootstrap": "^5.3.2",
-    "caniuse-lite": "^1.0.30001564",
     "humps": "^2.0.1",
     "pinia": "^2.1.7",
     "quasar": "^2.14.0"
   },
-  "version": "0.1.1"
+  "version": "0.1.0"
 }

pages/about.vue

@@ -52,9 +52,9 @@ useHead({
     <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, and I have always
-      been interested in technology. I'm a middle-senior C/++ developer and a
-      junior full-stack engineer.
+      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">
@@ -75,3 +75,5 @@ useHead({
     </p>
   </section>
 </template>
+
+<style scoped lang="scss"></style>

pages/index.vue

@@ -99,3 +99,5 @@ useHead({
     </p>
   </section>
 </template>
+
+<style scoped lang="scss"></style>

pages/projects.vue

@@ -91,3 +91,5 @@ useHead({
     </p>
   </section>
 </template>
+
+<style scoped lang="scss"></style>

pages/social.vue

@@ -88,7 +88,7 @@ useHead({
 
 <template>
   <section>
-    <h3 class="alex">Online presence</h3>
+    <h3 class="alex">Social media</h3>
     <hr />
     <p>
       <strong>🚧 This page is currently under construction.</strong> Expect a
@@ -97,43 +97,30 @@ useHead({
       I will make sure to sand them down.
     </p>
     <hr />
-    <div class="row">
-      <div class="col-12 col-md-3">
-        <h5 class="alex">Social media</h5>
-        <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">
-              <ClientOnly>
-                <FontAwesomeIcon
-                  :icon="`fa-brands fa-${page.icon}`"
-                  fixed-width
-                />
-              </ClientOnly>
-              <a
-                class="link-hi"
-                target="_blank"
-                rel="noopener"
-                :href="page.url"
-              >
-                {{ page.name }}
-              </a>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="col-12 col-md-9">
-        <h5 class="alex">Contact me</h5>
-        <p>
-          Personal:
-          <EMail
-            class="link-hi"
-            address="contact@enderman.ch"
-            subject="Hey Enderman!"
-          /><br />
-          Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
-          Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
-        </p>
-      </div>
-    </div>
+    <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">
+          <ClientOnly>
+            <FontAwesomeIcon :icon="`fa-brands fa-${page.icon}`" fixed-width />
+          </ClientOnly>
+          <a class="link-hi" target="_blank" rel="noopener" :href="page.url">
+            {{ page.name }}
+          </a>
+        </div>
+      </li>
+    </ul>
+    <h3 class="alex">Contact me</h3>
+    <p>
+      Personal:
+      <EMail
+        class="link-hi"
+        address="contact@enderman.ch"
+        subject="Hey Enderman!"
+      /><br />
+      Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
+      Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
+    </p>
   </section>
 </template>
+
+<style scoped lang="scss"></style>

stores/pages.ts

@@ -7,10 +7,6 @@ export const usePageStore = defineStore('page', () => {
     'endermanch, enderman, developer, youtuber, filmmaker, artist, engineer'
 
   const pages = ref([
-    {
-      name: 'Home',
-      path: '/',
-    },
     {
       name: 'About',
       path: '/about',
@@ -30,12 +26,13 @@ export const usePageStore = defineStore('page', () => {
 
     useRouter()
       .getRoutes()
-      .forEach((route) =>
-        pages.value.push({
-          name: route.path.slice(1)[0].toUpperCase() + route.path.slice(2),
-          path: route.path,
-        }),
-      )
+      .forEach((route) => {
+        if (route.path !== '/')
+          pages.value.push({
+            name: route.path.slice(1)[0].toUpperCase() + route.path.slice(2),
+            path: route.path,
+          })
+      })
   }
 
   return {