Significant reorganization (into src folder)

nuxt.config.js

@@ -1,10 +1,13 @@
 export default {
   // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
+  rootDir: "./",
+  srcDir: "src",
+  target: "static",
+  ssr: true,
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: process.env.GITHUB_USERNAME,
+    titleTemplate: `%s - Michael Thomas`,
     htmlAttrs: {
       lang: 'en'
     },
@@ -31,7 +34,9 @@ export default {
     ]
   },
 
-  css: [],
+  css: [
+    "@/assets/styles/root"
+  ],
 
   plugins: [
     "@/plugins/util",

package.json

@@ -31,9 +31,11 @@
     "eslint-plugin-nuxt": "^3.1.0",
     "eslint-plugin-vue": "^8.2.0",
     "module-exists": "^0.4.0",
+    "node-sass": "^6.0.0",
     "postcss": "^8.4.4",
     "prettier": "^2.5.1",
     "raw-loader": "^4.0.2",
+    "sass-loader": "^10.1.1",
     "vue-notion": "^1.3.0"
   }
 }

src/assets/styles/root.scss

@@ -0,0 +1 @@
+@import "transitions.scss";

src/assets/styles/transitions.scss

@@ -0,0 +1,43 @@
+/* Page and layout enter/leave transition */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.25s;
+}
+
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transition */
+.slide-enter-active,
+.slide-leave-enter {
+  transform: translateY(0);
+  transition: all 0.3s linear;
+}
+.slide-enter,
+.slide-leave-to {
+  transform: translateY(100%);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-enter {
+  transform: translateX(0);
+  transition: transform 0.2s;
+}
+.slide-left-enter,
+.slide-left-leave-to {
+  transform: translateX(100%);
+  transition: transform 0.2s;
+}

src/components/Author/Profile.vue

@@ -15,6 +15,8 @@
         </div>
     </div>
 
-
+    <div class="rounded-full h-40 mb-4 w-40 md:mb-0">
+      <img src="~/assets/images/avatar.png" class="rounded-full h-40 w-40" />
+    </div>
   </header>
 </template>

src/components/Header.vue

@@ -35,7 +35,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .mobile-link {
   @apply block px-3 py-2 text-lg text-gray-900 rounded-md text-white font-medium text-center;
 }