diff --git a/src/components/Art.tsx b/src/components/Art.tsx
deleted file mode 100644
index b429b2f..0000000
--- a/src/components/Art.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {Component, createSignal, onMount} from "solid-js";
-
-interface AsciiArtComponentProps {
-  imagePath: string;
-  maxWidth?: number;
-  maxHeight?: number;
-}
-
-const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
-  const [asciiArt, setAsciiArt] = createSignal("");
-
-  onMount(() => {
-    const img = new Image();
-    img.src = props.imagePath;
-    img.onload = () => {
-      setAsciiArt(imageToAscii(img, props.maxWidth ?? 500, props.maxHeight ?? 1000));
-    };
-  });
-
-  const imageToAscii = (img: HTMLImageElement, maxWidth: number, maxHeight: number) => {
-    const chars = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."];
-    const canvas = document.createElement("canvas");
-    const width = Math.min(img.width, maxWidth);
-    const height = Math.min(img.height, maxHeight);
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d")!;
-    ctx.drawImage(img, 0, 0, width, height);
-    const data = ctx.getImageData(0, 0, width, height).data;
-    let art = "";
-    const saturation = 1;
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const i = (y * width + x) * 4;
-        const r = Math.min(255, data[i] * saturation);
-        const g = Math.min(255, data[i + 1] * saturation);
-        const b = Math.min(255, data[i + 2] * saturation);
-        const a = data[i + 3];
-        if (a === 0) {
-          art += " ";
-        } else {
-          art += chars[Math.floor(((r + g + b) / 3 / 255) * (chars.length - 1))];
-        }
-      }
-      art += "\n";
-    }
-    return art;
-  };
-
-  return (
-    <div class="ascii-art-container h-screen flex justify-center flex-col items-center w-full text-[3.2px] leading-[1.6px] text-rose-400/80 text-center">
-      <pre class="ascii-art select-none">{asciiArt()}</pre>
-    </div>
-  );
-};
-
-export default AsciiArtComponent;
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 41b7cc5..53ced6b 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,34 +1,57 @@
+interface Project {
+  title: string;
+  emoji: string;
+  description: string;
+  image: string;
+  link?: string;
+  linkText?: string;
+}
+
+const projects: Project[] = [
+  {
+    title: "aster",
+    emoji: "⭐",
+    description: "a much more easy to use and painless alternative to the default youtube studio.",
+    image: "/aster.png",
+    linkText: "wip",
+  },
+  {
+    title: "orchid",
+    emoji: "🌺",
+    description: "a meme and pfp editor packed with features, built to run on low end devices.",
+    image: "/orchid.png",
+    link: "https://orchid.rex.wf",
+    linkText: "visit beta!",
+  },
+];
+
 export default function Projects() {
   return (
-    <div class="w-full  flex-wrap flex justify-start gap-4">
-      <div class="div w-full md:w-[calc(50%-8px)]">
-        <div class="w-full flex flex-col group project-card bg-neutral-950">
-          <img src="/aster.png" alt="Aster project preview" class="w-full h-[15rem] object-cover opacity-60 group-hover:opacity-100 transition-all duration-300" />
-          <div class="p-5">
-            <div class="flex justify-between items-center mb-2">
-              <p class="text-neutral-200">⭐ aster</p>
-              <a href="" class="text-sm hover:text-rose-400 transition-colors duration-200">
-                wip
-              </a>
+    <div class="w-full flex-wrap flex justify-start gap-4">
+      {projects.map((project) => (
+        <div class="div w-full md:w-[calc(50%-8px)]">
+          <div class="w-full flex flex-col group project-card bg-neutral-950 overflow-hidden">
+            <div class="relative overflow-hidden">
+              <img src={project.image} alt={`${project.title} project preview`} class="w-full h-[15rem] object-cover opacity-60 transition-all duration-500 transform group-hover:opacity-100 group-hover:scale-105" />
             </div>
-            <p class="text-sm text-neutral-400">a much more easy to use and painless alternative to the default youtube studio.</p>
-          </div>
-        </div>
-      </div>
-      <div class="div w-full md:w-[calc(50%-8px)]">
-        <div class="w-full group flex flex-col project-card bg-neutral-950">
-          <img src="/orchid.png" class="w-full opacity-60 group-hover:opacity-100 transition-all duration-300 h-[15rem] object-cover" alt="Orchid project preview" />
-          <div class="p-5">
-            <div class="flex justify-between items-center mb-2">
-              <p class="text-neutral-200">🌺 orchid</p>
-              <a href="https://orchid.rex.wf" class="text-sm hover:text-rose-400 transition-colors duration-200">
-                visit beta!
-              </a>
+            <div class="p-5">
+              <div class="flex justify-between items-center mb-2">
+                <p class="text-neutral-200">
+                  {project.emoji} {project.title}
+                </p>
+                {project.link ? (
+                  <a href={project.link} class="text-sm hover:text-rose-400 transition-colors duration-200">
+                    {project.linkText}
+                  </a>
+                ) : (
+                  <span class="text-sm text-neutral-500">{project.linkText}</span>
+                )}
+              </div>
+              <p class="text-sm text-neutral-400">{project.description}</p>
             </div>
-            <p class="text-sm text-neutral-400">a meme and pfp editor packed with features, built to run on low end devices.</p>
           </div>
         </div>
-      </div>
+      ))}
     </div>
   );
 }
diff --git a/src/components/Team.tsx b/src/components/Team.tsx
index a2f2726..7c35740 100644
--- a/src/components/Team.tsx
+++ b/src/components/Team.tsx
@@ -1,12 +1,30 @@
+interface TeamMember {
+  name: string;
+  url: string;
+  avatar: string;
+}
+
+const team: TeamMember[] = [
+  {
+    name: "namish",
+    url: "https://namishh.me",
+    avatar: "https://sakura.rex.wf/linear/namishh",
+  },
+  {
+    name: "rex",
+    url: "https://rex.wf",
+    avatar: "https://sakura.rex.wf/linear/rexdotsh",
+  },
+];
+
 export default function Team() {
   return (
     <div class="flex mt-6 flex-wrap gap-4">
-      <a href="https://namishh.me" class="group" aria-label="Namish's profile">
-        <img src="https://sakura.rex.wf/linear/namishh" class="h-12 w-12 rounded-full team-avatar group-hover:ring-2 ring-neutral-700" alt="namish" />
-      </a>
-      <a href="https://rex.wf" class="group" aria-label="Rex's profile">
-        <img src="https://sakura.rex.wf/linear/rexdotsh" class="h-12 w-12 rounded-full team-avatar group-hover:ring-2 ring-neutral-700" alt="rex" />
-      </a>
+      {team.map((member) => (
+        <a href={member.url} class="group relative" aria-label={`${member.name}'s profile`}>
+          <img src={member.avatar} class="h-12 w-12 rounded-full transition-all duration-200 group-hover:scale-105 group-hover:ring-2 ring-neutral-700" alt={member.name.toLowerCase()} />
+        </a>
+      ))}
     </div>
   );
 }