From 6a7b08a30bb742f924c13b1a6edf6b6c4387fc79 Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Thu, 18 Dec 2025 21:39:15 +0100
Subject: [PATCH] Replaced hardcoded roles

---
 src/components/TeamMember.jsx | 104 +++++++++++++++++++++-------------
 src/data/content.js           |  69 +++++++++++-----------
 2 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/src/components/TeamMember.jsx b/src/components/TeamMember.jsx
index d36dd49..2137b89 100644
--- a/src/components/TeamMember.jsx
+++ b/src/components/TeamMember.jsx
@@ -1,43 +1,71 @@
 import React from 'react';
-import { motion } from 'framer-motion';
-import { Github, Mail, Globe } from 'lucide-react';
-import { ObfuscatedMail } from './ObfuscatedMail';
+import {motion} from 'framer-motion';
+import {Github, Mail, Globe} from 'lucide-react';
+import {ObfuscatedMail} from './ObfuscatedMail';
+import {ROLES} from '../data/content';
 
-export const TeamMember = ({ name, nickname, img, gh, email, website, role, role2 }) => (
-  <motion.div whileHover={{ y: -5 }} className="group relative bg-[#121212] rounded-2xl p-6 border border-white/10 flex flex-col items-center text-center overflow-hidden shadow-lg hover:border-[#00A3FF]/40 transition-all duration-300">
-    <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-    <div className="absolute top-0 w-full h-1 bg-[#00A3FF] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
-    
-    <div className="w-28 h-28 rounded-full mb-5 p-1 border-2 border-[#00A3FF]/30 group-hover:border-[#00A3FF] transition-colors relative z-10">
-        <img src={img} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800" />
-    </div>
-    
-    <div className="relative z-10 w-full">
-      <h4 className="text-xl font-bold text-white mb-1">{name}</h4>
-      <span className="text-sm font-mono text-gray-500 mb-4 block">@{nickname.toLowerCase()}</span>
-      
-      <div className="flex gap-2 justify-center mb-6">
-        <span className="px-3 py-1 rounded-md bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold border border-[#00A3FF]/20 tracking-wider">FOUNDER</span>
-        <span className="px-3 py-1 rounded-md bg-blue-500/10 text-blue-300 text-xs font-bold border border-blue-500/20 tracking-wider">DEVELOPER</span>
-      </div>
-      
-      <div className="flex gap-3 justify-center w-full">
-        {/* Obfuscated Member Mail */}
-        <ObfuscatedMail 
-          email={email} 
-          className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center group/icon"
-          title="Email"
+export const TeamMember = ({name, nickname, img, gh, email, website, roles}) => (
+    <motion.div whileHover={{y: -5}}
+                className="group relative bg-[#121212] rounded-2xl p-6 border border-white/10 flex flex-col items-center text-center overflow-hidden shadow-lg hover:border-[#00A3FF]/40 transition-all duration-300">
+        <div
+            className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
         >
-          <Mail size={18} />
-        </ObfuscatedMail>
+        </div>
+        <div
+            className="absolute top-0 w-full h-1 bg-[#00A3FF] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
+        >
+        </div>
 
-        <a href={gh} target="_blank" rel="noreferrer" className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center" title="GitHub">
-          <Github size={18} />
-        </a>
-        <a href={website} target="_blank" rel="noreferrer" className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center" title="Website">
-          <Globe size={18} />
-        </a>
-      </div>
-    </div>
-  </motion.div>
+        <div
+            className="w-28 h-28 rounded-full mb-5 p-1 border-2 border-[#00A3FF]/30 group-hover:border-[#00A3FF] transition-colors relative z-10">
+            <img src={img} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800"/>
+        </div>
+
+        <div className="relative z-10 w-full">
+            <h4 className="text-xl font-bold text-white mb-1">{name}</h4>
+            <span className="text-sm font-mono text-gray-500 mb-4 block">@{nickname.toLowerCase()}</span>
+
+            <div className="flex gap-2 justify-center mb-6">
+                {roles.map((roleId) => {
+                    const roleData = ROLES.find(r => r.id === roleId);
+                    if (!roleData) return null;
+                    return (
+                        <span
+                            key={roleId}
+                            className="px-3 py-1 rounded-md text-xs font-bold border tracking-wider"
+                            style={{
+                                backgroundColor: `${roleData.bgColor}1A`,
+                                color: roleData.textColor,
+                                borderColor: `${roleData.borderColor}33`
+                            }}
+                        >
+                            {roleData.role}
+                        </span>
+                    );
+                })}
+            </div>
+
+            <div className="flex gap-3 justify-center w-full">
+                {/* Obfuscated Member Mail */}
+                <ObfuscatedMail
+                    email={email}
+                    className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center group/icon"
+                    title="Email"
+                >
+                    <Mail size={18}/>
+                </ObfuscatedMail>
+
+                <a href={gh} target="_blank" rel="noreferrer"
+                   className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center"
+                   title="GitHub">
+                    <Github size={18}/>
+                </a>
+                <a href={website} target="_blank" rel="noreferrer"
+                   className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center"
+                   title="Website">
+                    <Globe size={18}/>
+                </a>
+            </div>
+        </div>
+    </motion.div>
 );
diff --git a/src/data/content.js b/src/data/content.js
index e0fd911..12515d7 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -1,41 +1,42 @@
-import { Github, Mail } from 'lucide-react';
-
 export const NAV_LINKS = ['Home', 'Projects', 'Team'];
 
 export const SOCIALS = {
-  github: "https://github.com/LiquidDevelopmentDE/",
-  email: "mailto:hello@liquid-dev.de"
+    github: "https://github.com/LiquidDevelopmentDE/",
+    email: "mailto:hello@liquid-dev.de"
 };
 
 export const TEAM_MEMBERS = [
-  {
-    name: "Felix",
-    nickname: "Flixcoo",
-    role: "FOUNDER",
-    role2: "DEVELOPER",
-    img: "https://github.com/flixcoo.png",
-    gh: "https://github.com/flixcoo",
-    email: "felix@liquid-dev.de",
-    website: "https://felixkirchner.de"
-  },
-  {
-    name: "Yannick",
-    nickname: "Gelbeinhalb",
-    role: "FOUNDER",
-    role2: "DEVELOPER",
-    img: "https://github.com/GelbEinhalb.png",
-    gh: "https://github.com/GelbEinhalb",
-    email: "yannick@liquid-dev.de",
-    website: "https://yannick-weigert.de"
-  },
-  {
-    name: "Mathis",
-    nickname: "Sneeex",
-    role: "FOUNDER",
-    role2: "DEVELOPER",
-    img: "https://github.com/mathiskir.png",
-    gh: "https://github.com/mathiskir",
-    email: "mathis@liquid-dev.de",
-    website: "https://mathiskirchner.de"
-  }
+    {
+        name: "Felix",
+        nickname: "Flixcoo",
+        roles: [0, 1],
+        img: "https://github.com/flixcoo.png",
+        gh: "https://github.com/flixcoo",
+        email: "felix@liquid-dev.de",
+        website: "https://felixkirchner.de"
+    },
+    {
+        name: "Yannick",
+        nickname: "Gelbeinhalb",
+        roles: [0, 1],
+        img: "https://github.com/GelbEinhalb.png",
+        gh: "https://github.com/GelbEinhalb",
+        email: "yannick@liquid-dev.de",
+        website: "https://yannick-weigert.de"
+    },
+    {
+        name: "Mathis",
+        nickname: "Sneeex",
+        roles: [0, 1],
+        img: "https://github.com/mathiskir.png",
+        gh: "https://github.com/mathiskir",
+        email: "mathis@liquid-dev.de",
+        website: "https://mathiskirchner.de"
+    }
+];
+
+
+export const ROLES = [
+    {id: 0, role: "FOUNDER", bgColor: "#00A3FF", borderColor: "#00A3FF", textColor: "#00A3FF"},
+    {id: 1, role: "DEVELOPER", bgColor: "#3b82f6", borderColor: "#3b82f6", textColor: "#93c5fd"},
 ];