E

Author: RedstoneWizard08

bun.lockb

@@ -42,7 +42,9 @@
         "typescript": "^5.0.0",
         "unocss": "^0.64.1",
         "unocss-preset-animations": "^1.1.0",
-        "vite": "^5.0.3"
+        "vite": "^5.0.3",
+        "vite-imagetools": "^7.0.4",
+        "vite-plugin-image-optimizer": "^1.1.8"
     },
     "dependencies": {
         "moment": "^2.30.1",

package.json

@@ -1,59 +1,27 @@
 <script lang="ts">
-    import { inview, type Options, type ObserverEventDetails } from "svelte-inview";
     import { fly } from "svelte/transition";
 
     const { avatar, name, github }: { avatar: string; name: string; github?: string } = $props();
-
-    let isInView = $state(false);
     const animDelay = Math.random() * 200;
-
-    const inviewOpts: Options = {
-        unobserveOnEnter: true,
-        rootMargin: "-20%",
-    };
-
-    const inviewChange = ({ detail }: CustomEvent<ObserverEventDetails>) => {
-        isInView = detail.inView;
-    };
 </script>
 
 {#if github}
-    <div
-        class="flex flex-col items-center justify-center"
-        use:inview={inviewOpts}
-        oninview_change={inviewChange}
+    <a
+        in:fly={{ x: 20, delay: animDelay }}
+        href="https://github.com/{github}"
+        target="_blank"
+        class="flex flex-col items-center justify-start bg-slate-9 py-4 w-full rounded-lg transition-all hover:scale-110 hover:bg-slate-8 cursor-pointer decoration-none color-white"
     >
-        {#if isInView}
-            <a
-                in:fly={{ x: 20, delay: animDelay }}
-                href="https://github.com/{github}"
-                target="_blank"
-                class="flex flex-col items-center justify-start bg-slate-9 py-4 w-full h-full rounded-lg transition-all hover:scale-110 hover:bg-slate-8 cursor-pointer decoration-none color-white"
-            >
-                <img class="w-60 rounded-lg h-60 object-cover object-top" src={avatar} alt={name} />
-                <p class="text-lg font-bold mb-0">{name}</p>
-                <p class="mt-0 color-blue-3">@{github}</p>
-            </a>
-        {:else}
-            <div class="w-full h-full"></div>
-        {/if}
-    </div>
+        <img class="w-60 rounded-lg h-60 object-cover object-top" src={avatar} alt={name} />
+        <p class="text-lg font-bold mb-0">{name}</p>
+        <p class="mt-0 color-blue-3">@{github}</p>
+    </a>
 {:else}
     <div
-        class="flex flex-col items-center justify-center"
-        use:inview={inviewOpts}
-        oninview_change={inviewChange}
+        in:fly={{ x: 20, delay: animDelay }}
+        class="w-full flex flex-col items-center justify-start bg-slate-9 py-4 rounded-lg decoration-none color-white"
     >
-        {#if isInView}
-            <div
-                in:fly={{ x: 20, delay: animDelay }}
-                class="w-full h-full flex flex-col items-center justify-start bg-slate-9 py-4 rounded-lg decoration-none color-white"
-            >
-                <img class="w-60 rounded-lg h-60 object-cover object-top" src={avatar} alt={name} />
-                <p class="text-lg font-bold mb-0">{name}</p>
-            </div>
-        {:else}
-            <div class="w-full h-full"></div>
-        {/if}
+        <img class="w-60 rounded-lg h-60 object-cover object-top" src={avatar} alt={name} />
+        <p class="text-lg font-bold mb-0">{name}</p>
     </div>
 {/if}

src/components/Person.svelte

@@ -3,6 +3,7 @@
 
 <svelte:head>
     <title>Create Technomancy</title>
+    <meta name="description" content="A Create addon blending the themes of magic and technology into one!" />
 </svelte:head>
 
 <div class="w-full min-h-screen flex flex-col items-center justify-start bg-img-technomancy">

src/routes/+page.svelte

@@ -3,7 +3,6 @@ import presetAnim from "unocss-preset-animations";
 import extractSvelte from "@unocss/extractor-svelte";
 import presetIcons from "@unocss/preset-icons";
 import presetWebFonts from "@unocss/preset-web-fonts";
-// import { createLocalFontProcessor } from "@unocss/preset-web-fonts/local";
 
 export default defineConfig({
     presets: [
@@ -13,12 +12,6 @@ export default defineConfig({
             fonts: {
                 ubuntu: "Ubuntu",
             },
-
-            // processors: createLocalFontProcessor({
-            //     cacheDir: "node_modules/.cache/unocss/fonts",
-            //     fontAssetsDir: "public/assets/fonts",
-            //     fontServeBaseUrl: "/assets/fonts",
-            // }),
         }),
 
         presetIcons(),

uno.config.ts

@@ -1,6 +1,8 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 import { starlightSkinPlugin } from "./vite/starlight-skins";
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
+import { imagetools } from "vite-imagetools";
 import uno from "@unocss/svelte-scoped/vite";
 
 export default defineConfig({
@@ -12,6 +14,8 @@ export default defineConfig({
         }),
         starlightSkinPlugin(),
         sveltekit(),
+        imagetools(),
+        ViteImageOptimizer(),
     ],
 
     build: {