diff --git a/src/App.tsx b/src/App.tsx
index 855687e..b9f9101 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,13 @@ interface MiniProject {
   };
 }
 
+interface Experience {
+  name: string;
+  type: "language" | "service" | "platform" | "real life experience" | "roles";
+  description: string;
+  image?: string;
+}
+
 function MiniProjectModal({
   project,
   onClose,
@@ -131,6 +138,40 @@ function MiniProjectModal({
   );
 }
 
+function getTypeIcon(type: Experience["type"]) {
+  switch (type) {
+    case "language":
+      return "💻";
+    case "service":
+      return "☁️";
+    case "platform":
+      return "🚀";
+    case "real life experience":
+      return "🌍";
+    case "roles":
+      return "👔";
+    default:
+      return "📦";
+  }
+}
+
+function getTypeColor(type: Experience["type"]) {
+  switch (type) {
+    case "language":
+      return "bg-blue-500/20";
+    case "service":
+      return "bg-purple-500/20";
+    case "platform":
+      return "bg-green-500/20";
+    case "real life experience":
+      return "bg-orange-500/20";
+    case "roles":
+      return "bg-pink-500/20";
+    default:
+      return "bg-gray-500/20";
+  }
+}
+
 function MiniProjectCard({
   project,
   onClick,
@@ -737,7 +778,73 @@ function App() {
           />
         )}
 
-        
+        {/* Experience Section */}
+        <section className="w-full space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
+              Experience
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              Technologies, platforms, and roles I've worked with
+            </p>
+          </div>
+
+          <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[]>)
+            ).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>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {items.map((exp, index) => (
+                    <div
+                      key={index}
+                      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 hover:border-purple-500/50 transition-all duration-200 hover:bg-white/10"
+                    >
+                      <div className={`text-2xl p-2 rounded-lg ${getTypeColor(exp.type)} flex items-center justify-center shrink-0 ${exp.image ? 'w-10 h-10' : ''}`}>
+                        {exp.image ? (
+                          <img
+                            src={exp.image}
+                            alt={exp.name}
+                            className="w-full h-full object-contain"
+                          />
+                        ) : (
+                          getTypeIcon(exp.type)
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h4 className="text-base font-semibold text-white group-hover:text-purple-400 transition-colors">
+                          {exp.name}
+                        </h4>
+                        {exp.description && (
+                          <p className="text-xs text-gray-400 mt-0.5 line-clamp-1">
+                            {exp.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <p className="text-center text-gray-400 mt-4">
+            And a bunch of stuff i probably also forgot...
+          </p>
+        </section>
 
         {/* Contact Section */}
         <section className="w-full max-w-2xl text-center space-y-4 pb-8">
@@ -906,4 +1013,172 @@ const miniProjects: MiniProject[] = [
   },
 ];
 
+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",
+  },
+  {
+    name: "JavaScript",
+    type: "language",
+    description: "The foundation of web development.",
+    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",
+  },
+  {
+    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",
+  },
+  {
+    name: "Lua",
+    type: "language",
+    description: "Scripting and embedded applications.",
+    image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    name: "MariaDB",
+    type: "service",
+    description: "Open-source relational database management system.",
+    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.",
+  },
+  {
+    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",
+  },
+  {
+    name: "ESPHome",
+    type: "platform",
+    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.",
+  },
+  {
+    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",
+  },
+  {
+    name: "Immich",
+    type: "platform",
+    description: "Self-hosted photo and video management solution.",
+    image: "https://avatars.githubusercontent.com/u/109746326?v=4"
+  },
+  {
+    name: "Pangolin",
+    type: "platform",
+    description: "Proxy solution for network management.",
+    image: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
+  },
+  {
+    name: "Nginx",
+    type: "platform",
+    description: "Proxy solution for network management.",
+    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",
+  },
+  {
+    name: "Gitea",
+    type: "platform",
+    description: "Self-hosted Git service for version control.",
+    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",
+  },
+  {
+    name: "Cloud Infrastructure",
+    type: "platform",
+    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",
+  },
+  {
+    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",
+  },
+  {
+    name: "Zipline",
+    type: "platform",
+    description: "ShareX companion for self-hosted file uploads.",
+    image: "https://media.sys.truenas.net/apps/zipline/icons/icon.png",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  }
+];
+
 export default App;