Replaced hardcoded roles

src/components/TeamMember.jsx

@@ -2,13 +2,22 @@ import React from 'react';
 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 }) => (
+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">
+    <motion.div whileHover={{y: -5}}
-    <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>
+                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 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="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">
+        <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>
 
@@ -17,8 +26,23 @@ export const TeamMember = ({ name, nickname, img, gh, email, website, role, role
             <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>
+                {roles.map((roleId) => {
-        <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>
+                    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">
@@ -31,10 +55,14 @@ export const TeamMember = ({ name, nickname, img, gh, email, website, role, role
                     <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">
+                <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">
+                <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>

src/data/content.js

@@ -1,5 +1,3 @@
-import { Github, Mail } from 'lucide-react';
-
 export const NAV_LINKS = ['Home', 'Projects', 'Team'];
 
 export const SOCIALS = {
@@ -11,8 +9,7 @@ export const TEAM_MEMBERS = [
     {
         name: "Felix",
         nickname: "Flixcoo",
-    role: "FOUNDER",
+        roles: [0, 1],
-    role2: "DEVELOPER",
         img: "https://github.com/flixcoo.png",
         gh: "https://github.com/flixcoo",
         email: "felix@liquid-dev.de",
@@ -21,8 +18,7 @@ export const TEAM_MEMBERS = [
     {
         name: "Yannick",
         nickname: "Gelbeinhalb",
-    role: "FOUNDER",
+        roles: [0, 1],
-    role2: "DEVELOPER",
         img: "https://github.com/GelbEinhalb.png",
         gh: "https://github.com/GelbEinhalb",
         email: "yannick@liquid-dev.de",
@@ -31,11 +27,16 @@ export const TEAM_MEMBERS = [
     {
         name: "Mathis",
         nickname: "Sneeex",
-    role: "FOUNDER",
+        roles: [0, 1],
-    role2: "DEVELOPER",
         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"},
+];