Small changes & adjustments

src/app/about/page.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { About as AboutSection } from "../../sections/About";
-import { Goals } from "../../sections/Goals";
-import { Navbar } from "../../components/Navbar";
-import { Footer } from "../../sections/Footer";
-
-export default function AboutPage() {
-  return (
-    <>
-      <Navbar />
-      <div className="space-y-24 py-24 max-w-4xl mx-auto px-4">
-        <div className="text-center space-y-4">
-          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
-            About Me
-          </h1>
-          <p className="text-gray-400 max-w-2xl mx-auto">
-            A little bit about me...
-          </p>
-        </div>
-
-        <AboutSection />
-
-        <Goals />
-
-        <section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
-          <h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
-          <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
-            <li className="flex items-center gap-2">
-              <span className="text-purple-400">✦</span> 3D Printing & Design
-            </li>
-            <li className="flex items-center gap-2">
-              <span className="text-purple-400">✦</span> Graphical Design
-            </li>
-            <li className="flex items-center gap-2">
-              <span className="text-purple-400">✦</span> Gaming & Hardware
-            </li>
-            <li className="flex items-center gap-2">
-              <span className="text-purple-400">✦</span> Open Source Contribution
-            </li>
-          </ul>
-        </section>
-      </div>
-      <Footer />
-    </>
-  );
-}

src/app/page.tsx

@@ -3,6 +3,8 @@
 import { useProfile } from "../context/ProfileContext";
 import { Hero } from "../sections/Hero";
 import { WorkExperience } from "../sections/WorkExperience";
+import { Uptime } from "../sections/Uptime";
+import { Affiliates } from "../sections/Affiliates";
 import { ProjectCard } from "../components/ProjectCard";
 import { MiniProjectCard } from "../components/MiniProjectCard";
 import { ExperienceCard } from "../components/ExperienceCard";
@@ -24,7 +26,6 @@ export default function Home() {
     selectedMiniProject, selectedExperience
   } = useProfile();
 
