feat: add TechStack component to showcase technology and tools used

src/app/page.tsx

@@ -10,6 +10,7 @@ import { ExperienceModal } from "../components/ExperienceModal";
 import { MiniProjectModal } from "../components/MiniProjectModal";
 import { Navbar } from "../components/Navbar";
 import { Footer } from "../sections/Footer";
+import { TechStack } from "../sections/TechStack";
 import { useState } from "react";
 import type { Experience } from "../types";
 
@@ -53,8 +54,11 @@ export default function Home() {
           oldUsernames={oldUsernames}
         />
 
+
         <WorkExperience realWork={realWork} />
 
+        <TechStack />
+
         <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
           <div className="text-center space-y-4">
             <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">

src/components/cn.ts

@@ -0,0 +1,7 @@
+import { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/sections/TechStack.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../components/cn";
+
+const techStack = [
+  {
+    title: "Monitoring & Testing",
+    items: [
+      { name: "GitHub Actions", description: "CI/CD & automation" },
+      { name: "Vitest", description: "Unit & integration testing" },
+      { name: "Sentry", description: "Error monitoring" },
+      { name: "Umami.is", description: "Privacy-friendly analytics" },
+    ],
+  },
+  {
+    title: "Software Stack",
+    items: [
+      { name: "Next.js / React", description: "Frontend & SSR framework" },
+      { name: "Tailwind CSS", description: "Utility-first styling" },
+      { name: "TypeScript", description: "Typed JavaScript" },
+      {
+        name: "Custom Library & Webserver API",
+        description: "Backend & shared logic",
+      },
+    ],
+  },
+  {
+    title: "Virtualisation",
+    items: [
+      { name: "Proxmox", description: "Hypervisor & VM management" },
+      { name: "Docker", description: "Containerization" },
+      { name: "LXC", description: "Lightweight containers" },
+    ],
+  },
+  {
+    title: "OS",
+    items: [
+      { name: "Ubuntu", description: "Linux distribution" },
+      {
+        name: "Windows Server 2025",
+        description: "Active Directory & domain controller",
+      },
+      { name: "Debian", description: "Linux distribution" },
+    ],
+  },
+  {
+    title: "Servers",
+    items: [
+      { name: "KVMS from datalix.de", description: "Cloud server provider" },
+      { name: "Home server", description: "Self-hosted option" },
+    ],
+  },
+];
+
+export function TechStack() {
+  return (
+    <section className="w-full max-w-4xl mx-auto px-4 space-y-8 mt-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">
+          Tech Stack
+        </h2>
+        <p className="text-gray-400 max-w-2xl mx-auto">
+          My current infrastructure and software stack, from server to
+          monitoring.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {techStack.map((layer) => (
+          <div
+            key={layer.title}
+            className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
+          >
+            <h3 className="text-2xl font-semibold text-white">{layer.title}</h3>
+            <ul className="flex flex-wrap gap-2">
+              {layer.items.map((item) => (
+                <li
+                  key={item.name}
+                  className="px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/20 text-cyan-200 border border-cyan-500/30"
+                >
+                  <span className="font-medium">{item.name}</span>
+                  <span className="ml-2 text-[10px] text-cyan-100/70 font-normal border-l border-cyan-500/30 pl-2">
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}