🚧 fix about page

src/components/Background.svelte

@@ -3,7 +3,7 @@
     let _text = text.repeat(500)
 </script>
 
-<div class="h-screen w-screen overflow-clip absolute -z-100">
+<div class="max-h-120vh 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}
     </div>

src/components/Link.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let href: string;
+    export let away: boolean = false;
+    export let back: boolean = false;
+</script>
+
+{#if back}
+<a href={href} class="group text-white font-bold">
+    <span class="inline-block font-normal group-hover:-translate-x-1 duration-500 ease-out">←</span>
+    <slot/> 
+</a>
+{:else if away}
+<a href={href} class="group text-white font-bold">
+    <slot/> 
+    <span class="inline-block font-normal group-hover:-translate-y-[0.125rem] group-hover:translate-x-[0.125rem] duration-500 ease-out">
+        ↗
+    </span>
+</a>
+{:else}
+<a href={href} class="group text-white font-bold">
+    <slot/> 
+    <span class="inline-block font-normal group-hover:translate-x-[0.125rem] duration-500 ease-out">
+        →
+    </span>
+</a>
+{/if}

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script>
     import Background from "../components/Background.svelte";
-    import Rise from "../components/Rise.svelte";
     let links = [
         { href: "/about", text: "About" },
         { href: "/contact", text: "Contact" },

src/routes/about/+page.mdx

@@ -1,28 +1,29 @@
 ---
 title: Smoke and Mirrors
 date: '2023-4-2'
-image: /about.webp
 abstract: ''
 ---
+
 <script>
-    import Background from "../../components/Background.svelte";
+	import Background from "../../components/Background.svelte"; import Link from
+	"../../components/Link.svelte"
 </script>
 
-<Background text="ABOUTUS"/>
-<div class="h-screen w-screen px-0 m-0" style="font-family: Inter">
-    <header class="mx-auto flex flex-col items-center text-white lg:max-w-screen-xl w-screen" style={`background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgba(2, 0, 36, 0) 0%, rgb(0, 0, 0) 100%), url(${image})`}>
-        <div class="text-left w-2/3 mt-20">
+<div class="min-h-screen w-screen px-0 m-0" style="font-family: Inter">
+    <header class="mx-auto flex items-center text-white lg:max-w-screen-xl w-2/5">
+        <div class="text-left mt-20">
+            <Link href="/" back>Back</Link>
             <h1 class="text-2xl my-0">{date}</h1>
             <div class="rise-wrapper whitespace-pre w-fit font-800 -spacing-1 text-purple">
                 {#each title.split(" ") as word, index}
                     <p class="rise-anim md:inline-flex block text-7xl my-0 font-800 -spacing-3 mt-6" style={`--delay: ${index * 200 + 100}ms`}
                         >{`${word}`}{index !== title.length-1 ? " " : ""}</p>
 				{/each}
             </div>
-            <hr class="my-10 border-neutral-700"/>
+            <hr class="my-10 border-neutral-700 "/>
         </div>
     </header>
-    <div class="prose text-xl text-white w-1/3 mx-auto">
+    <div class="prose text-xl text-white w-2/5 mx-auto font-500">
         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.
@@ -33,4 +34,5 @@ abstract: ''
 
         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>