A new Era

src/App.tsx

@@ -0,0 +1,644 @@
+import { useEffect, useState } from "react";
+
+function ProjectCard({ project }: { project: Project }) {
+  return (
+    <div className="group relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/10">
+      {project.image && (
+        <div className="mb-6 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center relative">
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          <img
+            src={project.image}
+            alt={project.name}
+            className="h-24 w-24 object-cover rounded-full shadow-lg group-hover:scale-110 transition-transform duration-500"
+          />
+        </div>
+      )}
+
+      <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
+        {project.name}
+      </h3>
+      <p className="text-gray-400 text-sm flex-grow mb-6 leading-relaxed">
+        {project.description}
+      </p>
+
+      <div className="flex gap-3 mt-auto">
+        <a
+          href={project.link + "?utm_source=portfolio&ref=space"}
+          target="_blank"
+          rel="noreferrer"
+          className="flex-1 py-2 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium text-center transition-colors flex items-center justify-center gap-2"
+        >
+          Visit
+          <svg
+            className="w-3 h-3"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </a>
+        {project.open_source && (
+          <a
+            href={project.open_source.link}
+            target="_blank"
+            rel="noreferrer"
+            className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors border border-white/5"
+            title="View Source"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const [status, setStatus] = useState("");
+  const [borderStatus, setBorderStatus] = useState("border-gray-700");
+  const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
+  const [statusMessage, setStatusMessage] = useState("Breaking SHSF");
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [displayMessage, setDisplayMessage] = useState("");
+  const [isScrambling, setIsScrambling] = useState(false);
+  const [showOldNames, setShowOldNames] = useState(false);
+
+  const oldUsernames = [
+    "getspaced (current)",
+    "Space-Banane",
+  ];
+
+  const rotatingMessages = [
+    "Bricking Esp32's 🧱",
+    "Buy me a White Redbull⁉️",
+    "Testing in production 🧪",
+    "Shipping bug fixes 📦",
+    "Not learning Rust 🦀",
+    "Pushing before Copilot's Review ✅",
+    "Breaking SHSF 🚧",
+    "No debugger attached 🐞",
+    "Asking ChatGPT for help 🤖",
+    "Refactoring for the 10th time 🔄",
+    "Writing documentation 🥹",
+    "Removing Comments 🧹",
+    "Collecting Spotify hours 🎵",
+  ];
+
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
+    "🧱⁉️🧪📦🦀✅🚧🐞🤖🔄🥹🧹🎵";
+
+  useEffect(() => {
+    if (status === "online") {
+      setBorderStatus("border-green-500");
+      setGlowColor("rgba(34, 197, 94, 0.5)");
+      setStatusMessage("Reachable");
+    } else if (status === "offline") {
+      setBorderStatus("border-gray-500");
+      setGlowColor("rgba(107, 114, 128, 0.5)");
+      setStatusMessage("Probably Away");
+    } else if (status === "dnd") {
+      setBorderStatus("border-red-600");
+      setGlowColor("rgba(220, 38, 38, 0.5)");
+      setStatusMessage("Not Reachable");
+    } else if (status === "idle") {
+      setBorderStatus("border-yellow-500");
+      setGlowColor("rgba(234, 179, 8, 0.5)");
+      setStatusMessage("Doing anything but work");
+    } else {
+      setBorderStatus("border-gray-700");
+      setGlowColor("rgba(55, 65, 81, 0.5)");
+      setStatusMessage("Breaking SHSF");
+    }
+  }, [status]);
+
+  useEffect(() => {
+    fetch(
+      "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        setStatus(data.status);
+      })
+      .catch((err) => {
+        console.error(err);
+        setStatus("offline");
+      });
+  }, []);
+
+  // Scramble effect
+  useEffect(() => {
+    const targetMessage = rotatingMessages[messageIndex];
+
+    if (isScrambling) {
+      let iteration = 0;
+      const scrambleInterval = setInterval(() => {
+        setDisplayMessage(
+          targetMessage
+            .split("")
+            .map((char, index) => {
+              if (index < iteration) {
+                return targetMessage[index];
+              }
+              if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) {
+                return char;
+              }
+              return characters[Math.floor(Math.random() * characters.length)];
+            })
+            .join("")
+        );
+
+        if (iteration >= targetMessage.length) {
+          clearInterval(scrambleInterval);
+          setIsScrambling(false);
+        }
+
+        iteration += 1 / 3;
+      }, 30);
+
+      return () => clearInterval(scrambleInterval);
+    } else {
+      setDisplayMessage(targetMessage);
+    }
+  }, [messageIndex, isScrambling]);
+
+  // Rotating message effect
+  useEffect(() => {
+    const messageInterval = setInterval(() => {
+      setIsScrambling(true);
+      setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
+    }, 7000);
+
+    return () => {
+      clearInterval(messageInterval);
+    };
+  }, []);
+
+  return (
+    <div className="relative min-h-screen bg-black text-white selection:bg-purple-500/30">
+      {/* Background Grid */}
+      <div className="fixed inset-0 z-0 pointer-events-none">
+        <div
+          className="absolute inset-0 blur-sm"
+          style={{
+            backgroundImage:
+              "linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)",
+            backgroundSize: "30px 30px",
+            maskImage:
+              "radial-gradient(circle at center, black 40%, transparent 100%)",
+          }}
+        />
+      </div>
+
+      <main className="relative z-10 flex flex-col items-center px-6 py-20 mx-auto max-w-5xl gap-24">
+        {/* Hero Section */}
+        <section className="flex flex-col items-center text-center space-y-8 animate-fade-in-down">
+          <div className="relative group">
+            <div
+              className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
+              style={{ backgroundColor: glowColor }}
+            ></div>
+            <div
+              className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
+            >
+              <img
+                src="https://cdn.reversed.dev/pictures/20250405_120402.png"
+                alt="Space"
+                className="w-full h-full object-cover scale-110 transition-transform duration-700 group-hover:scale-125"
+              />
+            </div>
+
+            {/* Rotating Message Bubble (Left Side) */}
+            <div className="absolute -left-4 top-4 -translate-x-full">
+              <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-3 shadow-lg">
+                {/* Arrow pointing to profile */}
+                <div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
+                <div className="absolute right-0 top-1/2 translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/20"></div>
+
+                <p className="text-sm text-gray-200 whitespace-nowrap font-medium font-mono">
+                  {displayMessage || rotatingMessages[0]}
+                </p>
+              </div>
+            </div>
+
+            {/* Status Bubble (Right Side) */}
+            <div className="absolute -right-4 top-8 translate-x-full">
+              <div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
+                {/* Arrow pointing to profile */}
+                <div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
+                <div className="absolute left-0 top-1/2 -translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/10"></div>
+
+                <p className="text-sm text-gray-300 whitespace-nowrap">
+                  Currently{" "}
+                  <span className="text-white font-semibold">{statusMessage}</span>
+                  <br />
+                  on Discord
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4 max-w-2xl">
+            <h1 className="text-6xl md:text-7xl font-extrabold">
+              Hey, I'm{" "}
+                <span
+                className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 cursor-help px-2"
+                style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
+                onMouseEnter={() => setShowOldNames(true)}
+                onMouseLeave={() => setShowOldNames(false)}
+                >
+                Space
+                {showOldNames && (
+                  <div className="absolute left-1/2 -translate-x-1/2 top-full mt-4 z-50 animate-fade-in flex justify-center w-full">
+                  <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-md border border-purple-500/30 rounded-xl px-6 py-4 shadow-2xl min-w-[220px] max-w-xs">
+                    <div className="absolute left-1/2 -translate-x-1/2 -top-2 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-purple-500/30"></div>
+                    <p className="text-xs text-gray-400 mb-2 font-medium whitespace-nowrap text-center">
+                    Also known as:
+                    </p>
+                    <ul className="flex flex-col items-center gap-1.5">
+                    {oldUsernames.map((name, index) => (
+                      <li
+                      key={index}
+                      className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center"
+                      >
+                      {name}
+                      </li>
+                    ))}
+                    </ul>
+                  </div>
+                  </div>
+                )}
+                </span>
+            </h1>
+            <p className="text-2xl text-gray-400 font-light">
+              A{" "}
+              <span className="line-through decoration-purple-500/50 decoration-2">
+                Self-proclaimed
+              </span>{" "}
+              Developer breaking things to see how they&nbsp;work.
+            </p>
+          </div>
+        </section>
+
+        {/* About Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+              About Me
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              A bit about who I am and what I do
+            </p>
+          </div>
+
+          <div className="max-w-3xl mx-auto">
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
+              <div className="space-y-4 text-gray-300">
+                <p className="leading-relaxed">
+                  I'm a Software Developer from Germany, located near Frankfurt.
+                </p>
+                <p className="leading-relaxed">
+                  My passion lies in coding, exploring limits, and occasionally
+                  reinventing the wheel just for the fun of it. While I love
+                  open-source, I'm not afraid to build custom solutions when
+                  existing ones don't fit.
+                </p>
+                <p className="leading-relaxed">
+                  I actively contribute to open-source projects, fixing the little
+                  things that make a big difference.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* AI-Assisted Coding Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+              AI-Assisted Coding
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              How i use AI.
+            </p>
+          </div>
+
+          <div className="max-w-3xl mx-auto space-y-6">
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
+              <div className="space-y-4 text-gray-300">
+                <p className="leading-relaxed">
+                  I write most of my code myself, especially when it comes to logic, backend architecture,
+                  authentication systems, database communication, and project setup. These core aspects are
+                  where I believe hands-on coding is essential for quality and understanding.
+                </p>
+                <p className="leading-relaxed">
+                  However, for UI development, I love using{" "}
+                  <span className="text-purple-400 font-semibold">Claude Sonnet 4.5</span> to
+                  help speed up the process and explore different design approaches. It's particularly helpful for
+                  styling, layout, and creating polished user interfaces.
+                </p>
+                <p className="leading-relaxed">
+                  I also embrace tools like{" "}
+                  <span className="text-blue-400 font-semibold">GitHub Copilot's autocompletion</span>,
+                  which enhances my productivity by suggesting code snippets and reducing repetitive typing.
+                  It's like having a coding assistant that understands context.
+                </p>
+                <div className="mt-6 p-4 rounded-xl bg-white/5 border border-white/10">
+                  <p className="text-sm text-gray-400 italic text-center">
+                    "Ai wont replace shit, it'll either help us or kill us"
+                  </p>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Hardware Mods & Builds Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-500">
+              Hardware Stuff
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              The lion is concerned with a LED connected to 12V
+            </p>
+          </div>
+
+          <div className="max-w-3xl mx-auto">
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-orange-500/10 to-red-500/5 backdrop-blur-sm border border-orange-500/20">
+              <div className="space-y-4 text-gray-300">
+                <p className="leading-relaxed">
+                  When I'm not breaking my code, you'll find me breaking{" "}
+                  <span className="text-orange-400 font-semibold">Arduinos</span> and{" "}
+                  <span className="text-orange-400 font-semibold">ESP32s</span>. I love interacting via Software with self-made hardware.
+                </p>
+                <p className="leading-relaxed">
+                  I've built my fair share of little sensor gadgets and placed them around my house. All are managed using{" "}
+                  <span className="text-blue-400 font-semibold">ESPHome</span> via{" "}
+                  <span className="text-blue-400 font-semibold">Home Assistant</span>. Which means, no cloud dependencies and full control over my smart home setup.
+                </p>
+                <p className="leading-relaxed">
+                  I love using Arduinos because they're stupidly easy to build with & the bar to entry is extremely low with a stupid amount of tutorials,
+                  but the possibilities are endless. First it was the blinking LEDs, now it's servo control via bluetooth across the room.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* 3D Printing Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
+              3D Printing
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              I turn Plastic on a Spool into Plastic in a Shape.
+            </p>
+          </div>
+
+          <div className="max-w-3xl mx-auto">
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20">
+              <div className="space-y-4 text-gray-300">
+                <p className="leading-relaxed">
+                  I run a modded Creality Ender 3 V1 with a{" "}
+                  <span className="text-cyan-400 font-semibold">BLTouch</span> for auto bed leveling,
+                  all managed remotely through <span className="text-cyan-400 font-semibold">OctoPrint</span>.
+                  I slice my prints using <span className="text-cyan-400 font-semibold">OrcaSlicer</span> because Cura misses a few options.
+                </p>
+                <p className="leading-relaxed">
+                  I mostly print replacement parts for stuff around the house and cool shit I find on{" "}
+                  <span className="text-cyan-400 font-semibold">Printables</span>. For custom designs, I use{" "}
+                  <span className="text-cyan-400 font-semibold">Fusion 360</span> to model my own parts when I need something specific.
+                </p>
+                <p className="leading-relaxed">
+                  I'm not a fan of Bamboo Lab. Their choices, pricing, and quality just don't. <br />
+                  One day, I'd love to own a <span className="text-green-400 font-semibold">Creality K2 Pro</span>.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Goals Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+              My Goals
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              This is the stuff i want to learn.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
+              <div className="flex items-start gap-4">
+                <div className="p-3 rounded-lg bg-blue-500/20 text-3xl">
+                  🚀
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2">
+                    Not Just Semi-Fullstack
+                  </h3>
+                  <p className="text-gray-400 leading-relaxed">
+                    I want to work more with Serverless Architectures and Cloud Services to build scalable applications.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-pink-500/5 backdrop-blur-sm border border-purple-500/20">
+              <div className="flex items-start gap-4">
+                <div className="p-3 rounded-lg bg-purple-500/20 text-3xl">
+                  💻
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2">
+                    Contribute More to Open Source
+                  </h3>
+                  <p className="text-gray-400 leading-relaxed">
+                    I want to commit more to Open-Source Projects. That's it...
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-green-500/10 to-blue-500/5 backdrop-blur-sm border border-green-500/20">
+              <div className="flex items-start gap-4">
+                <div className="p-3 rounded-lg bg-green-500/20 text-3xl">
+                  ⚡
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2">
+                    Expand on Existing Projects
+                  </h3>
+                    <p className="text-gray-400 leading-relaxed">
+                    I want to make SHSF more stable and usable.
+                    </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-6 rounded-2xl bg-gradient-to-br from-yellow-500/10 to-orange-500/5 backdrop-blur-sm border border-yellow-500/20">
+              <div className="flex items-start gap-4">
+                <div className="p-3 rounded-lg bg-yellow-500/20 text-3xl">
+                  🦀
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2">
+                    Explore the Unknown
+                  </h3>
+                  <p className="text-gray-400 leading-relaxed">
+                    Rust?👀
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Projects Section */}
+        <section className="w-full space-y-12">
+          <div className="text-center space-y-2">
+            <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-orange-400">
+              Favourite Projects
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              Personal Faviorite? Uhhhhh....
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {projects.map((project, index) => (
+              <ProjectCard key={index} project={project} />
+            ))}
+          </div>
+        </section>
+
+        {/* Contact Section */}
+        <section className="w-full max-w-2xl text-center space-y-4 pb-8">
+          <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">
+            Let's Connect
+          </h2>
+          <div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-blue-500/20 backdrop-blur-md">
+            <p className="text-gray-300 mb-8 text-lg">
+              Got anything on your mind? Shoot me a DM or Email.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="mailto:space@reversed.dev"
+                className="px-8 py-3 rounded-full bg-gradient-to-r from-white to-gray-100 text-black font-bold hover:from-gray-100 hover:to-white transition-all shadow-lg shadow-white/20 hover:shadow-white/30"
+              >
+                Send Email
+              </a>
+              <a
+                href="https://discord.com/users/456443941169004545"
+                target="_blank"
+                rel="noreferrer"
+                className="px-8 py-3 rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] text-white font-bold hover:from-[#4752C4] hover:to-[#5865F2] transition-all shadow-lg shadow-[#5865F2]/30 hover:shadow-[#5865F2]/50"
+              >
+                Discord
+              </a>
+            </div>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer className="w-full border-t border-white/10 pt-4">
+          <div className="text-center space-y-3">
+            <div className="flex items-center justify-center gap-2">
+              <img
+                src="http://shsf.reversed.dev/SHSF%20SMALL%20TRANSPARENT.png"
+                alt="SHSF Logo"
+                className="w-6 h-6"
+              />
+              <p className="text-gray-400 text-sm">
+                Partly powered by{" "}
+                <a
+                  href="https://github.com/Space-Banane/shsf"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-purple-400 hover:text-purple-300 transition-colors"
+                >
+                  SHSF
+                </a>
+              </p>
+            </div>
+            <p className="text-gray-400 text-sm">Love from Space ❤️</p>
+            <p className="text-gray-500 text-xs">
+              Designed with Copilot &{" "}
+              <a
+                href="https://gradienty.codes/"
+                target="_blank"
+                rel="noreferrer"
+                className="text-purple-400 hover:text-purple-300 transition-colors underline"
+              >
+                gradienty.codes
+              </a>
+              , Tailwind and React
+            </p>
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}
+
+interface Project {
+  name: string;
+  description: string;
+  image?: string;
+  link: string;
+  open_source: false | { link: string };
+}
+
+const projects: Project[] = [
+  {
+    name: "BetterNews",
+    description: "A news feed where you submit the news.",
+    image: "https://betternews.app/assets/icon.png",
+    open_source: false,
+    link: "https://betternews.app",
+  },
+  {
+    name: "SHSF",
+    description: 'Self-hostable "Cloud Functions" for your own hardware.',
+    link: "https://github.com/Space-Banane/shsf",
+    open_source: { link: "https://github.com/Space-Banane/shsf" },
+    image: "https://cdn.reversed.dev/pictures/shsf/SHSF.png",
+  },
+  {
+    name: "3D Print Card",
+    description: "Showcase Your 3D Prints Beautifully",
+    link: "https://card.peakprinting.top",
+    image: "https://card.peakprinting.top/icon.png",
+    open_source: { link: "https://github.com/Space-Banane/imsoprintingit" },
+  },
+  {
+    name: "Whatsapp-Chat-Analyzer",
+    description:
+      "Analyze your Whatsapp chats with ease. Get insights, stats and more.",
+    image: "https://cdn.reversed.dev/pictures/wca.png",
+    open_source: { link: "https://github.com/Space-Banane/whatsapp-stats" },
+    link: "https://whatstat.reversed.dev",
+  },
+  {
+    name: "QrCode Generator",
+    description: "Vue.JS based QR Code Generator with a bit of customization.",
+    image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
+    open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
+    link: "https://qr.reversed.dev",
+  },
+];
+
+export default App;

src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)