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

Made icons depend on SOCIALS array

Browse Source
This commit is contained in:
Felix Kirchner
2025-12-18 21:53:59 +01:00
parent f314a0672a
commit bc6c112704
4 changed files with 76 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Footer.jsx
View File

@@ -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.

46
src/components/Navbar.jsx
View File

@@ -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>

18
src/data/content.js
View File

@@ -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 = [
{

3
src/sections/Hero.jsx
View File

@@ -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"