From 7379870d41b47875475d4a10ba68e30ebea7ce33 Mon Sep 17 00:00:00 2001
From: Space-Banane <paulwaehner923@gmail.com>
Date: Sat, 7 Feb 2026 13:26:07 +0100
Subject: [PATCH] Update App component: modify status message, enhance text
 descriptions, and add internship experience section

---
 src/App.tsx | 173 ++++++++++++++++++++++------------------------------
 1 file changed, 74 insertions(+), 99 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2d83b35..c73d84f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -506,7 +506,7 @@ 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 [statusMessage, setStatusMessage] = useState("[🔃🔃🔃]");
   const [messageIndex, setMessageIndex] = useState(0);
   const [displayMessage, setDisplayMessage] = useState("");
   const [isScrambling, setIsScrambling] = useState(false);
@@ -528,19 +528,20 @@ function App() {
   ];
 
   const rotatingMessages = [
-    "Bricking Esp32's 🧱",
-    "Buy me a White Redbull⁉️",
-    "Testing in production 🧪",
+    "Yelling at the compiler ⁉️",
     "Shipping bug fixes 📦",
-    "Not learning Rust 🦀",
-    "Pushing before Copilot's Review ✅",
-    "Breaking SHSF 🚧",
+    "Waiting for CI ✅",
     "No debugger attached 🐞",
-    "Asking ChatGPT for help 🤖",
-    "Refactoring for the 10th time 🔄",
-    "Writing documentation 🥹",
-    "Removing Comments 🧹",
+    "Yelling at Gemini 🤖",
+    "Writing Readme files 📝",
     "Collecting Spotify hours 🎵",
+    "Downloading 10 bajillion dependencies 📥",
+    "Fighting with package managers 📦",
+    "Considering nuking python from orbit 🐍",
+    "Why is uv so cool? 🧊",
+    "I'm hungry 🍔",
+    "I swear this worked on my machine 🖥️",
+    "Pulling 10GB of docker images 🐳"
   ];
 
   const characters =
@@ -567,7 +568,7 @@ function App() {
     } else {
       setBorderStatus("border-gray-700");
       setGlowColor("rgba(55, 65, 81, 0.5)");
-      setStatusMessage("Breaking SHSF");
+      setStatusMessage("[🔃🔃🔃]");
     }
   }, [status]);
 
@@ -613,7 +614,7 @@ function App() {
         }
 
         iteration += 1 / 3;
-      }, 30);
+      }, 25);
 
       return () => clearInterval(scrambleInterval);
     } else {
@@ -662,7 +663,7 @@ function App() {
               "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%)",
+              "radial-gradient(circle at center, black 40%, transparent 80%)",
           }}
         />
       </div>
@@ -717,6 +718,7 @@ function App() {
             </div>
           </div>
 
+          {/* Name & Description */}
           <div className="space-y-4 max-w-2xl">
             <h1 className="text-6xl md:text-7xl font-extrabold">
               Hey, I'm{" "}
@@ -763,10 +765,10 @@ function App() {
         <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
+              Who?
             </h2>
             <p className="text-gray-400 max-w-2xl mx-auto">
-              What i do and who i am.
+              A bit about me, my background, and how I got into programming.
             </p>
           </div>
 
@@ -775,85 +777,14 @@ function App() {
               <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 cool
-                  stuff.
+                  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.
-                </p>
-              </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 5v rated 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 im not breaking Typescript im usually playing with{" "}
-                  <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.
+                  already exist. Or break the ones that do exist, to see how they work and learn from them.
                 </p>
                 <p className="leading-relaxed">
-                  I've built some Smarthome sensors myself, including a few
-                  little bluetooth proxys that also serve as temperature
-                  sensors.
-                </p>
-                <p className="leading-relaxed">
-                  I love using ESP32s because they're stupidly easy to build
-                  with & the bar to entry is stupidly low with a stupid amount
-                  of tutorials.
-                </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">
-              Plastic on a Spool -{">"} Plasic 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 through{" "}
-                  <span className="text-cyan-400 font-semibold">OctoPrint</span>
-                  . I slice my stuff using{" "}
-                  <span className="text-cyan-400 font-semibold">
-                    OrcaSlicer
-                  </span>{" "}
-                  because Cura's UI gives me a flashbang everytime i open it.
-                </p>
-                <p className="leading-relaxed">
-                  I would lie if i said i print useful stuff. Most of the stuff
-                  i print is for organising stuff and a few fun prints here and
-                  there.
+                  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>
@@ -866,7 +797,7 @@ function App() {
             <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">future things</p>
+            <p className="text-gray-400 max-w-2xl mx-auto">Next 4 Years are going to look fun</p>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -920,19 +851,20 @@ function App() {
             <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
+                    Testing before Breaking
                   </h3>
-                  <p className="text-gray-400 leading-relaxed">Rust?👀</p>
+                  <p className="text-gray-400 leading-relaxed">In the future i want to write more tests and improve my code quality.</p>
                 </div>
               </div>
             </div>
           </div>
         </section>
 
+        
         {/* Projects Section */}
         <section className="w-full space-y-12">
           <div className="text-center space-y-2">
@@ -940,7 +872,7 @@ function App() {
               Favourite Projects
             </h2>
             <p className="text-gray-400 max-w-2xl mx-auto">
-              Personal Faviorite? Uhhhhh....
+              Personal favourites, projects that I'm proud of, or just things I find fun to show off.
             </p>
           </div>
 
@@ -1046,21 +978,63 @@ function App() {
           </p>
         </section>
 
+        {/* Real Life Experience (ABB Internship) */}
+        <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-yellow-400 to-orange-500">
+              Real Life Experience (ABB Internship)
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              My internship experience at ABB and what i learned from it
+            </p>
+          </div>
+
+          <div className="max-w-3xl mx-auto">
+            <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="space-y-4 text-gray-300">
+                <p className="leading-relaxed">
+                  I did an internship at{" "}
+                  <a
+                    href="https://www.abb.com/global/en"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-red-500 hover:text-red-600 transition-colors font-semibold"
+                  >
+                    ABB {" "}
+                  </a>
+                    where i got to work on a project that involved internal management
+                    software. It was a great experience that taught me a lot about
+                    working in a professional environment and collaborating with a
+                    team of developers.
+                </p>
+                <p className="leading-relaxed">
+                  This was the first propper time i worked with a Framework (Angular) and it was a great learning experience. Which helped me understand why
+                  frameworks are a thing and how they can help structure and organize codebases, especially as they grow larger.
+                </p>
+                <p className="leading-relaxed">
+                  Also, this was the first time submitting a PR, which was scary but super rewarding when they merged it. From that point on
+                  i was hooked on Frameworks and OSS contribution. I want to do more of both in the future.
+                </p>
+              </div>
+            </div>
+          </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
+            Want to talk?
           </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.
+              Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
             </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
+                Shoot me an Email
               </a>
               <a
                 href="https://discord.com/users/456443941169004545"
@@ -1068,7 +1042,7 @@ function App() {
                 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
+                Chat on Discord
               </a>
             </div>
           </div>
@@ -1127,6 +1101,7 @@ function App() {
               <span className="text-white/90">Projects: <span className="font-bold text-purple-400">{projects.length}</span></span>
               <span className="text-white/90">Mini Projects: <span className="font-bold text-purple-400">{miniProjects.length}</span></span>
               <span className="text-white/90">Profile Data: <span className="font-bold text-purple-400">1/1</span></span>
+              <span className="text-white/90">Experiences: <span className="font-bold text-purple-400">{experiences.length}</span></span>
             </div>
           </div>
         )}