-  const [showOldNames, setShowOldNames] = useState(false);
   const [showTypingIntro, setShowTypingIntro] = useState(true);
   const oldUsernames = [
     "getspaced (ingame)",
@@ -62,14 +63,16 @@ export default function Home() {
               displayMessage={displayMessage}
               rotatingMessages={rotatingMessages}
               statusMessage={statusMessage}
-              showOldNames={showOldNames}
-              setShowOldNames={setShowOldNames}
               oldUsernames={oldUsernames}
             />
 
 
             <WorkExperience realWork={realWork} />
 
+            <Uptime />
+
+            <Affiliates />
+
             <TechStack />
 
             <section className="w-full max-w-6xl mx-auto space-y-12 px-4">

src/components/Navbar.tsx

@@ -10,7 +10,6 @@ export function Navbar() {
 
   const navItems = [
     { label: "Home", path: "/" },
-    { label: "About", path: "/about" },
     { label: "Connect", path: "/contact" },
   ];
 

src/sections/About.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-export function About() {
-  return (
-    <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">
-          Who?
-        </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
-          A bit about me, my background, and how I got into programming.
-        </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 Developer from Germany. I love doing full-stack web
-              development, tinkering with hardware, and 3D printing stuff i find quite fancy.
-            </p>
-            <p className="leading-relaxed">
-              I focus on building projects that i need, and that don't
-              already exist. Or break the ones that do exist, to see how they work and learn from them.
-            </p>
-            <p className="leading-relaxed">
-              I started programming around 2017, started of with C# in Unity, then moved to Python for a while, before settling on JavaScript/TypeScript as my main language around 2023.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-3xl mx-auto">
-        <div className="mt-6 p-6 rounded-2xl bg-gradient-to-br from-gray-800/20 to-transparent backdrop-blur-sm border border-white/6">
-          <h3 className="text-2xl font-semibold text-white mb-4">Why I don't (rely on) GitHub — vs — Why I use my HomeLab</h3>
-          <div className="flex gap-6 items-center justify-between">
-            <div className="flex-1 text-center">
-              <img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-28 object-contain" />
-              <h4 className="mt-3 font-medium text-white">GitHub</h4>
-              <p className="text-gray-400 mt-1">Goes down more.</p>
-            </div>
-
-            <div className="w-px h-24 bg-white/6" />
-
-            <div className="flex-1 text-center">
-              <img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-28 object-contain" />
-              <h4 className="mt-3 font-medium text-white">HomeLab</h4>
-              <p className="text-gray-400 mt-1">Goes down less.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

src/sections/Affiliates.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+type Affiliate = {
+  name: string;
+  good: string[];
+  bad: string[];
+  link: string;
+  icon: string;
+};
+
+const affiliates: Affiliate[] = [
+  {
+    name: "SparkedHost",
+    good: ["Decent Support", "Good Bot Hosting", "Generous Webhosting"],
+    bad: ["Staff"],
+    link: "https://billing.sparkedhost.com/aff.php?aff=1843",
+    icon: "https://sparkedhost.com/_next/static/media/logo-text.fce7e4c5.svg",
+  },
+  {
+    name: "Datalix",
+    good: ["Uptime", "Hardware", "Prices", "Support"],
+    bad: ["nothin"],
+    link: "https://datalix.de/a/space",
+    icon: "https://cdn.datalix.de/images/header.png",
+  },
+];
+
+export function Affiliates() {
+  return (
+    <section className="w-full max-w-5xl mx-auto space-y-8 px-4">
+      <div className="text-center space-y-4">
+        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+          Affiliates
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        {affiliates.map((affiliate) => (
+          <a
+            key={affiliate.name}
+            href={affiliate.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 hover:bg-white/10 hover:border-purple-500/40 transition-all duration-300"
+          >
+            <div className="flex flex-col items-center text-center gap-2 mb-3">
+              <img
+                src={affiliate.icon}
+                alt={affiliate.name}
+                className="h-7 max-w-[130px] w-auto object-contain rounded"
+              />
+              <h3 className="text-lg font-semibold text-white">{affiliate.name}</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <p className="text-xs font-semibold text-emerald-300 mb-1.5">Good</p>
+                <div className="flex flex-wrap gap-2">
+                  {affiliate.good.map((item) => (
+                    <span
+                      key={item}
+                      className="inline-flex items-center gap-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/10 px-2.5 py-1 text-xs text-emerald-200"
+                    >
+                      <span className="font-bold">+</span>
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className="text-xs font-semibold text-rose-300 mb-1.5">Bad</p>
+                <div className="flex flex-wrap gap-2">
+                  {affiliate.bad.map((item) => (
+                    <span
+                      key={item}
+                      className="inline-flex items-center gap-1.5 rounded-full border border-rose-400/30 bg-rose-500/10 px-2.5 py-1 text-xs text-rose-200"
+                    >
+                      <span className="font-bold">-</span>
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

src/sections/Hero.tsx

@@ -7,8 +7,6 @@ export function Hero({
   displayMessage,
   rotatingMessages,
   statusMessage,
-  showOldNames,
-  setShowOldNames,
   oldUsernames,
 }: {
   glowColor: string;
@@ -16,8 +14,6 @@ export function Hero({
   displayMessage: string;
   rotatingMessages: string[];
   statusMessage: string;
-  showOldNames: boolean;
-  setShowOldNames: (show: boolean) => void;
   oldUsernames: string[];
 }) {
   const router = useRouter();
@@ -60,7 +56,10 @@ export function Hero({
   };
 
   return (
-    <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
+    <section
+      className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in"
+      data-old-usernames={oldUsernames.join(",")}
+    >
       <div className="relative group" onMouseMove={handleMouseMove}>
         <div
           className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
@@ -113,32 +112,10 @@ export function Hero({
         <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"
+            className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 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">

src/sections/Uptime.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+export function Uptime() {
+  return (
+    <section className="w-full max-w-6xl mx-auto space-y-10 px-4">
+      <div className="text-center space-y-4">
+        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+          Downtime
+        </h2>
+      </div>
+
+      <div className="max-w-3xl mx-auto">
+        <div className="p-6 rounded-2xl bg-gradient-to-br from-gray-800/20 to-transparent backdrop-blur-sm border border-white/6">
+          <h3 className="text-2xl font-semibold text-white mb-4 text-center">
+            I love my homelab
+          </h3>
+          <div className="flex gap-6 items-center justify-between">
+            <div className="flex-1 text-center">
+              <img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-28 object-contain" />
+              <h4 className="mt-3 font-medium text-white">GitHub</h4>
+              <p className="text-gray-400 mt-1">Goes down more.</p>
+            </div>
+
+            <div className="w-px h-24 bg-white/6" />
+
+            <div className="flex-1 text-center">
+              <img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-28 object-contain" />
+              <h4 className="mt-3 font-medium text-white">HomeLab</h4>
+              <p className="text-gray-400 mt-1">Goes down less.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}