Upgrade to Nuxt 3.12, simplify logic

.stylelintcache

@@ -1 +1 @@
-[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1147,"mtime":1708248797872,"hashOfConfig":"24"},{"size":979,"mtime":1706003786966,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"24"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"24"},{"size":983,"mtime":1708206997656,"hashOfConfig":"24"},{"size":1912,"mtime":1708290866348,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"24"},{"size":1645,"mtime":1708450985689,"hashOfConfig":"24"},"5tgxr3","1nljphs","1lk8nat"]
+[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1005,"mtime":1718446378238,"hashOfConfig":"24"},{"size":961,"mtime":1718445804903,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"26"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"26"},{"size":983,"mtime":1708206997656,"hashOfConfig":"26"},{"size":1895,"mtime":1718444102273,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"26"},{"size":1673,"mtime":1718386852848,"hashOfConfig":"24"},"5tgxr3","lsooul","1lk8nat","1nljphs"]

app.vue

@@ -27,8 +27,8 @@ useHead({
   >
     <div
       id="ender-layout"
-      class="p-animated d-flex flex-column align-items-center h-100"
+      class="p-animated flex flex-col items-center h-full"
-      :class="{ 'pt-sm-5': !reader }"
+      :class="{ 'sm:pt-8': !reader }"
     >
       <AClientOnly appear mode="out-in">
         <SwipeControls v-if="vdisp.xs" />
@@ -57,12 +57,12 @@ useHead({
       enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
       leave="animate__animated animate__fadeOutDown"
     >
-      <Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-2 px-2" />
+      <Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-4 px-2" />
     </AClientOnly>
 
     <ClientOnly>
       <template #fallback> </template>
-      <Portal layout="#ender-layout" animate randomize fade />
+      <LazyPortal layout="#ender-layout" animate randomize fade />
     </ClientOnly>
   </VThemeProvider>
 </template>

assets/styles/layers.scss

@@ -0,0 +1 @@
+@layer base, vuetify, overrides

assets/styles/main.scss

@@ -1,14 +1,3 @@
-// Libraries.
-@use 'bootstrap' with (
-  $grid-breakpoints: (
-    xs: 0,
-    sm: 601px,
-    md: 961px,
-    lg: 1281px,
-    xl: 1921px,
-    xxl: 2561px
-  )
-);
 @use 'animate.css';
 
 // Modules.
@@ -20,15 +9,12 @@
   --animate-duration: 1s;
   --animate-delay: 0.75s;
   --animate-repeat: 1;
-  --bs-font-sans-serif: 'Lato', 'Times New Roman';
-  --bs-font-monospace: 'JetBrains Mono', 'Courier New';
-  --bs-body-font-size: 20px;
-  --bs-body-line-height: 1.5;
 }
 
 // The HTML page.
 html {
   height: 100%;
+  font-size: 14px;
 }
 
 // The body element.
@@ -54,6 +40,49 @@ body {
   height: 100%;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  @apply font-serif;
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  @apply text-inherit no-underline transition-all;
+
+  color: cornflowerblue;
+
+  &:hover {
+    color: royalblue;
+  }
+}
+
+ul {
+  padding-left: 1.5em;
+}
+
 // Entry point (Vue mount).
 #ender-app {
   flex: 1 1 0;
@@ -61,10 +90,6 @@ body {
 }
 
 // Helper classes that don't exist in Bootstrap.
-.mh-0 {
-  max-height: 100% !important;
-}
-
 .inline {
   display: inline;
 }
@@ -143,7 +168,7 @@ body {
   min-height: 100%;
 }
 
-.separator {
+.accent {
   color: white;
 }
 
@@ -183,41 +208,23 @@ body {
   }
 }
 
-%link {
+%transition {
-  color: inherit;
-  text-decoration: none;
   transition: 0.3s ease;
 }
 
 .link {
-  @extend %link;
+  &-hi-force-dark {
-
+    @apply text-inherit no-underline transition-all;
-  &:hover {
-    color: cornflowerblue;
-  }
-
-  &-hi {
-    @extend %link;
 
     color: cornflowerblue;
 
     &:hover {
       color: royalblue;
     }
-
-    &-force-dark {
-      @extend %link;
-
-      color: cornflowerblue;
-
-      &:hover {
-        color: royalblue;
-      }
-    }
   }
 }
 
-.radial-gradient {
+.accent-gradient {
   background: radial-gradient(
     circle at left,
     rgb(255 255 255 / 80%),
@@ -272,25 +279,19 @@ body {
     background-color: rgb(255 255 255 / 80%);
   }
 
-  .link {
+  a {
+    color: royalblue;
+
     &:hover {
-      color: royalblue;
+      color: darkblue;
-    }
-
-    &-hi {
-      color: royalblue;
-
-      &:hover {
-        color: darkblue;
-      }
     }
   }
 
-  .separator {
+  .accent {
     color: black;
   }
 
-  .radial-gradient {
+  .accent-gradient {
     background: radial-gradient(
       circle at left,
       rgb(0 0 0 / 95%),
@@ -422,7 +423,7 @@ body {
 
     :is(p, li) {
       a {
-        @extend %link;
+        @apply text-inherit no-underline transition-all;
 
         color: cornflowerblue;
 
@@ -452,7 +453,7 @@ body {
       font-weight: 700;
 
       a {
-        @extend %link;
+        @apply text-inherit no-underline transition-all;
 
         &:hover {
           color: indianred;
@@ -549,7 +550,11 @@ body {
 }
 
 // Dynamic classes.
-@include bootstrap.media-breakpoint-up(sm) {
+@screen sm {
+  html {
+    font-size: 16px;
+  }
+
   #ender-app {
     height: 100%;
   }
@@ -586,7 +591,12 @@ body {
   }
 }
 
-@include bootstrap.media-breakpoint-up(md) {
+@screen md {
+  html {
+    font-size: 18px;
+  }
+
+
   .post {
     &-box {
       padding-bottom: 0.6942rem;
@@ -623,19 +633,23 @@ body {
   }
 }
 
-@include bootstrap.media-breakpoint-up(lg) {
+@screen lg {
+  html {
+    font-size: 20px;
+  }
+
   .dimensions {
     width: 75%;
   }
 }
 
-@include bootstrap.media-breakpoint-up(xl) {
+@screen xl {
   .dimensions {
     width: 60%;
   }
 }
 
-@include bootstrap.media-breakpoint-up(xxl) {
+@screen 2xl {
   .dimensions {
     width: 50%;
   }

assets/styles/vuetify.scss

@@ -1,6 +1,6 @@
-@use 'vuetify/settings' with (
+@forward 'vuetify/settings' with (
   $utilities: false,
   $color-pack: false,
-
+  $reset: false,
-  $button-banner-actions-padding: 0 69px,
+  $layers: true,
 );

components/animations/NotFound.vue

@@ -48,7 +48,8 @@ onMounted(() => setTimeout(type, 1500))
 <template>
   <section>
     <h3 class="alex">Page not found!</h3>
-    <pre class="pre-wrap">{{ buffer }}<span class="blinker">&#9610;</span></pre>
+    <pre
+      class="whitespace-pre-wrap break-keep">{{ buffer }}<span class="blinker">&#9610;</span></pre>
   </section>
 </template>
 

components/blocks/Logo.vue

@@ -28,36 +28,33 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="d-flex flex-row justify-content-sm-center">
+  <NuxtLink
-    <NuxtLink
+    class="flex flex-row items-center text-inherit hover:text-inherit select-none sm:m-auto lg:m-0"
-      class="no-decoration logo d-flex flex-row align-items-center user-select-none"
+    to="/"
-      to="/"
+  >
-    >
+    <img
-      <img
+      draggable="false"
-        class="logo-image"
+      :width="props.width"
-        draggable="false"
+      :height="props.height"
-        :width="props.width"
+      :src="props.src"
-        :height="props.height"
+      :alt="props.alt"
-        :src="props.src"
+    />
-        :alt="props.alt"
+    <div>
-      />
+      <h2>{{ props.title }}</h2>
-      <div>
+      <hr class="accent accent-gradient border-0 h-px" />
-        <h1 class="alex mb-0">{{ props.title }}</h1>
+      <p>{{ props.description }}</p>
-        <Separator class="m-0" />
+    </div>
-        <p class="mb-0">{{ props.description }}</p>
+  </NuxtLink>
-      </div>
-    </NuxtLink>
-  </div>
 </template>
 
 <style scoped lang="scss">
-.logo {
+a {
-  > img.logo-image {
+  > img {
     transition: ease 0.3s;
   }
 
   &:hover {
-    > img.logo-image {
+    > img {
       transform: scale(105%);
     }
   }

components/blocks/Navigation.vue

@@ -12,7 +12,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
 
 <template>
   <nav
-    class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
+    class="flex flex-row flex-wrap sm:flex-col lg:flex-row justify-around sm:justify-start lg:justify-between gap-2 lg:gap-3"
   >
     <Logo
       :src="logo"
@@ -21,7 +21,7 @@ const links = toRaw(pages.value).filter((page) => page.path !== '/')
       description="official website"
     />
     <ul
-      class="navbar-nav flex-row flex-wrap 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"
+      class="flex flex-row flex-wrap items-center sm:items-start lg:items-center justify-center gap-3 m-2 sm:m-0 lg:mx-2 sm:my-2 lg:my-0"
     >
       <li v-for="(page, index) in links" :key="index" class="nav-item">
         <Route

components/blocks/Route.vue

@@ -22,8 +22,8 @@ const props = defineProps({
 
 <template>
   <NuxtLink
-    class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
+    class="flex flex-row items-center gap-2 select-none no-decoration"
-    active-class="icon-active px-sm-3"
+    active-class="icon-active sm:px-3"
     :to="!props.external ? props.path : undefined"
     :href="props.external ? props.path : undefined"
   >

components/blocks/Separator.vue

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

components/content/Card.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 })
 
 let cardIcon = warningIcon
-let color = 'rgba(255 246 147 / 60%)'
+let color = 'rgb(255 246 147 / 60%)'
 
 switch (props.icon) {
   case 'error':
@@ -44,13 +44,13 @@ switch (props.icon) {
 
   case 'checkmark':
     cardIcon = checkIcon
-    color = 'rgba(69 255 255 / 60%)'
+    color = 'rgb(69 255 255 / 60%)'
 
     break
 
   case 'idea':
     cardIcon = ideaIcon
-    color = 'rgba(255 255 255 / 60%)'
+    color = 'rgb(255 255 255 / 60%)'
 
     break
 
@@ -61,9 +61,7 @@ switch (props.icon) {
 </script>
 
 <template>
-  <div
+  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
-    class="tilt d-flex flex-row align-items-center gap-2 mb-0 mb-sm-2 mb-md-4"
-  >
     <img
       draggable="false"
       :src="cardIcon"
@@ -72,7 +70,7 @@ switch (props.icon) {
     />
     <h3 class="mb-0 nobr">{{ props.title }}</h3>
   </div>
-  <div class="box p-4 rounded-4 mb-4">
+  <div class="box p-4 rounded-xl mb-4">
     <slot />
   </div>
 </template>

content/blog/the-windows-oobe.md

@@ -1,6 +1,6 @@
 ---
 title: The hidden features of the Windows OOBE
-description: The Windows 11 OOBE is a mess, but it's excellent for bulk deployment has some hidden features and customization options!
+description: The Windows 11 OOBE is a mess, but it's excellent for bulk deployment and has some hidden features and customization options!
 authors: ['Enderman']
 created: 2024-03-01T23:30:10Z
 updated: 2024-03-02T15:10:58Z

layouts/Card.vue

@@ -41,17 +41,17 @@ const swipe = useSwipe(card, {
 <template>
   <main
     ref="card"
-    class="dimensions background h-animated overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
+    class="dimensions background h-animated overflow-auto flex flex-col gap-3 sm:gap-2 px-4 pt-4 pb-3"
     :class="{
-      'rounded-1-sm': !reader,
+      'sm:rounded-xl': !reader,
-      'mh-0 h-100': reader,
+      '!max-h-full h-full': reader,
     }"
   >
     <Options />
     <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"
+      class="scrollbar fade-mask-sm flex-grow overflow-x-hidden overflow-y-auto min-h-full sm:py-4 sm:pe-3"
     />
     <slot name="footer" />
   </main>

nuxt.config.ts

@@ -31,6 +31,9 @@ export default defineNuxtConfig({
     pageTransition: { name: 'page', mode: 'out-in' },
     rootId: 'ender-app',
   },
+  devtools: {
+    enabled: true,
+  },
   features: {
     inlineStyles: false,
   },
@@ -54,12 +57,9 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@nuxt/content',
     'vuetify-nuxt-module',
+    '@nuxtjs/seo',
     '@nuxtjs/google-fonts',
-    'nuxt-site-config',
+    '@nuxtjs/tailwindcss',
-    'nuxt-simple-sitemap',
-    'nuxt-simple-robots',
-    'nuxt-og-image',
-    'nuxt-link-checker',
   ],
   content: {
     markdown: {
@@ -224,6 +224,9 @@ export default defineNuxtConfig({
     blockNonSeoBots: true,
     credits: false,
   },
+  tailwindcss: {
+    exposeConfig: true,
+  },
   typescript: {
     typeCheck: true,
   },

package.json

@@ -15,45 +15,43 @@
     "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.11.0",
+    "@nuxt/content": "^2.12.1",
-    "@nuxt/devtools": "^1.0.8",
+    "@nuxt/devtools": "^1.3.3",
     "@nuxt/types": "^2.17.3",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/eslint-module": "^4.1.0",
-    "@nuxtjs/google-fonts": "^3.1.3",
+    "@nuxtjs/google-fonts": "^3.2.0",
+    "@nuxtjs/seo": "^2.0.0-rc.10",
     "@nuxtjs/stylelint-module": "^5.2.0",
+    "@nuxtjs/tailwindcss": "^6.12.0",
     "@pinia/nuxt": "^0.5.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@tailwindcss/typography": "^0.5.13",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "animate.css": "latest",
-    "bootstrap": "^5.3.2",
+    "caniuse-lite": "^1.0.30001634",
-    "caniuse-lite": "^1.0.30001580",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "iconify-icon": "^1.0.8",
-    "nuxt": "^3.10.2",
+    "nuxt": "^3.12.1",
-    "nuxt-link-checker": "^3.0.0-rc.6",
-    "nuxt-og-image": "^3.0.0-rc.29",
-    "nuxt-simple-robots": "^4.0.0-rc.13",
-    "nuxt-simple-sitemap": "^4.4.1",
-    "nuxt-site-config": "^2.2.8",
     "pinia": "^2.1.7",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.2",
-    "sass": "^1.70.0",
+    "sass": "^1.77.5",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.6.1",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
-    "vue": "^3.4.15",
+    "vue": "^3.4.28",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.3.3",
-    "vue-tsc": "^1.8.27",
+    "vue-tsc": "^1.8.22",
-    "vuetify": "^3.5.1",
+    "vuetify": "^3.6.9",
-    "vuetify-nuxt-module": "^0.10.2"
+    "vuetify-nuxt-module": "^0.14.1"
   },
   "dependencies": {
     "@date-io/date-fns": "^3.0.0",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "remark-reading-time": "^2.0.1"
   }
 }

pages/about.vue

@@ -42,15 +42,15 @@ useHead({
 
 <template>
   <section>
-    <h3 class="alex">About me</h3>
+    <h4>About me</h4>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <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>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <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

pages/blog/[slug].vue

@@ -127,7 +127,7 @@ useHead({
 <template>
   <article
     v-if="data"
-    class="post scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
+    class="post scrollbar fade-mask-sm flex flex-col gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-3"
   >
     <div
       class="post-preamble"
@@ -135,14 +135,14 @@ useHead({
     >
       <div class="p-2">
         <h3 class="alex">{{ data.title }}</h3>
-        <div class="d-flex flex-row row-gap-0 column-gap-2 flex-wrap">
+        <div class="flex flex-row gap-x-0 gap-y-2 flex-wrap">
-          <div class="d-flex flex-row gap-1 align-items-center">
+          <div class="flex flex-row items-center gap-1">
             <iconify-icon icon="mdi:calendar" />
             <strong class="nobr font-small">
               {{ formatDate(data.created, 'LLLL do, y &ndash; HH:mm') }}
             </strong>
           </div>
-          <div class="d-flex flex-row gap-1 align-items-center">
+          <div class="flex flex-row items-center gap-1">
             <iconify-icon icon="mdi:clock-outline" />
             <strong class="nobr font-small">
               {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
@@ -162,7 +162,7 @@ useHead({
       </NuxtLink>
     </div>
     <div class="post-content">
-      <Separator class="mt-0" />
+      <hr class="accent accent-gradient border-0 h-px" />
       <ContentRenderer :value="data" />
     </div>
   </article>

pages/blog/index.vue

@@ -56,7 +56,7 @@ useHead({
       }"
     >
       <template #default="{ list }">
-        <div class="d-grid gap-3">
+        <div class="grid gap-3">
           <NuxtLink
             v-for="post in list"
             :key="post._path"
@@ -64,7 +64,7 @@ useHead({
             class="no-decoration"
           >
             <article
-              class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
+              class="post-box flex flex-col md:flex-row gap-3 rounded-xl h-full"
             >
               <div class="post-thumb">
                 <img
@@ -74,14 +74,14 @@ useHead({
                     `/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
                   "
                   :alt="post.title"
-                  class="rounded-4"
+                  class="rounded-xl"
                 />
               </div>
-              <div class="w-100">
+              <div class="w-full">
                 <h3 class="post-title alex">{{ post.title }}</h3>
                 <p class="post-description mb-0">{{ post.description }}</p>
 
-                <div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
+                <div class="post-tags flex flex-row flex-wrap gap-2 py-2">
                   <span
                     v-for="(tag, index) in post.tags.slice(0, 3)"
                     :key="index"
@@ -94,10 +94,10 @@ useHead({
                   </span>
                 </div>
 
-                <Separator class="m-0" />
+                <hr class="accent accent-gradient border-0 h-px" />
 
                 <div class="post-details py-2">
-                  <div class="d-flex flex-row gap-1 align-items-center">
+                  <div class="flex flex-row items-center gap-1">
                     <iconify-icon icon="mdi:calendar" />
                     <small class="nobr">
                       {{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
@@ -105,7 +105,7 @@ useHead({
                   </div>
                   <div
                     v-if="post.updated"
-                    class="d-flex flex-row gap-1 align-items-center"
+                    class="flex flex-row items-center gap-1"
                   >
                     <iconify-icon icon="mdi:pencil" />
                     <small class="nobr">
@@ -115,9 +115,7 @@ useHead({
                 </div>
               </div>
 
-              <div
+              <div class="post-pocket flex flex-row items-center gap-1 p-2">
-                class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
-              >
                 <iconify-icon icon="mdi:clock-outline" />
                 <small class="nobr font-monospace font-small">
                   {{ post.readingTime.text }}
@@ -129,9 +127,7 @@ useHead({
       </template>
 
       <template #not-found>
-        <div
+        <div class="flex flex-col justify-center items-center gap-3">
-          class="d-flex flex-column justify-content-center align-items-center gap-3"
-        >
           <span>No posts found 🙁</span>
           <NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
         </div>

pages/index.vue

@@ -47,19 +47,19 @@ defineRouteRules({
 
 <template>
   <section>
-    <h3 class="alex">Welcome 👋</h3>
+    <h3>Welcome 👋</h3>
-    <p>
+    <p class="mb-4">
       I'm <strong>Enderman</strong> &ndash; a software engineer, a malware
       enthusiast and most importantly, a weird tall creature. I have over 300K
-      subscribers on
+      subscribers on <a :href="`${config.shortener}/youtube`">YouTube</a> and
-      <a class="link-hi" :href="`${config.shortener}/youtube`">YouTube</a> and
+      over 25K followers on
-      over 20K followers on
+      <a class="text-inherit no-underline" :href="`${config.shortener}/twitter`"
-      <a class="link-hi" :href="`${config.shortener}/twitter`">Twitter</a>.
+        >Twitter</a
-      Sometimes I wish there were 48 hours in a day.
+      >. Sometimes I wish there were 48 hours in a day.
     </p>
-    <div class="row g-3">
+    <div class="flex flex-col md:flex-row gap-3 mb-4">
-      <div class="col-12 col-md-8">
+      <div class="md:basis-0 md:flex-grow-[2]">
-        <h5 class="alex">What I do</h5>
+        <h6>What I do</h6>
         <ul class="list-style-type-do">
           <li>
             I develop cross-platform software. My language of choice is usually
@@ -85,8 +85,8 @@ defineRouteRules({
           <li>I make videos for you to enjoy!</li>
         </ul>
       </div>
-      <div class="col-12 col-md-4">
+      <div class="md:basis-0 md:flex-grow-[1]">
-        <h5 class="alex">What I enjoy</h5>
+        <h6>What I enjoy</h6>
         <ul class="list-style-type-enjoy">
           <li>Teaching</li>
           <li>Mathematics</li>

pages/projects.vue

@@ -69,14 +69,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Projects</h3>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <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>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <p><strong>My current projects are:</strong></p>
     <ul>
       <li v-for="(item, index) in projects" :key="index">

pages/social.vue

@@ -117,14 +117,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Online presence</h3>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <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>
-    <Separator />
+    <hr class="accent accent-gradient border-0 h-px" />
     <div class="row">
       <div class="col-12 col-md-3">
         <h5 class="alex">Social media</h5>

tailwind.config.ts

@@ -0,0 +1,49 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      screens: {
+        sm: '600px',
+        md: '960px',
+        lg: '1280px',
+        xl: '1920px',
+        '2xl': '2560px',
+
+        desktop: '960px',
+      },
+      fontFamily: {
+        sans: [
+          'Lato',
+          'ui-sans-serif',
+          'system-ui',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+        serif: [
+          'Alexandria',
+          'ui-serif',
+          'Georgia',
+          'Times New Roman',
+          'serif',
+        ],
+        mono: [
+          'JetBrains Mono',
+          'Consolas',
+          'Courier New',
+          'ui-monospace',
+          'monospace',
+        ],
+        alex: ['Alexandria', 'serif'],
+        lato: ['Lato', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    // ...
+  ],
+}