🚧 add about page + cursor images

package.json

@@ -18,10 +18,12 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"mdsvex": "^0.10.6",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
+		"svelte-preprocess": "^5.0.3",
 		"typescript": "^4.9.3",
 		"unocss": "^0.50.6",
 		"vite": "^4.0.0"

src/components/Background.svelte

@@ -1,9 +1,10 @@
 <script>
-    let text = "TEAMILLUSION".repeat(500);
+    export let text = "TEAMILLUSION";
+    let _text = text.repeat(500)
 </script>
 
 <div class="h-screen w-screen overflow-clip absolute -z-100">
     <div class="m-0 h-full w-[105vw] bg-black text-neutral-800 m-0 break-words" style="font-family: Array-Wide; font-size: 3rem; line-height:2.5rem">
-        {text}
+        {_text}
     </div>
 </div>

src/routes/+page.svelte

@@ -12,8 +12,8 @@
 <div class="h-screen w-screen" style="font-family: Array-Wide">
     <header class="mx-auto flex flex-col items-center justify-center text-white lg:max-w-screen-xl w-screen h-screen m-auto">
         <div class="text-left w-2/3">
-            <h1 class="text-2xl my-0">TEAM ILLUSION</h1>
-            <p class="text-7xl my-0 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">CMIT's official VEX and FIRST robotics team.</p>
+            <h1 class="text-2xl my-0 cursor-emoji-magic">TEAM ILLUSION</h1>
+            <p class="text-7xl my-0 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500 cursor-emoji-robotics">CMIT's official VEX and FIRST robotics team.</p>
             <div class="rise-wrapper whitespace-pre w-fit">
                 {#each links as {href, text}, index}
                     <a href={href} class="rise-anim md:inline-flex block text-neutral-400 text-xl mr-5 decoration-none hover:text-white duration-250" style={`--delay: ${index * 200 + 100}ms; font-family: Array-Wide`}

src/routes/about/+page.mdx

@@ -0,0 +1,32 @@
+---
+title: Smoke and Mirrors
+date: '2023-4-2'
+image: /images/how-i-built-hero.webp
+abstract: ''
+---
+<script>
+    import Background from "../../components/Background.svelte";
+</script>
+
+<Background text="ABOUTUS"/>
+<div class="h-screen w-screen px-0 m-0" style="font-family: Array-Wide">
+    <header class="mx-auto flex flex-col items-center text-white lg:max-w-screen-xl w-screen h-screen">
+        <div class="text-left w-2/3 mt-20">
+            <h1 class="text-2xl my-0">{date}</h1>
+            <p class="text-7xl my-0 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">{title}</p>
+            <hr class="my-10 border-neutral-700"/>
+            <div class="prose text-lg">
+                At Team Illusion, we believe in the power of innovation, collaboration, transparency, and creativity to achieve our goals. Our team is more than just a robotics club-- it is a community of like-minded individuals who share a passion for science, technology, engineering, and mathematics.
+
+                We are committed to pushing the boundaries of what is possible in the field of robotics. We believe that technology can be used to make the world a better place, and we strive to create robots that can solve real-world problems. Our focus is on developing robots that are not only functional but also aesthetically pleasing and inspiring.
+
+                As a team, we value teamwork, communication, and leadership. We believe that every member of our team has a unique set of skills and talents that can contribute to our success. We encourage our members to think creatively, to take risks, and to learn from their failures.
+
+                We believe in the power of competition to drive innovation and excellence. We participate in competitions and events to test our skills and to learn from other teams. We also believe in giving back to our community by sharing our knowledge and expertise with others.
+
+                We believe that robotics can be used to make a positive impact on the world. Whether it is through developing robots that can assist with disaster relief, improving the quality of life for people with disabilities, or exploring new frontiers in space, we are committed to using our skills and expertise to make a difference.
+            </div>
+        </div>
+    </header>
+
+</div>

svelte.config.js

@@ -1,13 +1,18 @@
 import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+import { mdsvex } from 'mdsvex';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	preprocess: [preprocess(), mdsvex({
+		extension: ".mdx"
+	})],
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+		adapter: adapter({
+			precompress: true,
+		})
+	},
+	extensions: [".svelte", ".mdx"],
 };
 
 export default config;

vite.config.js

@@ -5,6 +5,10 @@ import { presetUno } from '@unocss/preset-uno';
 
 export default defineConfig({
 	plugins: [sveltekit(), UnoCSS({
-		presets: [presetUno()]
+		presets: [presetUno()],
+		rules: [
+			// cursor
+			[/^cursor-emoji-(\w+)$/, ([, w]) => ({ cursor: `url('/emojis/${w}.webp') 64 64, auto` })],
+		]
 	})]
 });