liquid-development/website
3
0
Fork 0
Code Issues Pull Requests Activity

Replaced hardcoded roles

Browse Source
This commit is contained in:
Felix Kirchner
2025-12-18 21:39:15 +01:00
parent 694c84e98b
commit 6a7b08a30b
2 changed files with 101 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/TeamMember.jsx
View File

@@ -1,15 +1,24 @@
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>
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"
>
</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
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">
@@ -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>
<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>
{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">
@@ -28,14 +52,18 @@ export const TeamMember = ({ name, nickname, img, gh, email, website, role, role
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} />
<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 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 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>

17
src/data/content.js
View File

@@ -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",
role2: "DEVELOPER",
roles: [0, 1],
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",
role2: "DEVELOPER",
roles: [0, 1],
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",
role2: "DEVELOPER",
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"},
];