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 React from 'react';
import {Github, Mail} from 'lucide-react';
import {BrandLogo} from './BrandLogo'; import {BrandLogo} from './BrandLogo';
import {ObfuscatedMail} from './ObfuscatedMail';
import {SOCIALS} from '../data/content'; import {SOCIALS} from '../data/content';
export const Footer = () => ( export const Footer = () => (
@@ -11,16 +11,36 @@ export const Footer = () => (
<span className="font-bold text-gray-500">LIQUID DEVELOPMENT</span> <span className="font-bold text-gray-500">LIQUID DEVELOPMENT</span>
</div> </div>
<div className="flex gap-8"> <div className="flex gap-8">
<a href={SOCIALS.github} {SOCIALS.map((social) => {
className="text-gray-400 hover:text-[#00A3FF] transition-colors" const Icon = social.icon;
> const isEmail = !social.link.startsWith('http');
<Github size={24}/>
</a> if (isEmail) {
<a href={SOCIALS.email} return (
className="text-gray-400 hover:text-[#00A3FF] transition-colors" <ObfuscatedMail
> key={social.name}
<Mail size={24}/> email={social.link}
</a> 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> </div>
<div className="text-center mt-8 text-gray-600 text-sm">&copy; {new Date().getFullYear()} Liquid Development. <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 React from 'react';
import {Github, Mail} from 'lucide-react';
import {BrandLogo} from './BrandLogo'; import {BrandLogo} from './BrandLogo';
import {ObfuscatedMail} from './ObfuscatedMail'; import {ObfuscatedMail} from './ObfuscatedMail';
import {NAV_LINKS, SOCIALS} from '../data/content'; import {NAV_LINKS, SOCIALS} from '../data/content';
export const Navbar = () => { export const Navbar = () => {
// Extract email address from "mailto:..." string if necessary
const rawEmail = SOCIALS.email.replace('mailto:', '');
return ( return (
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[#0e0e0e]/90 border-b border-white/5"> <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"> <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>
))} ))}
<a href={SOCIALS.github} target="_blank" rel="noreferrer" {SOCIALS.map((social) => {
className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all" const Icon = social.icon;
title="GitHub"> const isEmail = !social.link.startsWith('http');
<Github size={18}/>
</a>
{/* Obfuscated Email Button */} if (isEmail) {
<ObfuscatedMail return (
email={rawEmail} <ObfuscatedMail
className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center" key={social.name}
title="Contact Us" email={social.link}
> className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
<Mail size={18}/> title={social.name}
</ObfuscatedMail> >
<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>
</div> </div>
</nav> </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 NAV_LINKS = ['Home', 'Projects', 'Team'];
export const SOCIALS = { export const SOCIALS = [
github: "https://github.com/LiquidDevelopmentDE/", {
email: "mailto:hello@liquid-dev.de" name: "GitHub",
}; link: "https://github.com/LiquidDevelopmentDE/",
icon: Github
},
{
name: "Email",
link: "hello@liquid-dev.de",
icon: Mail
}
];
export const TEAM_MEMBERS = [ 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'; import {SOCIALS} from '../data/content';
export const Hero = () => { 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 ( return (
<section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden" <section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"