iamge cmopression and a few small tweaks

assets/css/main.css

@@ -14,7 +14,7 @@ body {
 
 header,
 .blur-background::before {
-	background-image: url(~/assets/pictues/header.min.jpg);
+	background-image: url(~/assets/images/header.jpg);
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
@@ -33,7 +33,7 @@ header,
 	right: 0;
 	bottom: 0;
 	left: 0;
-	filter: blur(12px) saturate(115%);
+	filter: blur(16px) saturate(115%);
 }
 
 a {

components/Nav.vue

@@ -1,6 +1,7 @@
 <template>
-	<nav class="px-2 py-4">
+	<nav class="px-2 py-4 w-full">
 		<ul class="flex gap-x-3 font-semibold">
+			<li class="absolute w-fit -translate-x-full top-0 px-2 py-4 bg-[#191819] opacity-0 focus-within:translate-x-0 focus-within:opacity-100"><a class="text-white" href="#main">Skip to content</a></li>
 			<li><nuxt-link class="text-white" to="/">Home</nuxt-link></li>
 			<li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li>
 		</ul>

components/ProjectCard.vue

@@ -13,16 +13,16 @@ export default {
 				class="text-[#00FFC2]"
 				:name="headerIcon" />
 			<div role="links"
-				class="ml-auto">
+				class="ml-auto flex">
 				<a v-if="githubLink"
 					:href="githubLink"
-					class="text-zinc-300/80 hover:text-zinc-200 transition-colors duration-300">
+					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
 					<Icon size="38"
 						name="tabler:brand-github" />
 				</a>
 				<a v-if="externalLink"
 					:href="externalLink"
-					class="text-zinc-300/80 hover:text-zinc-200 transition-colors duration-300">
+					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
 					<Icon size="38"
 						name="tabler:external-link" />
 				</a>

components/content/ProseCode.vue

@@ -1,21 +1,24 @@
 <template>
-	<div class="container my-2 bg-neutral-900">
+	<div
+		class="container my-2 bg-neutral-900">
 		<span v-if="filename"
 			class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
 			{{ filename }}
 		</span>
-		<slot />
+			<slot />
 		<div class="bottom-container">
 			<div class="copy-container">
 				<button class="rounded hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
-					@click="copy(code)">
+					@click="copy(code)" @keypress.space="copy(code)">
 					<div class="h-6"
 						v-if="copied">
-						<Icon size="24" name="tabler:check" />
+						<Icon size="24"
+							name="tabler:check" />
 					</div>
 					<div class="h-6"
 						v-else>
-						<Icon size="24" name="tabler:copy" />
+						<Icon size="24"
+							name="tabler:copy" />
 					</div>
 				</button>
 			</div>
@@ -31,9 +34,9 @@ const props = withDefaults(
 		code?: string;
 		language?: string | null;
 		filename?: string | null;
-		highlights?: Array<number>;
+		highlights?: Array<any>;
 	}>(),
-	{ code: '', language: null, filename: null, highlights: [] }
+	{ code: '', language: null, filename: null, highlights: undefined }
 );
 </script>
   
@@ -49,7 +52,7 @@ const props = withDefaults(
 	border-radius: 0.5rem;
 }
 
-.container:hover .bottom-container {
+.container:is(:hover, :focus-within) .bottom-container {
 	opacity: 1;
 	pointer-events: all;
 }

content/blog/portfolio-site-rebuild.md

@@ -2,7 +2,7 @@
 title: Rebuilding my personal website!
 description: My experiences with nuxtjs 3 and tRPC
 image: 
-    src: 'https://via.placeholder.com/1920x1080.png?text=placeholder'
+    src: '/images/how-i-made-my-site-fast.png'
     alt: 'placeholder'
 head:
   meta:
@@ -15,11 +15,10 @@ head:
     - name: 'copyright'
       content: '© 2022 juls07'
 date: 2022-09-20
-_draft: false
+_draft: true
 tags:
   - web dev
   - nuxtjs 3
-  - supabase
 ---
 
-For the past month I've been quietly rebuilding my portfolio site, designing and building a new site. My previous site was bland and dull, this one is like a whole new world. The old site was just a two colors that don't even go well together, it was clear to me that was no way to present myself. So about halfway though november I started fresh, with Nuxt3 and a whole lot of insomnia in my possession I went to figma to design my new site. <!--more--> After a couple days of making a design in figma I setup a new nuxt3 project and 
+For the past month I've been quietly rebuilding my portfolio site, designing and building a new site. My previous site was bland and dull, this one is like a whole new world. The old site was just a two colors that don't even go well together, it was clear to me that was no way to present myself. So about halfway though november I started fresh, with Nuxt3 and a whole lot of insomnia in my possession I went to figma to design my new site. <!--more--> After a couple days of making a design in figma I setup a new nuxt3 project and went to work, after just a few weeks I had almost everything completed, but the last few things I had to do were to make the blogs page and finish the project cards. After a few weeks of designing and getting feedback from the [web dev and design]( https://discord.gg/web) discord server, mainly feedback from aqil#7927 an absolute machine in the visual design help channel. However, rebuilding the site still wasn't done, so about halfway through december I decided to change a few things, the typing animation on the home page was added that day and a few accessibility things here and there.

content/blog/what-ive-been-doing.md

@@ -25,7 +25,7 @@ tags:
 
 So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later.<!--more--> This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
 <br class="article"/>
-I've gotten a VPS from [linode](linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames
+I've gotten a VPS from [linode](https://linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames
 ```js
 for (let i = 0; i < posts.length; i++) {
                 usermodel.findById(posts[i].creator, '-password -__v -followers -following -email', async function (err, user) {

nuxt.config.ts

@@ -25,11 +25,15 @@ export default defineNuxtConfig({
 		},
 	},
 
-	modules: ['nuxt-icon', '@nuxt/content'],
+	modules: ['nuxt-icon', '@nuxt/content', '@nuxt/image-edge'],
 
 	nitro: {
 		prerender: {
+			crawlLinks: true,
 			routes: ['/sitemap.xml']
+		},
+		experimental: {
+			payloadExtraction: true
 		}
 	},
 

package-lock.json

@@ -7,6 +7,7 @@
       "hasInstallScript": true,
       "devDependencies": {
         "@nuxt/content": "^2.2.2",
+        "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
         "@vueuse/core": "^9.6.0",
         "autoprefixer": "^10.4.13",
         "nuxt": "3.0.0",
@@ -819,6 +820,29 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "node_modules/@nuxt/image-edge": {
+      "version": "1.0.0-27840416.dc1ed65",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27840416.dc1ed65.tgz",
+      "integrity": "sha512-r+lRkdAeB49wCpYmZAHWrhXNtjTSt3kz8MuPoVPpZB40FOVEpPCIQF8dBI5tXM19YOg76yFCdvpt1TFq3irA7g==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.0.0",
+        "consola": "^2.15.3",
+        "defu": "^6.1.1",
+        "h3": "^1.0.1",
+        "image-meta": "^0.1.1",
+        "node-fetch-native": "^1.0.1",
+        "ohash": "^1.0.0",
+        "pathe": "^1.0.0",
+        "ufo": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "optionalDependencies": {
+        "ipx": "1.0.0-2"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0.tgz",
@@ -2530,6 +2554,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2551,6 +2589,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -2560,6 +2609,19 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -2767,6 +2829,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "5.1.14",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
@@ -2906,6 +2975,32 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -3723,6 +3818,16 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -4122,6 +4227,13 @@
         "git-up": "^7.0.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/github-slugger": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
@@ -4544,6 +4656,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -4634,6 +4755,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ipx": {
+      "version": "1.0.0-2",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-1.0.0-2.tgz",
+      "integrity": "sha512-WQJA3oYPavbNUNKU9wyvMq34PvWLaxsio2woPXVYhxDQ8W/5OaZQusrbof3rXe3FZ4oib4/L9YYSN1D71Pq7nA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "consola": "^2.15.3",
+        "defu": "^6.1.1",
+        "destr": "^1.2.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^1.0.0",
+        "node-fetch-native": "^1.0.1",
+        "pathe": "^1.0.0",
+        "sharp": "^0.31.2",
+        "ufo": "^1.0.0",
+        "xss": "^1.0.14"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
     "node_modules/is-absolute-url": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
@@ -4670,6 +4814,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -6159,6 +6310,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz",
@@ -6238,6 +6402,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/mlly": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.0.0.tgz",
@@ -6283,6 +6454,13 @@
         "node": "^14 || ^16 || >=18"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/nitropack": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-1.0.0.tgz",
@@ -6356,6 +6534,26 @@
         "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.30.0.tgz",
+      "integrity": "sha512-qWO5l3SCqbwQavymOmtTVuCWZE23++S+rxyoHjXqUmPyzRcaoI4lA2gO55/drddGnedAyjA7sk76SfQ5lfUMnw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -7520,6 +7718,33 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
@@ -7560,6 +7785,17 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -7616,6 +7852,22 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
     "node_modules/rc9": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.0.0.tgz",
@@ -8261,6 +8513,30 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "node_modules/sharp": {
+      "version": "0.31.2",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.2.tgz",
+      "integrity": "sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.8",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8294,6 +8570,63 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/sitemap": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
@@ -8523,6 +8856,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.0.tgz",
@@ -8707,6 +9050,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -8868,6 +9231,19 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-fest": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.3.0.tgz",
@@ -9818,6 +10194,30 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -10565,6 +10965,24 @@
       "integrity": "sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==",
       "dev": true
     },
+    "@nuxt/image-edge": {
+      "version": "1.0.0-27840416.dc1ed65",
+      "resolved": "https://registry.npmjs.org/@nuxt/image-edge/-/image-edge-1.0.0-27840416.dc1ed65.tgz",
+      "integrity": "sha512-r+lRkdAeB49wCpYmZAHWrhXNtjTSt3kz8MuPoVPpZB40FOVEpPCIQF8dBI5tXM19YOg76yFCdvpt1TFq3irA7g==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.0.0",
+        "consola": "^2.15.3",
+        "defu": "^6.1.1",
+        "h3": "^1.0.1",
+        "image-meta": "^0.1.1",
+        "ipx": "1.0.0-2",
+        "node-fetch-native": "^1.0.1",
+        "ohash": "^1.0.0",
+        "pathe": "^1.0.0",
+        "ufo": "^1.0.0"
+      }
+    },
     "@nuxt/kit": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.0.0.tgz",
@@ -11842,6 +12260,29 @@
       "integrity": "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==",
       "dev": true
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        }
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -11865,6 +12306,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -12032,6 +12484,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "dev": true,
+      "optional": true
+    },
     "cssnano": {
       "version": "5.1.14",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.14.tgz",
@@ -12132,6 +12591,23 @@
         "character-entities": "^2.0.0"
       }
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "mimic-response": "^3.1.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "optional": true
+    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -12638,6 +13114,13 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "optional": true
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -12937,6 +13420,13 @@
         "git-up": "^7.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "optional": true
+    },
     "github-slugger": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
@@ -13243,6 +13733,12 @@
       "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==",
       "dev": true
     },
+    "image-meta": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.1.1.tgz",
+      "integrity": "sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -13317,6 +13813,26 @@
       "integrity": "sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==",
       "dev": true
     },
+    "ipx": {
+      "version": "1.0.0-2",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-1.0.0-2.tgz",
+      "integrity": "sha512-WQJA3oYPavbNUNKU9wyvMq34PvWLaxsio2woPXVYhxDQ8W/5OaZQusrbof3rXe3FZ4oib4/L9YYSN1D71Pq7nA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "consola": "^2.15.3",
+        "defu": "^6.1.1",
+        "destr": "^1.2.1",
+        "etag": "^1.8.1",
+        "image-meta": "^0.1.1",
+        "listhen": "^1.0.0",
+        "node-fetch-native": "^1.0.1",
+        "pathe": "^1.0.0",
+        "sharp": "^0.31.2",
+        "ufo": "^1.0.0",
+        "xss": "^1.0.14"
+      }
+    },
     "is-absolute-url": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
@@ -13339,6 +13855,13 @@
         "is-decimal": "^2.0.0"
       }
     },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true,
+      "optional": true
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -14368,6 +14891,13 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "optional": true
+    },
     "minimatch": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz",
@@ -14425,6 +14955,13 @@
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true
     },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "optional": true
+    },
     "mlly": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.0.0.tgz",
@@ -14461,6 +14998,13 @@
       "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
       "dev": true
     },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "dev": true,
+      "optional": true
+    },
     "nitropack": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-1.0.0.tgz",
@@ -14527,6 +15071,23 @@
         "unstorage": "^1.0.1"
       }
     },
+    "node-abi": {
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.30.0.tgz",
+      "integrity": "sha512-qWO5l3SCqbwQavymOmtTVuCWZE23++S+rxyoHjXqUmPyzRcaoI4lA2gO55/drddGnedAyjA7sk76SfQ5lfUMnw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node-addon-api": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.0.0.tgz",
+      "integrity": "sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==",
+      "dev": true,
+      "optional": true
+    },
     "node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -15334,6 +15895,27 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "pretty-bytes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
@@ -15364,6 +15946,17 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -15397,6 +15990,19 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
     "rc9": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.0.0.tgz",
@@ -15884,6 +16490,23 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "sharp": {
+      "version": "0.31.2",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.2.tgz",
+      "integrity": "sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^5.0.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.3.8",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15911,6 +16534,35 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "optional": true
+    },
+    "simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "sitemap": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
@@ -16082,6 +16734,13 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "optional": true
+    },
     "strip-literal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.0.tgz",
@@ -16219,6 +16878,28 @@
         "yallist": "^4.0.0"
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+          "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -16341,6 +17022,16 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "dev": true
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "type-fest": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.3.0.tgz",
@@ -17008,6 +17699,26 @@
       "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
       "dev": true
     },
+    "xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build --prerender true",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@nuxt/content": "^2.2.2",
+    "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
     "@vueuse/core": "^9.6.0",
     "autoprefixer": "^10.4.13",
     "nuxt": "3.0.0",

pages/blog/[...slug].vue

@@ -1,6 +1,6 @@
 <template>
 	<Nav />
-	<main class="grid grid-cols-12 gap-5 justify-center">
+	<div class="grid grid-cols-12 gap-5 justify-center">
 		<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 			<ContentDoc v-slot="{ doc }">
 				<img :src="doc.image.src"
@@ -18,14 +18,18 @@
 						:iconName='tag'
 						isTag="true" />
 				</div>
-				<ContentRenderer class="text-gray-200" :value="doc" />
+				<main id="main">
+				<ContentRenderer
+					class="text-gray-200"
+					:value="doc" />
+				</main>
 			</ContentDoc>
+			</div>
 		</div>
-	</main>
+		<footer class="grid grid-cols-12 gap-5 justify-center">
-	<footer class="grid grid-cols-12 gap-5 justify-center">
+			<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
-		<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
+				<!-- <NewsletterSignup class="mb-2" /> -->
-			<!-- <NewsletterSignup class="mb-2" /> -->
+				© 2022 Juls07 - GPL v3.0 License
-			© 2022 Juls07 - GPL v3.0 License
+			</div>
-		</div>
+		</footer>
-	</footer>
 </template>

pages/blog/index.vue

@@ -1,47 +1,52 @@
 <template>
-	<div>
+	<div class="h-screen text-white">
 		<Nav />
-		<div class="gap-4 justify-evenly grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
+		<main>
-			<div v-for="article in articles"
+			<div id="main"
-				:key="article._path"
+				class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
-				class="mb-5 px-1.5">
+				<div v-for="article in articles"
-				<div
+					:key="article._path"
-					class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
+					class="mb-5 px-1.5">
-					<img v-if="article.image.src"
-						:src="article.image.src"
-						class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
 					<div
-						class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
+						class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
-						<h3>
+						<img v-if="article.image.src"
-							<nuxt-link class="text-lg"
+							:src="article.image.src"
-								:to="article._path">
+							class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
-								{{ article.title }}
+						<div
-							</nuxt-link>
+							class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
-						</h3>
+							<h3>
-						<p class="text-zinc-400">
+								<nuxt-link tabindex="0"
-							{{ article.description }}
+									class="text-lg"
-						</p>
+									:to="article._path">
-						<p class="text-zinc-500">
+									{{ article.title }}
-							{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
+								</nuxt-link>
-						</p>
+							</h3>
-						<p class="text-zinc-200 max-h-56">
+							<p class="text-zinc-400">
-							<ContentDoc :head="false" :value="article"
+								{{ article.description }}
-								:path="article._path"
+							</p>
-								v-slot="{ doc }">
+							<p class="text-zinc-500">
-								<div class="flex flex-wrap w-full gap-2 justify-start my-1">
+								{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
-									<IconTag v-for="tag in doc.tags"
+							</p>
-										:name="tag"
+							<p class="text-zinc-200 max-h-56">
-										:iconName='tag'
+								<ContentDoc :head="false"
-										isTag="true" />
+									:value="article"
-								</div>
+									:path="article._path"
-								<ContentRenderer :value="doc"
+									v-slot="{ doc }">
-									:excerpt="true" />
+									<div class="flex flex-wrap w-full gap-2 justify-start my-1">
-							</ContentDoc>
+										<IconTag v-for="tag in doc.tags"
-						</p>
+											:name="tag"
+											:iconName='tag'
+											isTag="true" />
+									</div>
+									<ContentRenderer :value="doc"
+										:excerpt="true" />
+								</ContentDoc>
+							</p>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		</main>
 	</div>
 </template>
 

pages/index.vue

@@ -7,16 +7,18 @@
 				<div
 					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
 					<img alt="juls07 profile picture"
-						src="~/assets/pictues/juls07.png"
+						src="~/assets/images/juls07.png"
 						class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
 					<div class="grid grid-rows-5 grid-cols-1 h-fit">
 						<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
-						<p class="text-zinc-200 row-span-2 md:text-lg h-fit">Fullstack dev</p>
+						<p class="text-[#00FFC2] row-span-2 md:text-lg h-fit">
+							<span class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">{{ tagLine }}</span>
+						</p>
 					</div>
 				</div>
 			</div>
 		</header>
-		<main class="grid grid-cols-12 gap-5 justify-center">
+		<main id="main" class="grid grid-cols-12 gap-5 justify-center">
 			<section
 				class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 				<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
@@ -70,7 +72,8 @@
 			<div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
 				<h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
 			</div>
-			<section class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full">
+			<section
+				class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full">
 				<ProjectCard name="Juls07.dev V2"
 					headerIcon="mdi:nuxt"
 					githubLink="https://github.com/juls0730/vuefullstack"
@@ -95,7 +98,8 @@
 					headerIcon="mdi:robot-excited-outline"
 					githubLink="https://github.com/juls0730/Echo"
 					:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]">
-					This is one of the first projects that wasn't just a dinky website, this project brought me to where I am today.
+					This is one of the first projects that wasn't just a dinky website, this project brought me to where
+					I am today.
 				</ProjectCard>
 				<ProjectCard name="juls07.dev V1"
 					headerIcon="mdi:nuxt"
@@ -121,3 +125,52 @@ useHead({
 	title: 'Juls07',
 })
 </script>
+
+<script lang="ts">
+export default {
+	data: () => {
+		return {
+			tagLine: "",
+			typeStatus: false,
+			displayTextArray: ["Fullstack dev", "Designer", "Blogger", "Freelancer"],
+			displayTextArrayIndex: 0,
+			charIndex: 0,
+		};
+	},
+	methods: {
+		typeText() {
+			if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
+				if (!this.typeStatus) this.typeStatus = true;
+				this.tagLine += this.displayTextArray[this.displayTextArrayIndex].charAt(
+					this.charIndex
+				);
+				this.charIndex += 1;
+				setTimeout(this.typeText, 100);
+			} else {
+				this.typeStatus = false;
+				setTimeout(this.eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
+			}
+		},
+		eraseText() {
+			if (this.charIndex > 0) {
+				if (!this.typeStatus) this.typeStatus = true;
+				this.tagLine = this.displayTextArray[this.displayTextArrayIndex].substring(
+					0,
+					this.charIndex - 1
+				);
+				this.charIndex -= 1;
+				setTimeout(this.eraseText, 50);
+			} else {
+				this.typeStatus = false;
+				this.displayTextArrayIndex += 1;
+				if (this.displayTextArrayIndex >= this.displayTextArray.length)
+					this.displayTextArrayIndex = 0;
+				setTimeout(this.typeText, 1100);
+			}
+		},
+	},
+	created() {
+		setTimeout(this.typeText, 2200);
+	},
+}
+</script>

tailwind.config.js

@@ -14,6 +14,15 @@ module.exports = {
       screens: {
         'xs': '512px',
         '3xl': '1792px'
+      },
+      keyframes: {
+        blink: {
+          'from, to': { opacity: '0' },
+          '50%': { opacity: '1' },
+        }
+      },
+      animation: {
+        blink: 'blink 1s step-end infinite',
       }
     },
   },