From bc6c112704eb8de37cf9d349ebd24379d5fe9560 Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Thu, 18 Dec 2025 21:53:59 +0100
Subject: [PATCH] Made icons depend on SOCIALS array

---
 src/components/Footer.jsx | 42 +++++++++++++++++++++++++----------
 src/components/Navbar.jsx | 46 ++++++++++++++++++++++++---------------
 src/data/content.js       | 18 +++++++++++----
 src/sections/Hero.jsx     |  3 ++-
 4 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 55767c6..a870a1f 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Github, Mail} from 'lucide-react';
 import {BrandLogo} from './BrandLogo';
+import {ObfuscatedMail} from './ObfuscatedMail';
 import {SOCIALS} from '../data/content';
 
 export const Footer = () => (
@@ -11,16 +11,36 @@ export const Footer = () => (
                 <span className="font-bold text-gray-500">LIQUID DEVELOPMENT</span>
             </div>
             <div className="flex gap-8">
-                <a href={SOCIALS.github}
-                   className="text-gray-400 hover:text-[#00A3FF] transition-colors"
-                >
-                    <Github size={24}/>
-                </a>
-                <a href={SOCIALS.email}
-                   className="text-gray-400 hover:text-[#00A3FF] transition-colors"
-                >
-                    <Mail size={24}/>
-                </a>
+                {SOCIALS.map((social) => {
+                    const Icon = social.icon;
+                    const isEmail = !social.link.startsWith('http');
+
+                    if (isEmail) {
+                        return (
+                            <ObfuscatedMail
+                                key={social.name}
+                                email={social.link}
+                                className="text-gray-400 hover:text-[#00A3FF] transition-colors"
+                                title={social.name}
+                            >
+                                <Icon size={24}/>
+                            </ObfuscatedMail>
+                        );
+                    }
+
+                    return (
+                        <a
+                            key={social.name}
+                            href={social.link}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-gray-400 hover:text-[#00A3FF] transition-colors"
+                            title={social.name}
+                        >
+                            <Icon size={24}/>
+                        </a>
+                    );
+                })}
             </div>
         </div>
         <div className="text-center mt-8 text-gray-600 text-sm">&copy; {new Date().getFullYear()} Liquid Development.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 30880a1..112b501 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,13 +1,9 @@
 import React from 'react';
-import {Github, Mail} from 'lucide-react';
 import {BrandLogo} from './BrandLogo';
 import {ObfuscatedMail} from './ObfuscatedMail';
 import {NAV_LINKS, SOCIALS} from '../data/content';
 
 export const Navbar = () => {
-    // Extract email address from "mailto:..." string if necessary
-    const rawEmail = SOCIALS.email.replace('mailto:', '');
-
     return (
         <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[#0e0e0e]/90 border-b border-white/5">
             <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
@@ -24,20 +20,36 @@ export const Navbar = () => {
                         </a>
                     ))}
 
-                    <a href={SOCIALS.github} target="_blank" rel="noreferrer"
-                       className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all"
-                       title="GitHub">
-                        <Github size={18}/>
-                    </a>
+                    {SOCIALS.map((social) => {
+                        const Icon = social.icon;
+                        const isEmail = !social.link.startsWith('http');
 
-                    {/* Obfuscated Email Button */}
-                    <ObfuscatedMail
-                        email={rawEmail}
-                        className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
-                        title="Contact Us"
-                    >
-                        <Mail size={18}/>
-                    </ObfuscatedMail>
+                        if (isEmail) {
+                            return (
+                                <ObfuscatedMail
+                                    key={social.name}
+                                    email={social.link}
+                                    className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
+                                    title={social.name}
+                                >
+                                    <Icon size={18}/>
+                                </ObfuscatedMail>
+                            );
+                        }
+
+                        return (
+                            <a
+                                key={social.name}
+                                href={social.link}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all"
+                                title={social.name}
+                            >
+                                <Icon size={18}/>
+                            </a>
+                        );
+                    })}
                 </div>
             </div>
         </nav>
diff --git a/src/data/content.js b/src/data/content.js
index 12515d7..5155a95 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -1,9 +1,19 @@
+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"
-};
+export const SOCIALS = [
+    {
+        name: "GitHub",
+        link: "https://github.com/LiquidDevelopmentDE/",
+        icon: Github
+    },
+    {
+        name: "Email",
+        link: "hello@liquid-dev.de",
+        icon: Mail
+    }
+];
 
 export const TEAM_MEMBERS = [
     {
diff --git a/src/sections/Hero.jsx b/src/sections/Hero.jsx
index d52f506..9c0bcd3 100644
--- a/src/sections/Hero.jsx
+++ b/src/sections/Hero.jsx
@@ -7,7 +7,8 @@ import {ObfuscatedMail} from '../components/ObfuscatedMail';
 import {SOCIALS} from '../data/content';
 
 export const Hero = () => {
-    const rawEmail = SOCIALS.email.replace('mailto:', '');
+    const emailSocial = SOCIALS.find(s => !s.link.startsWith('http'));
+    const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de';
 
     return (
         <section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"