From 6022d6dc68386c3ccdb2f1481962bae9b23266bc Mon Sep 17 00:00:00 2001
From: Space-Banane <64922620+Space-Banane@users.noreply.github.com>
Date: Fri, 16 Jan 2026 21:34:20 +0100
Subject: [PATCH] Format & Added Big File Gen

---
 src/App.tsx | 355 +++++++++++++++++++++++++++++++++-------------------
 1 file changed, 227 insertions(+), 128 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3920ebf..0665096 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -128,7 +128,11 @@ function MiniProjectModal({
                 rel="noreferrer"
                 className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:from-purple-600 hover:to-pink-600 transition-all shadow-lg shadow-purple-500/30 hover:shadow-purple-500/50"
               >
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <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>
                 View on GitHub
@@ -180,7 +184,9 @@ function ExperienceModal({
         {/* Content */}
         <div className="p-8 space-y-6">
           <div className="flex items-center gap-4">
-            <div className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? 'w-16 h-16' : ''}`}>
+            <div
+              className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
+            >
               {experience.image ? (
                 <img
                   src={experience.image}
@@ -196,7 +202,9 @@ function ExperienceModal({
                 {experience.name}
               </h2>
               <p className="text-sm text-gray-400 mt-1">
-                {getTypeIcon(experience.type)} {experience.type.charAt(0).toUpperCase() + experience.type.slice(1)}
+                {getTypeIcon(experience.type)}{" "}
+                {experience.type.charAt(0).toUpperCase() +
+                  experience.type.slice(1)}
               </p>
             </div>
           </div>
@@ -342,20 +350,26 @@ function ExperienceCard({
   experience: Experience;
   onClick?: () => void;
 }) {
-  const isClickable = !!(experience.learned_at || experience.learned_from || experience.learned_because);
-  
+  const isClickable = !!(
+    experience.learned_at ||
+    experience.learned_from ||
+    experience.learned_because
+  );
+
   return (
     <div
       onClick={isClickable ? onClick : undefined}
       className={`group flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 transition-all duration-200 ${
         isClickable
-          ? 'cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5'
-          : ''
+          ? "cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5"
+          : ""
       }`}
     >
-      <div className={`text-2xl p-2 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 relative ${
-        experience.image ? 'w-10 h-10' : ''
-      }`}>
+      <div
+        className={`text-2xl p-2 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 relative ${
+          experience.image ? "w-10 h-10" : ""
+        }`}
+      >
         {experience.image ? (
           <img
             src={experience.image}
@@ -370,9 +384,11 @@ function ExperienceCard({
         )}
       </div>
       <div className="flex-1 min-w-0">
-        <h4 className={`text-base font-semibold text-white transition-colors ${
-          isClickable ? 'group-hover:text-purple-400' : ''
-        }`}>
+        <h4
+          className={`text-base font-semibold text-white transition-colors ${
+            isClickable ? "group-hover:text-purple-400" : ""
+          }`}
+        >
           {experience.name}
         </h4>
         {experience.description && (
@@ -411,7 +427,7 @@ function ProjectCard({ project }: { project: Project }) {
           <img
             src={project.image}
             alt={project.name}
-            className={`object-contain ${project.rounded === false ? 'w-full h-auto max-h-24 rounded-lg' : 'h-24 w-24 rounded-full'} shadow-lg group-hover:scale-110 transition-transform duration-500`}
+            className={`object-contain ${project.rounded === false ? "w-full h-auto max-h-24 rounded-lg" : "h-24 w-24 rounded-full"} shadow-lg group-hover:scale-110 transition-transform duration-500`}
           />
         </div>
       )}
@@ -472,8 +488,10 @@ function App() {
   const [displayMessage, setDisplayMessage] = useState("");
   const [isScrambling, setIsScrambling] = useState(false);
   const [showOldNames, setShowOldNames] = useState(false);
-  const [selectedMiniProject, setSelectedMiniProject] = useState<MiniProject | null>(null);
-  const [selectedExperience, setSelectedExperience] = useState<Experience | null>(null);
+  const [selectedMiniProject, setSelectedMiniProject] =
+    useState<MiniProject | null>(null);
+  const [selectedExperience, setSelectedExperience] =
+    useState<Experience | null>(null);
 
   const oldUsernames = [
     "getspaced (ingame)",
@@ -527,7 +545,7 @@ function App() {
 
   useEffect(() => {
     fetch(
-      "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6"
+      "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6",
     )
       .then((res) => res.json())
       .then((data) => {
@@ -558,7 +576,7 @@ function App() {
               }
               return characters[Math.floor(Math.random() * characters.length)];
             })
-            .join("")
+            .join(""),
         );
 
         if (iteration >= targetMessage.length) {
@@ -643,7 +661,9 @@ function App() {
 
                 <p className="text-sm text-gray-300 whitespace-nowrap">
                   Currently{" "}
-                  <span className="text-white font-semibold">{statusMessage}</span>
+                  <span className="text-white font-semibold">
+                    {statusMessage}
+                  </span>
                   <br />
                   on Discord
                 </p>
@@ -654,34 +674,34 @@ function App() {
           <div className="space-y-4 max-w-2xl">
             <h1 className="text-6xl md:text-7xl font-extrabold">
               Hey, I'm{" "}
-                <span
+              <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 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>
+              </span>
             </h1>
             <p className="text-2xl text-gray-400 font-light">
               A{" "}
@@ -713,7 +733,8 @@ function App() {
                   stuff.
                 </p>
                 <p className="leading-relaxed">
-                  I focus on building projects that i need, and that don't already exist.
+                  I focus on building projects that i need, and that don't
+                  already exist.
                 </p>
               </div>
             </div>
@@ -736,13 +757,22 @@ function App() {
               <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.
+                  <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 some Smarthome sensors myself, including a few little bluetooth proxys that also serve as temperature sensors.</p>
+                  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.
+                  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>
@@ -765,12 +795,19 @@ function App() {
               <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.
+                  <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 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.
                 </p>
               </div>
             </div>
@@ -783,23 +820,20 @@ 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">future things</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 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.
+                    I want to work more with Serverless Architectures and Cloud
+                    Services to build scalable applications.
                   </p>
                 </div>
               </div>
@@ -830,9 +864,9 @@ function App() {
                   <h3 className="text-xl font-bold text-white mb-2">
                     Expand on Existing Projects
                   </h3>
-                    <p className="text-gray-400 leading-relaxed">
+                  <p className="text-gray-400 leading-relaxed">
                     I want to make SHSF more stable and usable.
-                    </p>
+                  </p>
                 </div>
               </div>
             </div>
@@ -846,9 +880,7 @@ function App() {
                   <h3 className="text-xl font-bold text-white mb-2">
                     Explore the Unknown
                   </h3>
-                  <p className="text-gray-400 leading-relaxed">
-                    Rust?👀
-                  </p>
+                  <p className="text-gray-400 leading-relaxed">Rust?👀</p>
                 </div>
               </div>
             </div>
@@ -922,21 +954,33 @@ function App() {
 
           <div className="max-w-4xl mx-auto space-y-6">
             {Object.entries(
-              experiences.reduce((acc, exp) => {
-                if (!acc[exp.type]) acc[exp.type] = [];
-                acc[exp.type].push(exp);
-                return acc;
-              }, {} as Record<string, Experience[]>)
+              experiences.reduce(
+                (acc, exp) => {
+                  if (!acc[exp.type]) acc[exp.type] = [];
+                  acc[exp.type].push(exp);
+                  return acc;
+                },
+                {} as Record<string, Experience[]>,
+              ),
             ).map(([type, items]) => (
               <div key={type} className="space-y-3">
-                <h3 className={`text-lg font-semibold flex items-center gap-2 ${
-                  type === 'language' ? 'text-blue-400' :
-                  type === 'service' ? 'text-purple-400' :
-                  type === 'platform' ? 'text-green-400' :
-                  type === 'real life experience' ? 'text-orange-400' :
-                  type === 'roles' ? 'text-pink-400' : 'text-gray-400'
-                }`}>
-                  {getTypeIcon(type as Experience["type"])} {type.charAt(0).toUpperCase() + type.slice(1)}
+                <h3
+                  className={`text-lg font-semibold flex items-center gap-2 ${
+                    type === "language"
+                      ? "text-blue-400"
+                      : type === "service"
+                        ? "text-purple-400"
+                        : type === "platform"
+                          ? "text-green-400"
+                          : type === "real life experience"
+                            ? "text-orange-400"
+                            : type === "roles"
+                              ? "text-pink-400"
+                              : "text-gray-400"
+                  }`}
+                >
+                  {getTypeIcon(type as Experience["type"])}{" "}
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
                 </h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                   {items.map((exp, index) => (
@@ -1054,7 +1098,8 @@ const projects: Project[] = [
     description: "A minimalistic and privacy-focused idea-taking app.",
     link: "https://github.com/Space-Banane/thoughtful",
     open_source: { link: "https://github.com/Space-Banane/thoughtful" },
-    image: "https://em-content.zobj.net/source/microsoft-3D-fluent/433/thinking-face_1f914.png",
+    image:
+      "https://em-content.zobj.net/source/microsoft-3D-fluent/433/thinking-face_1f914.png",
   },
   {
     name: "3D Print Card",
@@ -1077,7 +1122,7 @@ const projects: Project[] = [
     image: "https://cdn.reversed.dev/pictures/qrcode.jpeg",
     open_source: { link: "https://github.com/reversed-dev/qr-code-gen" },
     link: "https://qr.reversed.dev",
-  }
+  },
 ];
 
 const miniProjects: MiniProject[] = [
@@ -1090,7 +1135,8 @@ const miniProjects: MiniProject[] = [
       color: "red",
       content: "Requires SHSF to run",
     },
-    image: "https://github.com/Space-Banane/shsf-discord-status/blob/main/Discord%20Status%20Image.png?raw=true"
+    image:
+      "https://github.com/Space-Banane/shsf-discord-status/blob/main/Discord%20Status%20Image.png?raw=true",
   },
   {
     title: "Mirror GoXLR to Discord",
@@ -1099,16 +1145,19 @@ const miniProjects: MiniProject[] = [
     github: "https://github.com/Space-Banane/mirror-goxlr-to-discord",
     note: {
       color: "yellow",
-      content: "Experimental - This might interfere with some other Hotkeys you set, or Applications that listen to those Hotkeys"
+      content:
+        "Experimental - This might interfere with some other Hotkeys you set, or Applications that listen to those Hotkeys",
     },
-    image: "https://github.com/Space-Banane/mirror-goxlr-to-discord/blob/main/Discord%20x%20GoXLR.png?raw=true"
+    image:
+      "https://github.com/Space-Banane/mirror-goxlr-to-discord/blob/main/Discord%20x%20GoXLR.png?raw=true",
   },
   {
     title: "Octo-Activity",
     description: "Show your 3D Printer activity as Discord Status.",
     why: "I wanted to show off my 3D Printer activity on Discord.",
     github: "https://github.com/Space-Banane/discord-octo-activity",
-    image: "https://github.com/Space-Banane/discord-octo-activity/blob/main/Discord%20Octo%20Activity.png?raw=true",
+    image:
+      "https://github.com/Space-Banane/discord-octo-activity/blob/main/Discord%20Octo%20Activity.png?raw=true",
   },
   {
     title: "Fishing Rod Automation Raft",
@@ -1117,187 +1166,232 @@ const miniProjects: MiniProject[] = [
     github: "https://github.com/Space-Banane/raft-fishing",
     note: {
       color: "yellow",
-      content: "Might interfere with other Applications that use Mouse/Keyboard input. In case of trust issues, move the mouse to the bottom right corner to stop the script."
+      content:
+        "Might interfere with other Applications that use Mouse/Keyboard input. In case of trust issues, move the mouse to the bottom right corner to stop the script.",
     },
-    image: "https://github.com/Space-Banane/raft-fishing/blob/main/Raft%20Fishing%20Guide%20-%20cover.jpg?raw=true"
+    image:
+      "https://github.com/Space-Banane/raft-fishing/blob/main/Raft%20Fishing%20Guide%20-%20cover.jpg?raw=true",
   },
   {
     title: "Nvidia-SMI Server",
     description: "A simple server to expose Nvidia-SMI data via HTTP.",
     why: "I wanted to monitor my GPU usage remotely without installing additional software.",
     github: "https://github.com/Space-Banane/nvidia-smi-server",
-    image: "https://github.com/Space-Banane/nvidia-smi-server/blob/main/Nvidia%20-%20SMI.png?raw=true"
+    image:
+      "https://github.com/Space-Banane/nvidia-smi-server/blob/main/Nvidia%20-%20SMI.png?raw=true",
   },
   {
     title: "Lego Set to STL",
     description: "Convert Lego set instructions to STL files for 3D printing.",
     why: "A friend of mine searched for a website that does something like this, so i made one.",
     github: "https://github.com/Space-Banane/lego-to-stl",
-    image: "https://zippy.trumplovesgiving.top/u/44nekH.png"
+    image: "https://zippy.trumplovesgiving.top/u/44nekH.png",
   },
   {
     title: "Thoughtful Extention for Raycast",
     description: "Quickly add ideas to Thoughtful from Raycast.",
     why: "I use Raycast a lot, so having a quick way to add ideas to Thoughtful is super convenient.",
-    github: "https://gitea.reversed.dev/space/thoughtful-extention",note: {
+    github: "https://gitea.reversed.dev/space/thoughtful-extention",
+    note: {
       color: "blue",
-      content: "Requires Thoughtful & Raycast to use lol"
+      content: "Requires Thoughtful & Raycast to use lol",
     },
-  }
+  },
+  {
+    title: "Big File Generator",
+    description:
+      "Generate large files filled with random data for testing purposes.",
+    why: "SMB performance test, i did NOT have a big file lying around.",
+    github: "https://gitea.reversed.dev/space/big-file-gen",
+    image:
+      "https://em-content.zobj.net/source/microsoft-3D-fluent/433/file-folder_1f4c1.png",
+  },
 ];
 
 const experiences: Experience[] = [
   {
     name: "TypeScript",
     type: "language",
-    description: "My go-to language for building scalable web applications with type safety.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
-    learned_because: "I HATE JavaScript, this makes it minimally better"
+    description:
+      "My go-to language for building scalable web applications with type safety.",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
+    learned_because: "I HATE JavaScript, this makes it minimally better",
   },
   {
     name: "JavaScript",
     type: "language",
     description: "The foundation of web development.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
   },
   {
     name: "Python",
     type: "language",
-    description: "Used for automation scripts, data processing, and backend services.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+    description:
+      "Used for automation scripts, data processing, and backend services.",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
   },
   {
     name: "Go",
     type: "language",
     description: "For building fast and efficient backend services.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
   },
   {
     name: "Lua",
     type: "language",
     description: "Scripting and embedded applications.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg",
     learned_from: "Youtube & Docs",
-    learned_because: "Used in some Robots in a Minecraft mod called CC:Tweaked"
+    learned_because: "Used in some Robots in a Minecraft mod called CC:Tweaked",
   },
   {
     name: "React",
     type: "platform",
-    description: "Building interactive user interfaces with modern React patterns and hooks.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
+    description:
+      "Building interactive user interfaces with modern React patterns and hooks.",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
   },
   {
     name: "Vue.js",
     type: "platform",
     description: "Creating reactive web applications with Vue's elegant API.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
   },
   {
     name: "Docker",
     type: "service",
-    description: "Containerizing applications for consistent deployment across environments.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
+    description:
+      "Containerizing applications for consistent deployment across environments.",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
   },
   {
     name: "PostgreSQL",
     type: "service",
     description: "Reliable relational database for complex data storage needs.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
   },
   {
     name: "Redis",
     type: "service",
     description: "High-performance caching and data structure store.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
   },
   {
     name: "MariaDB",
     type: "service",
     description: "Open-source relational database management system.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg",
   },
   {
     name: "Proxy Software",
     type: "service",
-    description: "Configuring and managing reverse proxies for web applications.",
+    description:
+      "Configuring and managing reverse proxies for web applications.",
   },
   {
     name: "Home Assistant",
     type: "platform",
-    description: "Building smart home automations and integrating various IoT devices.",
-    image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
+    description:
+      "Building smart home automations and integrating various IoT devices.",
+    image:
+      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
   },
   {
     name: "ESPHome",
     type: "platform",
-    description: "Programming ESP32 and ESP8266 microcontrollers for custom smart home sensors.",
+    description:
+      "Programming ESP32 and ESP8266 microcontrollers for custom smart home sensors.",
     image: "https://esphome.io/_images/logo.svg",
   },
   {
     name: "Troubleshooting Hardware",
     type: "real life experience",
-    description: "Diagnosing and fixing hardware issues, from bricked microcontrollers to server problems.",
+    description:
+      "Diagnosing and fixing hardware issues, from bricked microcontrollers to server problems.",
   },
   {
     name: "Node.js",
     type: "platform",
     description: "Building backend services and APIs with Express and Fastify.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
   },
   {
     name: "Immich",
     type: "platform",
     description: "Self-hosted photo and video management solution.",
     image: "https://avatars.githubusercontent.com/u/109746326?v=4",
-    learned_because: "I hate OneDrive"
+    learned_because: "I hate OneDrive",
   },
   {
     name: "Pangolin",
     type: "platform",
     description: "Proxy solution for network management.",
-    image: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
-    learned_because: "My old proxy did NOT work super well with authentication."
+    image:
+      "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
+    learned_because:
+      "My old proxy did NOT work super well with authentication.",
   },
   {
     name: "Nginx",
     type: "platform",
     description: "Proxy solution for network management. (old proxy)",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg",
   },
   {
     name: "Minecraft Servers",
     type: "platform",
     description: "Hosting and managing multiplayer game servers.",
-    image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/minecraft.png",
+    image:
+      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/minecraft.png",
   },
   {
     name: "Gitea",
     type: "platform",
     description: "Self-hosted Git service for version control.",
-    image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png",
+    image:
+      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png",
   },
   {
     name: "Serverless Functions",
     type: "platform",
     description: "Building scalable cloud functions and microservices. (SHSF)",
-    image: "https://cdn.reversed.dev/pictures/shsf/SHSF%20SMALL%20TRANSPARENT.png",
+    image:
+      "https://cdn.reversed.dev/pictures/shsf/SHSF%20SMALL%20TRANSPARENT.png",
   },
   {
     name: "Cloud Infrastructure",
     type: "platform",
-    description: "Managing and deploying applications on cloud platforms. (GCP, AWS, DigitalOcean)",
+    description:
+      "Managing and deploying applications on cloud platforms. (GCP, AWS, DigitalOcean)",
   },
   {
     name: "Git",
     type: "service",
-    description: "Version control for collaborative development and open-source contributions.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
+    description:
+      "Version control for collaborative development and open-source contributions.",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
   },
   {
     name: "ShareX",
     type: "platform",
-    description: "Custom uploaders and automation workflows for screenshots and file sharing.",
-    image: "https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
+    description:
+      "Custom uploaders and automation workflows for screenshots and file sharing.",
+    image:
+      "https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
   },
   {
     name: "Zipline",
@@ -1309,29 +1403,34 @@ const experiences: Experience[] = [
     name: "Tailwind CSS",
     type: "platform",
     description: "Utility-first CSS framework for rapid UI development.",
-    image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2560px-Tailwind_CSS_Logo.svg.png",
+    image:
+      "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2560px-Tailwind_CSS_Logo.svg.png",
   },
   {
     name: "Proxmox VE",
     type: "platform",
-    description: "Virtualization management platform for running VMs and containers.",
-    image: "https://media.printables.com/media/prints/543748/images/4374616_04ed4585-3662-4652-a84d-04621cb9f709/thumbs/inside/1280x960/png/proxmox.webp",
+    description:
+      "Virtualization management platform for running VMs and containers.",
+    image:
+      "https://media.printables.com/media/prints/543748/images/4374616_04ed4585-3662-4652-a84d-04621cb9f709/thumbs/inside/1280x960/png/proxmox.webp",
   },
   {
     name: "MongoDB",
     type: "service",
     description: "NoSQL database for flexible document-based data storage.",
-    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
+    image:
+      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
     learned_because: "I didn't wanna mess around with schemas for a project.",
-    learned_at: "09.01.2026"
+    learned_at: "09.01.2026",
   },
   {
     name: "Insomnia",
     type: "platform",
     description: "REST API client for testing and debugging HTTP requests.",
-    image: "https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png",
-    learned_because: "Postman is bloatware"
-  }
+    image:
+      "https://s3.amazonaws.com/s3.roaringapps.com/assets/icons/1561251841927-Insomnia.png",
+    learned_because: "Postman is bloatware",
+  },
 ];
 
 export default App;